Color Converter
Convert any CSS colour between HEX, RGB, HSL, HWB, OKLCH and CMYK, check text contrast against the exact WCAG formula, and pull a ten-step lightness scale from any colour — all in your browser.
One colour, six notations
Every format on this page names the same sRGB colour a different way.
Hex and rgb() store the red, green and blue channels
directly — hex in two hexadecimal digits per channel, which is why a
byte-per-channel colour is always six digits. hsl()
rearranges the same numbers into hue, saturation and lightness, which
is easier to reason about but keeps sRGB's crooked sense of brightness.
hwb() describes a hue mixed with white and black — the
mental model of a paint mixer. oklch() is the modern
perceptual notation, and CMYK approximates how the colour would
separate for print.
| Format | #336699 written as | Where it is used |
|---|---|---|
| HEX | #336699 | everywhere; the interchange format |
| RGB | rgb(51 102 153) | CSS, canvas, image data |
| HSL | hsl(210 50% 40%) | hand-adjusting hue or lightness in CSS |
| HWB | hwb(210 20% 40%) | CSS Level 4; picker-style reasoning |
| OKLCH | oklch(49.93% 0.0987 250.4) | modern design systems, perceptual palettes |
| CMYK | cmyk(67%, 33%, 0%, 40%) | print pre-flight, as an approximation |
Contrast: the number that decides readability
The WCAG ratio runs from 1:1 (identical colours) to 21:1 (black on white). It is computed from luminance, not from how different two hues look — red and green can be maximally different in hue and nearly identical in luminance, which is exactly the pairing colour-blind readers cannot separate. The thresholds:
| Level | Normal text | Large text (18pt / 14pt bold) |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
Everything runs locally in your browser — no colour you type or pick is sent anywhere.
Frequently asked questions
Which colour formats does the tool read?
Hex in all four lengths (#369, #3699, #336699, #33669980), rgb() and hsl() in both the legacy comma syntax and the modern space syntax, including percentages and an alpha channel written either as a fourth value or after a slash. Whatever goes in, every output format is shown at once.
What is OKLCH and why would I use it over HSL?
OKLCH is a colour notation supported in all modern browsers whose lightness actually matches how bright a colour looks. In HSL, yellow at 50% lightness glows while blue at 50% looks dark — the number lies. In OKLCH, two colours with the same L are genuinely equally light, which makes it far better for building palettes where steps should feel even. New CSS colour systems are largely written in it.
How is the contrast ratio calculated?
With WCAG 2's exact formula: each channel is linearised (values below the 0.04045 knee divide by 12.92, the rest take the 2.4 exponent), combined into relative luminance with the 0.2126/0.7152/0.0722 weights, and the two luminances give (L1+0.05)/(L2+0.05). The result matches what accessibility audit tools report — it has to, since this is a number people quote in audits.
What do the AA and AAA verdicts mean?
WCAG defines minimum contrast for text: AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold); AAA raises those to 7:1 and 4.5:1. AA is the level most regulations reference. A famous edge: pure red on white is 4.0:1 — enough for large headlines, a fail for body copy.
Does the checker account for transparency?
The ratio is computed on the opaque colours. If your text colour has alpha, its real contrast depends on what shows through, which varies per pixel — flatten the colour against its actual background first (the rgb() output with alpha applied over the background) and check that. A semi-transparent value is shown in the formats, but contrast uses the base colour.
How is the lightness scale built?
The hue and saturation of your colour are kept, and lightness is stepped evenly from 95% down to 5% in HSL. That gives the classic tint-to-shade ramp used for hover states, borders and dark-mode variants of a brand colour. Click any step to copy its hex.
Related tools
- Diagram & Flowchart MakerDraw flowcharts and diagrams, connect the boxes with arrows that route themselves, and let it arrange the whole thing. Exports SVG. Nothing is uploaded.
- Password GeneratorGenerate strong random passwords using your browser's cryptographic RNG, with a live strength estimate.
- HTML Entity EncoderEncode text for HTML or decode entities back — the five markup breakers, named Latin-1 and symbol sets, numeric references up to emoji. Decodes exactly once.