OKLCH Color Picker

Pick colors in OKLCH with lightness, chroma and hue sliders, check the sRGB gamut and get HEX and rgb() fallbacks. Runs entirely in your browser. Nothing is sent to any server.

Color

Start from any color

Lightness L (%)

Chroma C

Hue H (degrees)

Result

CSS with fallback

color: #2563eb;
color: oklch(54.6% 0.215 262.9);

What is OKLCH?

OKLCH is a way to describe colors by lightness (L), chroma (C, how colorful it is) and hue (H, the angle on the color wheel), built on the OKLab color space so that equal changes look equally different to the eye. Unlike HSL, two colors with the same L really look equally light, which makes palettes, hover states and accessible contrast much easier to reason about. CSS supports it as oklch(), and it can describe colors beyond the sRGB range of most screens. This picker lets you set L, C and H with sliders, warns when a color falls outside sRGB, and gives you HEX and rgb() fallbacks.

Examples

Using OKLCH colors in CSS and code:

CSS

/* older browsers keep the HEX line */
.button {
  background: #2563eb;
  background: oklch(54.6% 0.215 262.9);
}

CSS

/* same lightness, different hue: an even, predictable palette */
--blue:   oklch(65% 0.15 250);
--green:  oklch(65% 0.15 150);
--orange: oklch(65% 0.15 60);

CSS

@supports (color: oklch(0% 0 0)) {
  :root { --accent: oklch(70% 0.25 150); }
}

JavaScript

// OKLCH to OKLab, the first step of converting to sRGB
const a = c * Math.cos((h * Math.PI) / 180);
const b = c * Math.sin((h * Math.PI) / 180);

Use Cases

Building consistent palettes

Keep lightness and chroma fixed and change only the hue to get a set of colors that look equally bright, something HSL can't do reliably.

Hover and pressed states

Lower L by a few points for a darker state without the hue shifting, which often happens when darkening in HSL.

Wide-gamut colors

Design vivid colors for P3 displays in oklch() and ship a safe HEX fallback for screens and browsers that can't show them.

Migrating a codebase to modern CSS

Convert existing HEX values to oklch() one by one and keep the original as the fallback line.

Frequently Asked Questions

Which browsers support oklch() in CSS?

Chrome and Edge 111, Firefox 113 and Safari 15.4 or newer. Older browsers ignore the declaration, which is why the tool writes the HEX line first: a browser that can't read oklch() keeps the HEX color.

What does out of gamut mean?

Some combinations of lightness, chroma and hue describe colors that sRGB, the color range of most screens, can't display. The tool then lowers the chroma at the same lightness and hue until the color fits, which keeps it looking like the same color, and shows that version in the preview and the HEX value.

Why is the chroma limited to 0.4?

Real colors on today's screens stay well under 0.4: the most saturated sRGB colors reach about 0.32, and P3 displays a little more. Higher values are valid CSS but always out of gamut.

How is OKLCH different from HSL?

HSL lightness isn't perceptual: pure yellow and pure blue are both 50% lightness but look very different. OKLCH lightness matches how light a color looks, so contrast and palettes behave predictably.

Is my data sent to a server?

No. Every conversion runs in your browser with plain JavaScript. Nothing is transmitted or stored.