A colour converter turns one colour into every format you need — HEX, RGB, HSL and OKLCH — while a contrast checker tells you whether text in that colour is readable against its background under the WCAG accessibility guidelines. Type or pick a colour above and all four formats update live next to a swatch; the contrast panel scores it against white, black and any colour you choose. Everything happens in your browser and nothing you enter is transmitted anywhere.
The four colour formats
The same colour can be written many ways, and each format is suited to a different job:
| Format | Example | Best for |
|---|---|---|
| HEX | #2F81F7 |
Compact, universal in CSS, design tools and markup. |
| RGB | rgb(47, 129, 247) |
Reasoning about raw red, green and blue channels or adding alpha. |
| HSL | hsl(214, 93%, 58%) |
Tweaking hue, saturation and lightness by hand. |
| OKLCH | oklch(61.82% 0.1935 258.33) |
Perceptually even lightness and clean gradients. |
Why OKLCH is worth learning
HSL is convenient but deceptive: two colours with the same lightness value can look wildly different in brightness, and blending two hues in HSL often passes through a dull grey. OKLCH is built on the OKLab colour space, which was designed so that a given change in lightness or hue looks like the same amount of change to the human eye. That makes it excellent for building colour scales, tinting and shading systematically, and producing gradients that stay vivid all the way across. This tool computes OKLCH the correct way — converting sRGB to linear light, into the OKLab cone response, and out to lightness, chroma and hue — rather than faking it with a rough formula.
Reading the contrast checker
Web Content Accessibility Guidelines (WCAG) express legibility as a contrast ratio between two colours, from 1:1 (identical) up to 21:1 (pure black on pure white). The checker shows the ratio of your colour against a comparison colour and marks each conformance level:
- AA normal text — needs at least 4.5:1. This is the baseline most sites should meet for body copy.
- AA large text — needs at least 3:1. Large means roughly 24px, or 18.66px if bold.
- AAA normal text — needs at least 7:1, the enhanced level for maximum readability.
- AAA large text — needs at least 4.5:1.
By default you see the score against both white and black, so you can tell at a glance whether light or dark text sits better on your colour. Enter a custom comparison colour to test a real foreground and background pair.
A worked example
Take the blue #2F81F7. As RGB it is rgb(47, 129, 247); as HSL, hsl(214, 93%, 58%); as OKLCH, oklch(61.82% 0.1935 258.33). Against white its contrast is about 3.75:1 — enough for large headings under AA, but short of the 4.5:1 needed for normal body text. Against black it reaches about 5.60:1, comfortably passing AA for normal text. So white text on this blue works for big headings, while black text is the safer choice for smaller copy.
Common pitfalls
- Assuming a nice colour is accessible. Mid-tone colours frequently fail against both black and white; always verify rather than eyeball it.
- Forgetting large-text rules. A colour that fails for body text may be perfectly fine for a big headline, which only needs 3:1.
- Testing transparent colours. Contrast is defined for opaque colours, so flatten any semi-transparent layer against its real backdrop first.
- Trusting a single round-trip. HSL degrees and percentages are rounded for readability, so re-parsing them can shift a value by one unit — harmless, but worth knowing.
Privacy
This converter runs entirely on your device using the browser built-in colour picker and plain JavaScript maths. There is no server round-trip, no logging and no third-party analytics on the page, so you can safely check brand or client colours here — or run the tool offline once it has loaded.