What Is OKLCH, and Why It Matters

If you have wondered what is OKLCH and why everyone in modern design is switching to it, this guide is for you. OKLCH is a way to describe color using three values that match how your eyes actually see, which makes building palettes far more predictable than the old hex and HSL approach.

This post is for designers and front-end developers who want color scales with even, reliable steps. I will explain the L, C, and H parts in plain words, show why OKLCH beats HSL, cover gamut and why some colors fall outside your screen, look at how Tailwind v4 ships OKLCH by default, and walk through a worked example that builds a real scale. No heavy math required.

What you'll learn

• What the L, C, and H in OKLCH each control
• Why OKLCH lightness matches what your eye sees
• How OKLCH beats HSL for building scales
• What gamut means and why colors can fall out of range
• How Tailwind v4 uses OKLCH out of the box
• A step-by-step example building an even color scale

What is OKLCH, in one sentence

OKLCH is a color model that describes any color with three numbers: Lightness, Chroma, and Hue. The key idea is that it is perceptual, which means the numbers line up with how bright and how colorful a color looks to a human, not just how a screen mixes light.

That sounds small, but it changes everything about building palettes. When the math matches your eye, even steps in the numbers produce even steps in what you see. Older models break that promise, as we will see.

The three parts: L, C, and H

Each letter controls one clear thing. Once you know what each does, reading and tweaking an OKLCH color becomes simple.

Lightness runs from 0 percent, which is black, to 100 percent, which is white. It answers how bright the color is. Because OKLCH is perceptual, a lightness of 50 percent looks like a true middle gray to your eye.

Chroma is how colorful or saturated the color is. A chroma of zero is gray, and higher numbers push toward vivid. Unlike older models, chroma here does not change how light the color feels.

Hue is the color family, measured in degrees from 0 to 360. Red sits near 30 degrees, green near 145, and blue near 265. Spin the hue and you walk around the color wheel while keeping the same lightness and chroma.

A full OKLCH color looks like oklch(55% 0.18 275). That reads as 55 percent lightness, 0.18 chroma, and a hue of 275 degrees, which lands on a rich indigo close to our brand color #5b5bd6.

Why OKLCH beats HSL

HSL was the friendly color model for years, and it also uses Hue, Saturation, and Lightness. So why move on? Because HSL lightness is a lie. The L in HSL is a math shortcut, not a perceptual value, so equal numbers do not look equally bright.

The classic example is yellow versus blue. In HSL, a yellow and a blue can both report 50 percent lightness, yet the yellow looks far brighter to your eye. That means a scale built on HSL steps will jump unevenly, with some shades crowding together and others leaving gaps.

OKLCH fixes this. Because its lightness is perceptual, stepping L from 90 percent down to 20 percent gives you shades that feel evenly spaced. That is exactly what you want when building a 50 to 950 scale where every step should do a clear job.

For a side-by-side of every color format, see our hex, RGB, HSL, and OKLCH comparison. The short version is that OKLCH is the first model where the numbers and your eyes finally agree.

Gamut: why some colors fall out of range

A gamut is the full set of colors a screen or color space can actually show. OKLCH can describe colors that are more vivid than a standard sRGB monitor can display, which is both a feature and a thing to watch.

When you push chroma very high at certain lightness levels, you can ask for a color that falls outside the sRGB gamut. The browser then clips it back to the nearest color it can show. This is why a chroma value that looks great at one lightness may flatten at another.

Modern displays support wider gamuts like Display P3, and OKLCH is ready for them. That means your colors can stay rich on capable screens while still falling back gracefully on older ones. The OKLCH color picker shows the gamut boundary live as you drag, which makes it easy to keep chroma in a safe range.

How Tailwind v4 uses OKLCH

OKLCH is not a niche idea anymore. Tailwind CSS v4 ships its entire default color palette in OKLCH rather than hex. That is a strong signal that the model has become the practical standard for design systems.

