What's OKLCH and why include it?

OKLCH is a perceptually uniform color space that browsers now support natively. Equal changes in lightness or hue look equal to the human eye — unlike HSL, where 50% lightness yellow and 50% lightness blue look very different. It's becoming the recommended space for design systems and the default in libraries like Tailwind v4.

Are HEX with alpha (#rrggbbaa) supported?

Yes. Paste an 8-character HEX and the alpha is read; alphas are shown back on the HEX (8) row. Three- and four-character shorthand (#rgb, #rgba) also work — they're expanded internally.

Why does my color look slightly different after a round-trip?

Conversions between color spaces are precise but display is limited to your monitor's gamut. HSL → RGB is exact; OKLCH → sRGB can clip if you've picked a color outside the sRGB gamut. The numbers shown are the unclamped ideal values; what you see on screen is what your display can render.

Is anything sent to a server?

No. All parsing, conversion, and palette math happens in your browser. There's no API call.

Can I copy a single format?

Yes — each format row has its own copy button. You can also click any swatch in the palettes to make that color your new source.

Color Converter

Convert colors between HEX, RGB, HSL, HSV, and OKLCH. Generate tint/shade scales and complementary, analogous, triadic, and tetradic palettes. Free, in your browser.

Pick or paste a color

HEX#6366f1

HEX (8)#6366f1

RGBrgb(99, 102, 241)

HSLhsl(239, 84%, 67%)

HSVhsv(239, 59%, 95%)

OKLCHoklch(58.5% 0.204 277.1)

Tint & shade

Complementary

Analogous

Triadic

Tetradic

Everything runs in your browser.

Colors are parsed and converted client-side. Nothing is sent to a server.

How to use it

1Pick a color with the native color picker, or paste any of: HEX (#6366f1, #6366f1ff), RGB (rgb(99 102 241) or rgb(99,102,241)), HSL, or three bare numbers.
2Every format updates simultaneously — HEX, HEX with alpha, RGB, HSL, HSV, and OKLCH. Click the copy icon on each row.
3Below, a 9-stop tint/shade scale and four harmony palettes (complementary, analogous, triadic, tetradic) are derived from your color. Click any swatch to make it the new source.

Common use cases

Pull a HEX value out of a Figma file and instantly get the OKLCH equivalent for a modern Tailwind / CSS theme.
Find triadic or analogous companions for a brand color without leaving the browser.
Build a tint/shade scale for a design system — copy each step's HEX with one click.
Convert legacy HSL values to OKLCH so the lightness math behaves the way designers expect.
Verify alpha-channel output (HEX 8) for designs that mix translucent fills with opaque backgrounds.

Frequently asked questions

What's OKLCH and why include it?: OKLCH is a perceptually uniform color space that browsers now support natively. Equal changes in lightness or hue look equal to the human eye — unlike HSL, where 50% lightness yellow and 50% lightness blue look very different. It's becoming the recommended space for design systems and the default in libraries like Tailwind v4.
Are HEX with alpha (#rrggbbaa) supported?: Yes. Paste an 8-character HEX and the alpha is read; alphas are shown back on the HEX (8) row. Three- and four-character shorthand (#rgb, #rgba) also work — they're expanded internally.
Why does my color look slightly different after a round-trip?: Conversions between color spaces are precise but display is limited to your monitor's gamut. HSL → RGB is exact; OKLCH → sRGB can clip if you've picked a color outside the sRGB gamut. The numbers shown are the unclamped ideal values; what you see on screen is what your display can render.
Is anything sent to a server?: No. All parsing, conversion, and palette math happens in your browser. There's no API call.
Can I copy a single format?: Yes — each format row has its own copy button. You can also click any swatch in the palettes to make that color your new source.