Color Converter & Contrast Checker
Convert between hex, RGB, HSL, HSV, and OKLCH. Test foreground/background pairs against WCAG 2.1 AA and AAA contrast thresholds.
Aa
The quick brown fox jumps over the lazy dog
12 14 18 24 36 — sample body text
About Color Spaces
This converter parses any CSS-recognized color (named, hex, rgb, hsl, oklch, etc.) and produces equivalents in every common format. Conversion happens in your browser using the Canvas color parser plus standard sRGB↔Oklab/OKLCH formulas.
Format Reference
- Hex —
#rrggbbor#rgb. Most common in CSS and design tools. - RGB —
rgb(255 0 0)or with alphargb(255 0 0 / 0.5). Modern syntax uses spaces, not commas. - HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Intuitive for "make this redder/brighter" but not perceptually uniform.
- HSV / HSB — Like HSL but with "value" instead of lightness. Used by Photoshop, Figma color pickers.
- OKLCH — Perceptually uniform: L = lightness (0–1), C = chroma, H = hue (0–360°). Use this for accessible color scales and palettes.
WCAG 2.1 Contrast Thresholds
- AA normal text: 4.5:1 — minimum legal/compliance requirement in most jurisdictions
- AA large text (≥18pt or ≥14pt bold): 3:1
- AAA normal text: 7:1 — enhanced level, recommended for primary content
- AAA large text: 4.5:1
- UI components & graphics: 3:1 against adjacent colors
Frequently Asked Questions
WCAG 2.1 requires 4.5:1 for normal body text (AA) and 7:1 for AAA. Large text (18 pt or 14 pt bold) needs 3:1 for AA and 4.5:1 for AAA. UI components and graphical objects need 3:1 against adjacent colors.
OKLCH is a perceptually uniform color space — equal numeric differences correspond to equal perceived differences, unlike HSL or HSV. It is part of CSS Color Module Level 4 and is supported in all modern browsers. Use it for color scales and palettes where consistent contrast matters.
HSL's "lightness" is not perceptual. A yellow at 50% lightness looks much brighter than a blue at 50% lightness. OKLCH and CIELAB fix this — that's why design systems are moving to them.
Yes. Any CSS color string works:
#f00, rgb(255 0 0), rgba(255,0,0,0.5), hsl(0 100% 50%), oklch(70% 0.2 30), or a named color like crimson. The browser's own parser is used, so anything CSS accepts works here.No. All conversion and contrast calculation runs in your browser using the Canvas color parser and standard formulas.