Color Converter & Contrast Checker
Convert a color between every CSS notation, then check it against a background for WCAG contrast — and get an OKLCH ramp you can ship as design tokens.
Contrast check
Lightness ramp — even steps in OKLCH, where HSL would look lumpy
Harmonies
Runs entirely in your browser. Nothing you paste here is uploaded, logged, or sent to analytics.
The notations, and when each is worth using
| Notation | Example | Good for |
|---|---|---|
| HEX | #3b82f6 | Compact and universally supported. Says nothing about how the color will look when you change it. |
| RGB | rgb(59 130 246) | Matching what an image editor or a canvas API gives you. |
| HSL | hsl(217 91% 60%) | Quick hue and saturation tweaks by hand. Its lightness axis is not perceptually even. |
| HWB | hwb(217 23% 4%) | Thinking in "how much white and black is mixed in" — closer to how paint works. |
| OKLCH | oklch(62.3% 0.188 259) | Design systems. Equal lightness steps look equal, so a generated ramp needs no hand-correction. |
Why OKLCH is not just another notation
In HSL, hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue)
claim the same 50% lightness. They are nowhere near equally bright — the yellow is
blinding and the blue is nearly black. HSL's "lightness" is a geometric artifact of the RGB
cube, not a measure of how light a color looks.
OKLCH's lightness is perceptual. Two colors at 62% read as equally light
regardless of hue, which is why the ramp above produces a usable set of design tokens
directly, and why a hue rotation keeps the companion colors at the same visual weight.
OKLCH also addresses colors sRGB cannot represent. Where a conversion falls outside the sRGB gamut, the tool says so rather than silently handing you a clamped approximation.
Reading the contrast result
The ratio comes from WCAG 2.2's relative-luminance formula and runs from 1:1 (identical colors) to 21:1 (black on white). The thresholds:
- 4.5:1 — AA for body text. This is the one that matters for almost all copy.
- 3:1 — AA for large text, meaning 18pt/24px, or 14pt/18.66px bold and above.
- 7:1 — AAA for body text. Worth targeting for long-form reading.
- 3:1 — non-text contrast (§1.4.11) for icons, input borders, and focus indicators. Frequently missed, and the most common real-world failure in an otherwise accessible design.
Contrast ratio is symmetric: swapping foreground and background gives the same number. What it does not capture is that thin, light-weight type at a passing ratio can still be hard to read — the threshold is a floor, not a target.
Alpha and hex
An 8-digit hex like #ff000080 is #RRGGBBAA: the last pair is
alpha, where 80 is 50% and ff is fully opaque. The 4-digit form
#f008 is its shorthand. Both are supported everywhere except Internet
Explorer, which is no longer a consideration.
Contrast against a semi-transparent foreground is not meaningful — what the user sees depends on the composite. Flatten the color against its actual background first, then check.