The reason fits everything above. Tailwind needs its 50 to 950 scales to step evenly so that, say, a 500 always feels like a true mid shade across every hue. OKLCH delivers that consistency where hex and HSL could not. It also unlocks the wider gamut for screens that support it.

If you write Tailwind, you can define colors directly in OKLCH in your theme and get the even steps for free. The Tailwind colors docs show the v4 defaults, and our Tailwind color scale guide walks through generating your own.

A worked example: build an indigo scale in OKLCH

Let us turn theory into a real scale. We will start from our brand indigo and produce a clean 50 to 950 ladder using OKLCH. The whole trick is to hold hue and chroma roughly steady while stepping lightness evenly.

1. Start with the base color. Our indigo #5b5bd6 is about oklch(54% 0.19 277) in OKLCH.
2. Pick the lightness ends. Set 50 near 97 percent lightness for a pale tint, and 950 near 20 percent for a deep near-black.
3. Step lightness evenly between those ends across the 11 stops, keeping hue at 277.
4. Ease chroma down at the very light and very dark ends, since extreme shades cannot hold high chroma inside sRGB.
5. Check the result against the gamut so no shade clips, then read off the hex for each stop.

Notice how each step feels like a real, distinct shade with no awkward jumps. That evenness is the OKLCH payoff. Doing this by hand in HSL would leave you fiddling for hours, and the steps would still not look right.

Want to skip the math? Open the Zepixo Colors workspace to generate full OKLCH scales from any brand color and watch the gamut stay safe automatically.

Reading and writing OKLCH in CSS

OKLCH is a native CSS color function, so you can use it in any modern browser today. The syntax is oklch(L C H), with optional alpha after a slash. No preprocessor or library is needed.

Here is a small token set written directly in OKLCH. Because the values are perceptual, a teammate can read them and predict the color without opening a swatch.

If you support older browsers, you can pair each OKLCH value with a hex fallback, or let your build tool emit one. The MDN oklch reference covers the syntax and support in detail.

When OKLCH really pays off

OKLCH shines whenever you need many related colors that behave predictably. Generating tints and shades, building dark mode, and keeping brand hues consistent across a system all get easier. It also helps when you adjust one value and want the others to stay put.

For one-off colors it matters less, since any format can name a single hex. The benefit grows with the size of your system. If you maintain a full palette with roles and scales, OKLCH turns guesswork into a dependable process. See the colors overview for how Zepixo applies it across every role.

Frequently asked questions

What is OKLCH in simple terms?

OKLCH is a color model that describes a color with three perceptual values: Lightness, Chroma, and Hue. Because those numbers match how your eyes see brightness and color, even steps in the values produce even steps to the eye. That makes it ideal for building balanced color scales.

Is OKLCH better than HSL?

Yes, for building palettes. HSL lightness is not perceptual, so equal L values can look very different in brightness. OKLCH lightness matches your eye, so scales step evenly and hues stay stable across shades.

Does OKLCH work in browsers?

Yes, OKLCH is a native CSS color function supported in all current major browsers. You write it as oklch(L C H) with an optional alpha. For older browsers you can add a hex fallback.

What is gamut in OKLCH?

Gamut is the range of colors a screen or color space can display. OKLCH can describe very vivid colors that fall outside standard sRGB, which the browser then clips. Keeping chroma in a safe range avoids unexpected clipping.

Why did Tailwind switch to OKLCH?

Tailwind v4 ships its default palette in OKLCH so every 50 to 950 scale steps evenly and consistently across hues. OKLCH also unlocks wider gamuts on capable screens. It gives the framework predictable, perceptual color out of the box.

How do I convert a hex color to OKLCH?

Use a converter like the OKLCH color picker, or a tool like the Zepixo Colors workspace that reads any hex and shows its OKLCH values. From there you can step lightness to build a full scale. The model handles the perceptual math for you.

Learn the L, C, and H once and color stops fighting you. Give OKLCH a try on your next palette and the even scales will sell themselves.