Color Converter
One colour, every notation
HEX, RGB, HSL, HWB, LAB and OKLCH side by side, with WCAG contrast ratios against black and white.
Color Converter
Runs in your browser · nothing uploaded| Unit | Symbol | Value |
|---|---|---|
| HEX | hex | #CDFF2E |
| RGB | rgb | rgb(205 255 46) |
| HSL | hsl | hsl(74.4 100% 59%) |
| HWB | hwb | hwb(74.4 18% 0%) |
| LAB | lab | lab(94.07% -34.86 83.13) |
| OKLCH | oklch | oklch(0.9323 0.219 123.3) |
| Contrast on black | ratio | 17.94 : 1 · AAA for body text |
| Contrast on white | ratio | 1.17 : 1 · Fails WCAG |
| Relative luminance | L | 0.847 |
01 — How to use Color Converter
02 — Getting good results
03 — Questions
No. Every conversion is arithmetic running in this browser tab.
Because CSS Color 4 defines lab() against the D50 illuminant while sRGB is defined against D65, so converting between them needs chromatic adaptation. This uses the combined matrices the specification publishes, which fold that adaptation in. Pairing a D65 matrix with a D50 white point is the usual mistake, and the giveaway is that pure white comes out with a non-zero a* instead of zero.
A ratio of 4.5:1 meets AA for body text and 7:1 meets AAA. Large text — roughly 18pt, or 14pt bold — only needs 3:1 for AA. Below 3:1 the pair fails for text at any size.
Because sRGB has only 256 levels per channel, so converting out to a continuous space and back lands on the nearest representable value. The difference is at most one step per channel and is not visible.
04 — More about Color Converter
Why HSL is not perceptually uniform
HSL was designed in the 1970s to give designers a more intuitive handle on RGB, and at that job it partly succeeds: hue, saturation and lightness are more meaningful axes than three light intensities. What it does not do is model human vision. Its lightness is a simple arithmetic function of the RGB channels, and the eye is far more sensitive to green than to blue — so a yellow at 50% HSL lightness is dramatically brighter than a blue at the same value. The practical consequence shows up whenever anyone generates a palette by holding lightness constant and rotating the hue: the result looks uneven, with some colours jumping forward and others receding, and no amount of tweaking the saturation fixes it because the axis itself is wrong. OKLCH exists to solve exactly this. Its lightness is built on a model of perception, so equal numbers do mean equal apparent brightness, which is what makes it genuinely useful rather than merely newer.
What a contrast ratio does and does not tell you
The WCAG 2.x contrast ratio compares the relative luminance of two colours, adding a small constant to each to avoid dividing by zero at black. It runs from 1:1 for identical colours to 21:1 for black on white, and the thresholds — 3:1, 4.5:1, 7:1 — come from research on legibility for readers with moderately low vision. It is a good measure and a limited one. It considers luminance only, so two colours of similar brightness but wildly different hue score as low contrast even though they are easy to tell apart, and it says nothing about colour-blind readers, for whom hue difference may carry no information at all. It also takes no account of font weight or size beyond the coarse large-text exception. Meeting the ratio is a floor rather than a guarantee, which is why the newer APCA work exists — and why testing with real text at real sizes remains worth doing.
61 more tools
where this came from.
Same shell, same shortcuts, same promise: nothing leaves your browser.