OKLCH Gradients
A gradient between two bright colors often turns dull or gray in the middle. The colors aren't the problem, the way the browser mixes them is. CSS lets you choose how colors are mixed, and OKLCH is the way that keeps a gradient vivid from one end to the other.
Why gradients turn gray
By default, CSS mixes hex, rgb() and hsl() colors in sRGB: the red, green and blue values your screen uses, each one blended separately. Halfway between blue (#0000FF) and yellow (#FFFF00), all three are at half, and that's gray.
Blending in OKLCH
Add in oklch after the direction, and the browser mixes the colors in OKLCH instead. OKLCH describes a color by its lightness, its chroma (how colorful it is) and its hue (its angle on the color wheel), so the blend moves round the wheel from one hue to the other and the colors stay strong all the way.
The colors can stay hex: in oklch only changes how they're mixed.
sRGB vs OKLAB vs OKLCH
OKLAB is the same color model as OKLCH, described another way: lightness plus two axes, green to red and blue to yellow. It blends in a straight line, so the brightness changes evenly, but between opposite colors that line passes close to gray. OKLCH goes round the wheel instead. Tailwind CSS v4 blends gradients in OKLAB by default.
Between similar colors the three look almost the same. The further apart the hues, the bigger the difference:
Writing colors as oklch()
You can also write the colors themselves in OKLCH, as oklch(lightness chroma hue): lightness in percent, chroma from 0 (gray) to about 0.37, hue in degrees (more in CSS color formats). This is the same gradient as above:
background: linear-gradient(to right in oklch, oklch(45.2% 0.3132 264.05), oklch(96.8% 0.211 109.77));
One catch: with oklch() colors and no in, browsers blend in OKLAB, not OKLCH, because OKLAB is the CSS default for modern color formats. Add in oklch whenever you want the OKLCH look. A gray has no hue, written as none: oklch(100% 0 none) is white.
Hue direction: shorter or longer
There are two ways round the wheel between two hues. OKLCH takes the shorter one unless you add longer hue, which takes the long way, through every hue in between:
increasing hue and decreasing hue pick a direction on the wheel instead, whichever way is shorter.
Radial and conic gradients
in oklch works the same way in every gradient type, after the shape, position or starting angle:
background: radial-gradient(circle at center in oklch, #FF0080, #00C8FF); background: conic-gradient(from 0deg in oklch, #FF0080, #00C8FF, #FF0080);
Browser support and fallback
in oklch works in Chrome and Edge 111+, Safari 16.2+ and Firefox 127+. A browser skips a line it doesn't understand and keeps the one before, so put a standard gradient first:
background: linear-gradient(to right, #0000FF, #FFFF00); background: linear-gradient(to right in oklch, #0000FF, #FFFF00);
When OKLCH isn't worth it
- Similar colors: a blend between neighbouring hues looks almost the same either way.
- Strict brand colors: OKLCH can bring in a hue neither color has, like green between blue and yellow. When a gradient must stay within its two colors, OKLAB is the safer choice.
- Mesh gradients: each color fades into transparency, which looks the same in every color space.
Every gradient in our gradient presets shows its OKLCH version next to the standard one, with the code.
FAQ
What is an OKLCH gradient?
A CSS gradient whose colors are blended in the OKLCH color space, written with in oklch after the direction, for example linear-gradient(to right in oklch, #0000FF, #FFFF00). Where a standard gradient between two bright colors turns gray in the middle, an OKLCH gradient stays vivid.
Why does my CSS gradient look gray or muddy in the middle?
By default, CSS blends hex, rgb() and hsl() colors in sRGB, channel by channel, and halfway between opposite colors such as blue and yellow every channel is at half: gray. Adding in oklch (or in oklab) blends the colors in a perceptual color space instead.
What's the difference between OKLAB and OKLCH gradients?
Both use the same color model. OKLAB blends in a straight line, with evenly changing brightness, but between opposite colors it still passes close to gray. OKLCH travels around the color wheel and keeps the colors vivid, though it can pass through a hue neither end has, like green between blue and yellow.
Do I need to write my colors in oklch() for an OKLCH gradient?
No. in oklch changes how the colors are mixed, so hex colors work. The reverse is the catch: oklch() colors without in oklch are blended in OKLAB, the CSS default for modern color formats.
Do all browsers support OKLCH gradients?
in oklch works in Chrome and Edge 111+, Safari 16.2+ and Firefox 127+. For older browsers, put a standard gradient on the line before it: a browser skips a line it doesn't understand and keeps the one before.