Color Converter
Convert colors between hex, rgb(), hsl(), oklch(), and lab() live as you type, and check WCAG contrast ratios with pass/fail badges for AA, AAA, and UI components.
Nothing leaves the browser. Every conversion and contrast calculation runs locally — there is no network request, no logging, and nothing is saved.
WCAG contrast checker
7.43 : 1
- AA — Normal text
- Pass · 4.5:1
- AA — Large text
- Pass · 3:1
- AAA — Normal text
- Pass · 7:1
- AAA — Large text
- Pass · 4.5:1
- UI components
- Pass · 3:1
The quick brown fox jumps over the lazy dog.
Large preview text
Type a color into any field — hex, rgb(), hsl(), oklch(), or lab() — and the other four update to match. Nothing here is a lookup table: every conversion goes through the real published math (sRGB gamma, CIE XYZ, and the Björn Ottosson OKLab matrices from the CSS Color Module 4 spec), and the Lab/OKLCH conversions were cross-checked against real values rendered by a browser's own CSS engine during development, not just re-derived from the same formulas twice.
OKLCH and Lab are both perceptually-uniform color spaces, meaning equal numeric steps look like roughly equal visual steps — unlike HSL, where 10% more "lightness" can look very different depending on the hue. That makes them a better fit for generating consistent color scales or shifting a color's lightness without an unexpected hue shift. OKLCH is the newer of the two and matches how CSS itself models color going forward.
The contrast checker below implements the actual WCAG 2.x relative-luminance and contrast-ratio formulas — the same math a real accessibility audit tool uses — so the pass/fail badges reflect real compliance thresholds, not an approximation.
How to use this converter
- 1Type or paste a color into any of the five fields, or click the swatch to use your browser's native color picker.
- 2The other formats update live. Only the field you're actively typing in keeps your exact keystrokes — the rest always show the fully-formatted value.
- 3Adjust the alpha slider to add transparency; it's reflected in every format that supports it (hex8, rgba, hsla, and the / alpha syntax for oklch/lab).
- 4In the contrast checker, set a foreground (text) and background color to see the exact contrast ratio and which WCAG levels it passes.
WCAG 2.x contrast thresholds
| Level | Requirement | Applies to |
|---|---|---|
| AA | 4.5 : 1 | Normal text |
| AA | 3 : 1 | Large text (18pt+, or 14pt+ bold) |
| AAA | 7 : 1 | Normal text |
| AAA | 4.5 : 1 | Large text |
| — | 3 : 1 | UI components and graphical objects (WCAG 2.1 SC 1.4.11) |
Frequently asked questions
Why do I need both OKLCH and Lab — aren't they the same idea?+
They're both perceptually-uniform Lightness-Chroma-Hue spaces, but built differently. Lab (from 1976) is the older CIE standard and still dominant in print/color-management workflows; OKLCH (2020) was designed specifically to fix Lab's known hue-uniformity problems — in Lab, shifting lightness on a saturated blue can visibly shift its hue too, which OKLCH mostly corrects. For new CSS work, prefer OKLCH; Lab is here mainly for compatibility with existing color-managed workflows.
Why does a color sometimes look clipped or different after converting from OKLCH or Lab?+
Both OKLCH and Lab can express colors outside what a standard sRGB screen can display (a wider gamut). When that happens, this tool clips each channel back into the displayable 0-255 range, which can shift the color slightly. The tool doesn't currently flag which specific conversions were out of gamut — treat a Lab/OKLCH value with very high chroma/saturation as a candidate if the round-tripped color looks off.
What is relative luminance, and why isn't it the same as "brightness"?+
Relative luminance is a WCAG-defined value between 0 and 1 that weights red, green, and blue by how much each contributes to perceived brightness (green counts far more than blue) after undoing sRGB's gamma curve. It's the basis of the contrast formula precisely because naive "average the RGB values" brightness doesn't match how contrast is actually perceived.
My colors pass AA but not AAA — is that a problem?+
Not necessarily. AA is the baseline most accessibility audits and laws (like ADA/Section 508 references) require; AAA is a stricter, optional target that's genuinely hard to hit with brand colors and mid-tones. Prioritize AA for body text as a hard minimum, and treat AAA as a stretch goal, especially for small or low-vision-critical text.
Does contrast ratio depend on which color is text and which is background?+
No — the formula is symmetric. Swapping the foreground and background gives the exact same ratio, since it only depends on the two luminance values, not which one is "on top."