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.

Pick

Click the swatch to pick

HEX

RGB

HSL

OKLCH

OKLAB

Tip: paste a CSS named color (e.g. rebeccapurple) into HEX.

WCAG contrast

Foreground / text · follows swatch

Background

—

Sample text

Palette — OKLCH lightness ramp

Why OKLCH?

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.

Frequently asked

What is OKLCH?

A perceptual color space — Lightness, Chroma, Hue — where equal numeric steps look like equal visual steps, so lightening or shifting hue stays predictable (unlike HSL). It is well supported in modern CSS.

Is there any difference between HEX and RGB?

No — they describe the same sRGB color, just written differently (#ff8800 vs rgb(255,136,0)). Edit either field above and the rest update live.

What does the contrast checker tell me?

It computes the WCAG contrast ratio between two colors and whether it passes AA or AAA for normal and large text — handy for keeping text readable and accessible.