Color picker
Pick a color, copy it as HEX, RGB, or HSL, explore shades and tints, and check WCAG contrast — with a screen eyedropper in supported browsers. Free, in your browser.
#7c3aedrgb(124, 58, 237)hsl(262, 83%, 58%)#83c512Shades — click to use
Tints — click to use
0 bytes of your file have left this device. Counted live in this tab, not claimed — open your browser’s Network tab and watch.
How it works
- 1
Pick a color with the swatch, type a HEX/RGB value, or grab one off your screen with the eyedropper.
- 2
Copy the HEX, RGB, or HSL value with one click.
- 3
Explore shades, tints, and the complementary color — and check WCAG contrast for text.
Frequently asked questions
What formats do I get?
HEX (#7c3aed), RGB (rgb(124, 58, 237)), and HSL (hsl(263, 83%, 58%)) — each with a one-click copy button, plus the complementary color.
How does the eyedropper work?
In browsers that support the EyeDropper API (Chrome and Edge), one click lets you pick any color from anything visible on your screen — even outside the browser window. Elsewhere, the swatch picker and text input work everywhere.
What are shades and tints?
Shades mix your color toward black, tints toward white — five of each, clickable to keep exploring. Handy for building hover states and backgrounds around a brand color.
What do the AA and AAA badges mean?
They’re WCAG accessibility contrast grades for using your color as text on white or black: 4.5:1 passes AA for normal text, 7:1 passes the stricter AAA, and 3:1 is enough only for large headlines.
Is anything sent to a server?
No — the picker, conversions, and contrast math all run in your browser.