Color Converter & Contrast Checker
Convert a colour between HEX, RGB, HSL and OKLCH, and check the pair against the WCAG AA and AAA contrast thresholds as you go. Paste any CSS colour — a hex, a function, or a name — and everything is worked out in your browser.
#3366CCrgb(51, 102, 204)hsl(220, 60%, 50%)oklch(53.2% 0.1679 262.29)#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)oklch(100% 0 0)white#1E4FB3 at 7.45:1 The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
12px Smaller than anything AA is written for
16px Normal text — needs 4.5:1 for AA, 7:1 for AAA
19px Large text — needs 3:1 for AA, 4.5:1 for AAA
14pt bold Also counts as large text — needs 3:1 for AA
28px bold A heading, comfortably large text
Frequently asked questions
How do I convert a HEX colour to RGB or HSL?
Paste the hex value into either colour field and the RGB, HSL and OKLCH equivalents appear beside it, each with a copy button. It works from any direction: paste rgb(), hsl(), oklch() or a CSS colour name and the other formats follow.
What is OKLCH and why would I use it?
OKLCH describes a colour as perceptual lightness, chroma and hue. Unlike HSL, equal steps in it look like equal steps to the eye, so lightening or darkening a colour keeps its character instead of washing it out. It is supported in every current browser and is the reason the shades below step evenly.
What contrast ratio do I need to pass WCAG?
WCAG 2 asks for at least 4.5:1 for normal body text and 3:1 for large text — 18pt, or 14pt bold — to reach level AA. Level AAA raises those to 7:1 and 4.5:1. Icons, borders and other non-text parts of an interface need 3:1 against what is next to them.
My colour fails AA — how do I fix it without losing the brand?
Use the suggestion under the ratio. It moves only the perceptual lightness of your colour and leaves hue and chroma alone, so the result is the nearest shade of the same colour that passes rather than a different colour that happens to. The shades view shows the whole ramp with the ratio each shade reaches.
Does it handle transparency?
Yes. Alpha is read from #RRGGBBAA, rgba(), hsla() and the oklch() slash syntax, and semi-transparent text is composited over the background before the ratio is worked out — which is what the eye actually sees, and what a checker that ignores alpha gets wrong.
Are my colours sent anywhere?
No. Every conversion and every contrast calculation runs in your browser. Nothing about the palette you are working on is uploaded, stored or logged.