Color picker and contrast checker
HEX, RGB, HSL and OKLCH values, shades, and a WCAG contrast check.
How to use it
- Choose a color with the picker, type any CSS color (hex, RGB, HSL or a name like teal), pick one from your screen, or open an image and click on it.
- Copy the value in the format you need: HEX for most tools, RGB or HSL for CSS, CMYK as a starting point for print, OKLCH for modern CSS.
- Use the Contrast checker to test text against a background. It shows whether the pair passes WCAG AA and AAA, and suggests the nearest color that does.
Questions
What contrast ratio do I need?
WCAG 2.2 level AA asks for 4.5:1 for normal text and 3:1 for large text (24 px, or 19 px bold) and for buttons, icons and input borders. Level AAA asks for 7:1 and 4.5:1.
How do I convert HEX to RGB?
Split the six hex digits into three pairs and turn each from base 16 into a number: #ffc83d is ff, c8, 3d, which is rgb(255, 200, 61). Type either form above and every other format appears.
What is OKLCH?
A newer way of writing colors, supported in modern CSS, where lightness matches how bright a color looks to people. It makes it easier to build palettes whose shades feel evenly spaced.
Is the CMYK value exact for printing?
No. It’s a straight mathematical conversion. Real print colors depend on the paper, ink and printer profile, so ask your printer for a proof of anything that has to match.