Skip to content
Devtools 360

Pick Colours and Check Their Contrast

Choose a colour with the picker or type a value in any format, and every other format updates instantly. Contrast ratios against white, black and a background of your choice show whether text in that colour meets WCAG AA or AAA.

No data leaves this pageFree · No sign-up

How to use the colour picker

  1. Click the colour swatch to open your browser's picker, or use "Pick from screen" in Chrome or Edge to sample any pixel on your display.
  2. Fine-tune by typing into any format field — HEX, RGB, HSL, HSV, CMYK or OKLCH — and the others follow.
  3. Check the contrast panel to see the ratio against white, black and a custom background, with AA and AAA pass/fail badges.
  4. Click a tint or shade to use it, then copy the value you need with the copy button beside each format.

Why OKLCH is worth knowing

HSL lightness is not perceptual: a yellow and a blue with the same HSL lightness look very different in brightness. OKLCH fixes that, so adjusting only its L value produces evenly stepped colours, which is why modern design systems use it for palettes. All current browsers support oklch() in CSS. If you only need quick format swaps, the HEX to RGB Converter handles whole lists at once.

Benefits

  • Every field is editable and round-trips, so you can start from whichever format you have.
  • Contrast results are truncated, not rounded, so a 4.49:1 colour is never shown as passing AA.
  • Translucent colours are blended with each background before contrast is measured, which matches what users actually see.

Limitations

  • The screen eyedropper relies on the EyeDropper API, available only in Chromium-based desktop browsers.
  • CMYK values are a mathematical approximation without an ICC profile, so they will not match a printer's output exactly.
  • OKLCH colours outside the sRGB gamut are clipped to the nearest displayable colour.

Privacy and security

All conversions run in this page. The only thing stored is a short list of recent colour codes in your browser's localStorage so you can reuse them; you can clear it at any time and it never leaves your device.

Read our privacy policy for details about the site as a whole.

Frequently asked questions

What contrast ratio do I need for accessible text?

WCAG 2.2 level AA requires at least 4.5:1 for normal text and 3:1 for large text (24px regular or about 18.66px bold). Level AAA raises those to 7:1 and 4.5:1. Icons and input borders need 3:1 against their surroundings.

Why is the "Pick from screen" button disabled?

It uses the EyeDropper API, which Firefox and Safari have not implemented. Your browser's own colour dialog (opened by clicking the swatch) sometimes includes its own eyedropper instead.

What is the difference between HSL and HSV?

Both describe hue and saturation, but HSL's third value is lightness (50% is the pure colour, 100% is white) while HSV's is value or brightness (100% is the pure colour). Design apps such as Photoshop call HSV "HSB". CSS supports HSL but not HSV.