OKLCH Interpolation in CSS Gradients

OKLCH Interpolation in CSS Gradients

The in oklch modifier routes CSS gradient interpolation through a perceptually uniform color space where equal numerical distances correspond to equal perceived color differences, eliminating the grey midpoints that sRGB produces between complementary hues¹. Standard sRGB interpolation blends by mixing raw channel values, which often passes through a neutral grey in the middle of the transition. The OKLCH model describes color as L (lightness, 0 to 1), C (chroma, 0 to roughly 0.4), and H (hue angle, 0 to 360).

Writing linear-gradient(in oklch, blue, orange) produces a vivid midpoint instead of the dull sRGB path². Consequently, OKLCH interpolation improves gradients between any two hues separated by more than about 90 degrees on the hue wheel. Building on this, browsers that support OKLCH interpolation (Chrome 111+, Firefox 113+, Safari 16.4+) handle gamut clipping automatically when chroma values exceed the display's coverage.

The OKLCH perceptual model

OKLCH defines color in three axes¹. L represents lightness from 0 (black) to 1 (white). C represents chroma: 0 is achromatic (grey) and values above roughly 0.37 land outside the sRGB gamut on most displays, in the wider P3 or Rec2020 range. H is the hue angle in degrees, running from red at 0 through yellow, green, cyan, blue, and back to red at 360. Together these three values describe any visible color with a structure that matches how human vision perceives differences between colors, making it a powerful tool for defining gradients that look smooth and uniform across their entire length.

Why OKLCH is perceptually uniform

Perceptual uniformity means that moving C by 0.05 produces the same perceived color change regardless of where on the hue wheel the starting color sits³. sRGB does not have this property: equal channel increments produce unequal perceptual steps. Consequently, gradients defined with OKLCH stops maintain consistent perceived saturation and lightness throughout the transition.

Choosing gradient stops in OKLCH allows designers to specify hue distance rather than trial-and-error channel values, producing more predictable results across different hue pairings. Because the lightness axis in OKLCH corresponds closely to perceived brightness, you can create gradients that maintain consistent perceived intensity across their entire length simply by keeping the L value constant and varying only the hue angle.

How sRGB produces grey midpoints and OKLCH avoids them

Between blue (approximately hsl(240,100%,50%)) and orange (approximately hsl(30,100%,50%)), the sRGB midpoint is hsl(135,0%,50%): fully desaturated grey³. The raw channel mix passes through zero chroma at the midpoint between these complementary hues. OKLCH interpolation travels the shortest angular path between the two hue angles rather than mixing channels arithmetically. For monochromatic gradients or transitions between adjacent hues, the visual difference between sRGB and OKLCH interpolation is negligible, which means the in oklch modifier is most valuable for gradients that span a wide hue range such as blue-to-orange or green-to-magenta.

The in oklch modifier applies to the entire gradient function, not individual stops. Writing linear-gradient(in oklch, blue, orange) processes all stops and their intermediate blending in OKLCH. Yet the modifier does not change the declared stop colors: blue and orange still specify the endpoints. The difference is only in how the browser computes the intermediate values. Furthermore, when two hues are close on the OKLCH wheel, the difference between sRGB and OKLCH interpolation is small; the grey midpoint issue is most visible for hue separations greater than roughly 90 degrees. For monochromatic gradients or transitions between adjacent hues, the visual difference between sRGB and OKLCH interpolation is negligible, which means the in oklch modifier is most valuable for gradients that span a wide hue range such as blue-to-orange or green-to-magenta.

Gamut clipping in practice

High-chroma OKLCH stops may specify colors outside the sRGB triangle. oklch(0.7 0.4 250) is a vivid blue that exceeds sRGB on most displays. Browsers clip these colors to the nearest sRGB equivalent when rendering on sRGB displays, typically by reducing chroma until the color falls within gamut. Colors clipped to sRGB appear less saturated than intended on sRGB displays but render correctly on P3 displays such as the MacBook Pro M4, iPhone 17 Pro, and Samsung Galaxy S25.

Designing for sRGB and P3 displays

Colors clipped to sRGB appear less saturated than intended on sRGB displays but render correctly on P3 displays (MacBook Pro M4, iPhone 17 Pro, Samsung Galaxy S25). To avoid unexpected clipping, keep chroma below 0.37 for universal sRGB compatibility. For P3-aware design, use chroma values up to 0.4 with the expectation that sRGB devices will clip slightly.

Consequently, testing OKLCH gradient output on both a P3 display and a standard sRGB monitor is important before deploying wide-gamut gradients. Building on this, the CapyToolkit gradient builder exports HEX values by default, which are sRGB-safe. To take advantage of OKLCH chroma beyond the sRGB gamut, write the gradient stops manually after copying the geometry. A practical workflow is to design the gradient geometry using the builder, then substitute the HEX stops with oklch() values tuned for the target display gamut, verifying the result in Safari on a P3 panel and Chrome on an sRGB monitor before shipping.

@supports fallback for in oklch interpolation

Browsers that lack in oklch support render the gradient with sRGB interpolation rather than producing an error. For gradients between complementary hues, this produces the grey midpoint artifact, but the gradient remains functional rather than broken. You do not need to detect oklch support to ship gradients that use in oklch; the worst case for unsupported browsers is a less vivid midpoint, not a missing gradient.

When you need to serve an alternative gradient to sRGB browsers, use @supports (color: oklch(0.7 0.2 250)) as the detection check². Browsers supporting oklch() color syntax (Chrome 111+, Firefox 113+, Safari 16.4+) also support the in oklch interpolation modifier, so oklch() color support is a reliable proxy for interpolation support. Write the sRGB fallback gradient as the base rule and wrap the oklch-interpolated version inside the @supports block.

Progressive enhancement in Tailwind v4

The Tailwind v4 /oklch modifier applies the in oklch modifier automatically. Browsers without support ignore the modifier and render the gradient with the default sRGB interpolation, leaving the gradient intact. No additional @supports block is needed in Tailwind v4 projects: the modifier degrades gracefully by design, with no authoring overhead for the fallback case. This means you can ship OKLCH-enhanced gradients to all users today, with the vivid interpolation appearing automatically on modern browsers while older browsers still display a perfectly functional sRGB gradient.

When to use this

Use OKLCH interpolation for gradients between complementary or widely separated hues where sRGB produces a grey midpoint. Standard sRGB interpolation is the right call for monochromatic gradients and small hue-angle transitions, and one quick check tells you which case you have: test a blue-to-orange blend for a grey midpoint, then try two adjacent hues and watch the artifact disappear.

Examples