Color Converter & Contrast Checker
Paste any CSS colour to see it in every other format, check its WCAG contrast against a background, and pull tints, shades and harmonies from it
Pick a colour
#3b82f6
Formats
| Format | Value | |
|---|---|---|
| HEX | ||
| RGB | ||
| HSL | ||
| HSV / HSB | hsv(217, 76%, 96%) | |
| CMYK ≈ | cmyk(76%, 47%, 0%, 4%) | |
| OKLCH | oklch(0.623 0.188 259.815) | |
| CSS name | ≈ royalblue |
HEX, RGB and HSL are editable — type a value and everything else follows. CMYK is the naive formula with no print profile, so treat it as approximate.
Contrast
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
3.67:1
Contrast ratio
Fails AA
Normal text, 4.5:1 minimum
| Check | Minimum | Result |
|---|---|---|
| AA — normal text | 4.5:1 | Fail |
| AA — large text (18pt / 14pt bold) | 3:1 | Pass |
| AAA — normal text | 7:1 | Fail |
| AAA — large text | 4.5:1 | Fail |
| UI components and graphics | 3:1 | Pass |
The ratio is truncated, not rounded — 4.4996:1 shows as 4.49 and fails AA, the same verdict an audit will give you.
Advanced options
Tints (towards white)
Shades (towards black)
Harmonies
Every format, both ways
HEX, RGB, HSL, HSV, CMYK, OKLCH and CSS names — edit any row and the rest follow
WCAG AA and AAA checks
The exact ratio plus pass or fail for normal text, large text and UI components
Tints, shades and harmonies
Five steps towards white and black, plus complementary, analogous and triadic hues
Frequently asked questions
Why does the ratio show 4.49 when other tools say 4.5?
The ratio here is truncated, not rounded. A pair measuring 4.4996:1 fails WCAG AA for normal text, and rounding it to "4.50" would show a pass for a combination an auditor will fail you on. Truncation means the number you see and the verdict next to it always agree.
What does OKLCH give me that HSL does not?
HSL lightness is not perceptual: hsl(60, 100%, 50%) (yellow) looks far brighter than hsl(240, 100%, 50%) (blue) despite both claiming 50%. OKLCH lightness tracks what the eye actually sees, so rotating hue at a fixed L keeps the perceived brightness steady — which is why it is the practical choice for building a palette. Colours outside the sRGB gamut are clipped per channel when converting back.
Is the CMYK value safe to send to a printer?
No — treat it as a rough starting point. It is the naive formula every web tool uses, which ignores the ICC profile of the press, the ink and the paper. A real conversion is done by your print shop or by design software with the target profile loaded, and the numbers will differ.
How is a semi-transparent colour handled in the contrast check?
It is composited over the background first, exactly as a browser would paint it: each channel becomes alpha x foreground + (1 - alpha) x background. That composited colour is what the ratio is measured against, so lowering alpha correctly lowers your contrast. Background alpha is ignored, since there is nothing behind the background to blend with.