Color Converter
What it is: Convert colors between HEX (#ff0000), RGB, HSL and more, and preview them.
When to use: When a design gives you a color in one format but your code needs another.
Color Converter
Edit any format and all others update in real time.
WCAG Contrast Checker
Check foreground/background contrast ratio against accessibility standards.
Contrast Ratio
—
Preview
Everything runs locally in your browser — nothing is uploaded.
FAQ
What is OKLCH and why is it better than HSL?
OKLCH is a perceptually uniform color space where L is perceived lightness (0–1), C is chroma (saturation), and H is hue angle (0–360°). Unlike HSL, colors at the same L value in OKLCH have consistent perceived brightness across hues, making it ideal for building accessible palettes and design systems.
How is WCAG contrast ratio calculated?
WCAG contrast = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker. Relative luminance linearizes each sRGB channel then computes L = 0.2126R + 0.7152G + 0.0722B. AA requires ≥ 4.5:1 for normal text and ≥ 3:1 for large text; AAA requires ≥ 7:1 and ≥ 4.5:1 respectively.