Color converter & contrast
Paste any CSS color and get hex, rgb, hsl, and oklch. Then check WCAG 2.1 contrast between a foreground and background.
Color input
Accepts hex, rgb(), hsl(), oklch(), and common named colors.
Could not parse that color. Check the syntax.
Swatch
All formats
| Format | Value | |
|---|---|---|
WCAG contrast
Set foreground and background colors. WCAG 2.1 ratios: AA normal 4.5:1, AA large 3:1, AAA normal 7:1, AAA large 4.5:1.
Fix the foreground or background color syntax.
Normal body text at 16px.
Large bold text at 18px+.
Contrast ratio:
OKLCH conversions use the published OKLab math from CSS Color Level 4. Everything runs in your browser.
About this tool
You pick colors in one format and need them in another — or you need to know if light gray text on a white card passes accessibility checks. This tool converts between common CSS color spaces and runs the WCAG 2.1 contrast formula on any foreground/background pair.
OKLCH is perceptually uniform: equal steps in lightness look equally different to the eye. Handy for palettes; supported in modern browsers.
Read more
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →