Is OKLCH supported in browsers?

Yes. OKLCH is part of the CSS Color 4 specification and works in every major browser — Chrome, Safari, Firefox and Edge.

How do I convert a HEX code to OKLCH?

Pick a color or paste a HEX code into the picker and Color Picker Lab shows the exact oklch() value alongside RGB and HSL. Click it to copy.

Why is OKLCH better than HSL for shade scales?

OKLCH is perceptually uniform, so equal steps in its lightness value look equally spaced to the eye. HSL lightness is uneven across hues, which makes HSL shade scales look inconsistent.

OKLCH Color Picker

Pick any color and copy its oklch() value for modern CSS — plus perceptually even shade ramps and instant HEX, RGB, HSL and HSV. OKLCH is supported in every major browser.

#3B82F6 DodgerBlue

From image

Tints

Shades

Tones

Perceptual 50→950 scale, computed in OKLCH. Copy it as CSS custom properties using relative-color syntax — each stop keeps the base hue and chroma.

--color-50: oklch(from #3B82F6 0.97 c h);
--color-100: oklch(from #3B82F6 0.94 c h);
--color-200: oklch(from #3B82F6 0.87 c h);
--color-300: oklch(from #3B82F6 0.78 c h);
--color-400: oklch(from #3B82F6 0.68 c h);
--color-500: oklch(from #3B82F6 0.58 c h);
--color-600: oklch(from #3B82F6 0.5 c h);
--color-700: oklch(from #3B82F6 0.42 c h);
--color-800: oklch(from #3B82F6 0.34 c h);
--color-900: oklch(from #3B82F6 0.26 c h);
--color-950: oklch(from #3B82F6 0.18 c h);

No saved colors yet. Pick a color and tap Save to keep it here.

Recent

Colors you pick will show up here.

HEX: #3B82F6
HEX8: #3B82F6FF
HEX8 (Android): #FF3B82F6
RGB: rgb(59, 130, 246)
RGB (%): 23%, 51%, 96%
HSL: hsl(217, 91%, 60%)
HSV / HSB: hsv(217, 76%, 96%)
CMYK: cmyk(76%, 47%, 0%, 4%)
OKLCH: oklch(0.6231 0.188 259.81)
OKLCH (%): oklch(62.31% 0.188 259.81)
Decimal: 3900150

A 5.71:1 vs black

A 3.68:1 vs white

AA normal ≥ 4.5 Pass
AA large ≥ 3 Pass
AAA normal ≥ 7 Fail
AAA large ≥ 4.5 Pass

Recommended text color: black

CSS contrast-color() contrast-color(#3B82F6) → black

APCA Lc experimental 69.4 Lc · large / secondary text (white text)

WCAG 2.1 AA/AAA is the compliance floor; APCA is an optional readability metric.

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Square

Monochromatic

Roughly 1 in 12 men and 1 in 200 women have some color-vision deficiency. Here is how this color looks under the eight common types.

Dichromacy

Protanopia

#5A5ADA SlateBlue

Deuteranopia

#5650D3 SlateBlue

Tritanopia

#3FC4BF MediumTurquoise

Anomalous trichromacy

Protanomaly

#5A5ADA SlateBlue

Deuteranomaly

#5650D3 SlateBlue

Tritanomaly

#3FC4BF MediumTurquoise

Monochromacy

Achromatopsia

#858585 Gray

Achromatomaly

#858585 Gray

Make colorblind-safe

Adjusted for deuteranomaly — the most common deficiency — so it stays distinguishable.

#3BA1FF DodgerBlue

What is OKLCH?

OKLCH stands for Oklab Lightness, Chroma and Hue. It describes a color by how light it is, how saturated it is, and its hue angle — but in the perceptually uniform Oklab space, so equal numeric changes produce equal visual changes. A value looks like oklch(0.62 0.19 260).

Why pick colors in OKLCH?

Because lightness is even, OKLCH is the best format for building shade ramps and accessible palettes: a 10-step scale actually looks evenly spaced. It is the color space modern design systems (Tailwind v4, Radix) build on. Pick a color above and copy its oklch() value, or read off HEX, RGB and HSL for the same color.

Frequently asked questions

Is OKLCH supported in browsers?: Yes. OKLCH is part of the CSS Color 4 specification and works in every major browser — Chrome, Safari, Firefox and Edge.
How do I convert a HEX code to OKLCH?: Pick a color or paste a HEX code into the picker and Color Picker Lab shows the exact oklch() value alongside RGB and HSL. Click it to copy.
Why is OKLCH better than HSL for shade scales?: OKLCH is perceptually uniform, so equal steps in its lightness value look equally spaced to the eye. HSL lightness is uneven across hues, which makes HSL shade scales look inconsistent.