Color Converter
Convert between HEX, RGB, HSL, OKLCH, OKLAB, and named colors — edit any field, the rest update live. Plus a WCAG contrast checker and palette generator.
Click the swatch to pick
Tip: paste a CSS named color (e.g. rebeccapurple) into HEX.
A perceptual color space — equal numeric steps look like equal visual steps.
The same color can be written many ways. HEX and RGB address the screen's red/green/blue channels directly; HSL is friendlier for humans (hue, saturation, lightness) but its lightness isn't perceptually even. OKLCH and OKLAB are modern perceptual spaces — equal numeric steps look like equal visual steps, which makes them ideal for generating palettes and adjusting lightness without hue shifts.
WCAG contrast measures the luminance ratio between text and its background. AA requires 4.5:1 for normal text (3:1 for large), AAA requires 7:1 (4.5:1 for large). All conversions and the contrast math run in your browser via culori — the same color engine Tailwind CSS v4 uses internally.