Color Picker & Converter
Choose any color on an interactive wheel or with the native picker, then copy its HEX, RGB, HSL or CMYK in one click — with shades and WCAG contrast ratios built in.
Color Picker & Converter
How It Works
Three steps to a color and its formats.
Pick a color
Click anywhere on the color wheel or use the native picker and slider.
Copy a format
Grab the color as HEX, RGB, HSL or CMYK with the copy buttons.
Check shades & contrast
Browse light-to-dark shades and see WCAG contrast against white and black.
FAQ
Common questions about the color picker.
How do I pick a color?
Click anywhere on the color wheel or open the native color picker below it — all formats update instantly.
Which color formats are supported?
HEX, RGB, HSL and CMYK, each with a one-click copy button.
What are the shades?
Nine tints and shades of your chosen hue from 10% to 90% lightness, each clickable to select.
How is contrast measured?
It computes the WCAG contrast ratio of your color against white and black backgrounds and marks AA pass/fail.
Is my color data uploaded?
No. Everything is computed locally in your browser.
Can I use these colors in CSS?
Yes. Copy the HEX or RGB value and paste it directly into your stylesheets.