About the Color Picker
The Color Picker shows one color in seven formats at once: HEX, RGB, HSL, HWB, OKLCH, HSV and CMYK. Choose a color with the picker, type any CSS color, pick one from your screen or click a pixel in a photo, then copy the format you need with one click.
It is made for web designers and developers who move colors between design files, stylesheets and brand guides. Next to the formats you get the closest CSS color name, a row of eleven tints and shades in the same hue, and a contrast check that tells you right away whether text in this color is readable on white, on black or on your own background.
The contrast check uses the WCAG 2 formula that accessibility audits use, and it takes the opacity into account. Everything happens in your browser, including images you open, so nothing is uploaded.
How to use it
- Choose a colorClick the color box to open your system picker, or type a color in the text box next to it. HEX, rgb(), hsl(), hwb(), oklch() and names like tomato all work.
- Set the opacityMove the Opacity slider to make the color translucent. The formats switch to their alpha versions, such as rgba() and 8-digit HEX.
- Copy a formatEvery row on the right has its own Copy button: HEX, RGB, HSL, HWB, OKLCH, HSV, CMYK and the closest color name.
- Explore tints and shadesThe row of eleven swatches runs from almost white to almost black in the same hue. Click one to make it the current color.
- Check the contrastRead the three contrast cards, then set "Test against this background" to your own page color to see the ratio and the AA and AAA results for it.
Key features
Seven formats at once
HEX, RGB, HSL, HWB, OKLCH, HSV and CMYK, with alpha versions when the opacity is below 100%.
Any CSS color as input
Paste a value straight from a stylesheet: 3, 4, 6 or 8-digit HEX, rgb(), hsl(), hwb(), oklch(), lab() or one of the CSS color names.
Pick from the screen or a photo
"Pick from screen" appears in browsers that support it (Chrome, Edge and Opera on desktop). "Pick from an image" works everywhere: open a photo and click any pixel.
Tints and shades
Eleven steps from 97% to 18% lightness in OKLCH, which keeps the hue steady and the steps even to the eye.
Honest contrast check
WCAG 2 ratios on white, black and your background, with AA, AAA and AA large results. Translucent colors are blended with the background first, and ratios are never rounded up.
Private by design
No upload and no account. Images are read on your device and nothing is stored.
Examples
One color in every format
The tool starts with #2B59FF, a bright cobalt blue:
| Format | Value |
|---|---|
| HEX | #2B59FF |
| RGB | rgb(43, 89, 255) |
| HSL | hsl(227, 100%, 58%) |
| HWB | hwb(227 17% 0%) |
| OKLCH | oklch(54.7% 0.25 265.8) |
| HSV | hsv(227, 83%, 100%) |
| CMYK | cmyk(83%, 65%, 0%, 0%) |
It is not a named CSS color, so the preview says Close to royalblue. Type tomato instead and you get #FF6347, hsl(9, 100%, 64%) and the exact name tomato.
Opacity
Paste rgb(255 99 71 / 50%) and the Opacity slider moves to 50%. The formats become #FF634780, rgba(255, 99, 71, 0.5) and hsla(9, 100%, 64%, 0.5). Type a code without opacity, such as #FF6347, and the slider goes back to 100%.
Tints and shades
For #2B59FF, the eleven swatches are:
#F1F5FF #D9E5FF #B7CDFF #8CAFFF
#628EFF #3969FF #234CE6 #1533C4
#0A15A2 #050078 #020047The light end works for backgrounds and hover states, the dark end for text and borders, all in the same family of blue.
Contrast check
| Text color | On white | Result |
|---|---|---|
#2B59FF | 5.28:1 | AA |
#767676 | 4.54:1 | AA |
#777777 | 4.47:1 | AA large only |
#595959 | 7.00:1 | AAA |
#FF6347 | 2.94:1 | Fails |
#767676 is the lightest gray that passes AA for normal text on white. One step lighter, #777777, has a ratio of 4.478, which is shown as 4.47 because WCAG thresholds are not rounded. Opacity matters too: #2B59FF at 60% opacity drops to 2.60:1 on white, because the white background shows through.
The same blue on a dark background such as #14161F reaches only 3.41:1, enough for large headings but not for body text.
Tips
- Paste colors in whatever format you have. A value copied from a stylesheet, a design tool or a brand guide is read as is, so you never need to convert by hand first.
- Use OKLCH when you build a color system. Two colors with the same OKLCH lightness look equally light, which is not true for HSL.
- Set "Test against this background" to your real page color before trusting the contrast cards. Many sites use an off-white or dark gray, not pure white or black.
- Pick text colors from the dark half of the tints and shades row. The steps from #1533C4 down all pass AAA on white for this blue.
- To match a color in a screenshot or a photo, open it with "Pick from an image" and click the pixel. Zoom into a flat area, since edges blend neighboring colors.
Common mistakes and limits
- Treating CMYK values as print-readyThe CMYK here is a simple conversion without a printer profile. For real print work, ask your printer for the profile and convert in a layout program.
- Expecting HSL lightness to match what you seeYellow and blue at the same HSL lightness look very different. Compare OKLCH lightness, or check the contrast ratio, instead.
- Rounding a contrast ratio up to passA ratio of 4.47:1 fails the 4.5:1 rule, even though it is close. The tool never rounds up, and neither do audit tools.
- Forgetting the opacity in a contrast checkTranslucent text lets the background through and loses contrast. Check the color at the opacity you will actually use.
- Using a "close to" name as the exact colorThe closest name is only a description. Close to royalblue is not #4169E1, so copy the HEX or RGB value for your code.