Color Tools

Convert colours between HEX, RGB, HSL, CMYK and OKLCH, pick colours visually, and check WCAG contrast ratios as you work.

3 tools in this category.

Color Converter
Convert a colour between every common format — including OKLCH — with WCAG contrast ratios included.
Color Picker
Pick a colour visually and get every format, a tint/shade ramp and live WCAG contrast feedback.
Color Contrast Checker
Check any text colour against any background for WCAG AA and AAA — a whole palette at a time, with alpha composited properly.

About Color Tools

Three tools that cover the colour work a developer actually does: converting between notations, picking a value visually, and checking whether the result is legible. The Color Converter handles HEX, RGB, HSL, CMYK and OKLCH; the Color Picker gives you a visual surface with live values in every format; the Color Contrast Checker measures a foreground and background pair against the WCAG thresholds.

OKLCH is worth understanding rather than skipping past. HSL has a well-known flaw: two colours with the same lightness value can look wildly different in brightness, because the number is a geometric artefact of the RGB cube rather than a measure of perceived light. Yellow at 50% HSL lightness is far brighter than blue at 50%. OKLCH is built on a perceptual model, so equal lightness values genuinely look equally light — which is what makes it possible to build a palette by varying hue at fixed lightness and get a consistent set rather than a lucky one.

Contrast is the part with a legal dimension in many jurisdictions. WCAG 2 requires 4.5:1 for normal text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 at AAA. The ratio is computed from relative luminance, which is emphatically not the same as the lightness slider in a colour picker, and this is why pairs that look fine to a designer with a good monitor fail for a reader on a phone in daylight.

Frequently asked questions

What contrast ratio do I actually need?

For WCAG 2 level AA, which is what most legislation references: 4.5:1 for body text, and 3:1 for large text — defined as 18pt, or 14pt bold, and above. Level AAA raises those to 7:1 and 4.5:1. Interactive elements and meaningful graphics need 3:1 against their surroundings. AA is the practical target; AAA is worth reaching for on long-form reading.

Why should I use OKLCH instead of HSL?

Because HSL lightness does not correspond to perceived brightness. Yellow and blue at the same HSL lightness look nothing alike, so a palette built by holding lightness constant and rotating hue produces colours of visibly uneven weight. OKLCH is derived from a perceptual model, so equal lightness reads as equally light and generating a consistent palette becomes arithmetic rather than trial and error. It has been supported in all major browsers since 2023.

Why does CMYK look different from what I see on screen?

Because they are different kinds of colour. RGB is additive light on a display; CMYK is subtractive ink on paper, and its gamut is smaller — vivid screen colours, especially saturated blues and greens, have no ink equivalent and get approximated. A conversion here is a reasonable starting point, not a proof. For anything going to press, work from your printer's ICC profile and a physical proof.

My colours pass the contrast check but text still looks hard to read. Why?

Contrast ratio only measures the two colours; it says nothing about type. Thin font weights, small sizes, tight letter-spacing and low-quality rendering all reduce legibility at a ratio that passes on paper. WCAG is a floor rather than a design target — if text feels hard to read at 4.5:1, increasing weight or size usually helps more than pushing the ratio higher.

Other categories