Hue Interpolation

Hue interpolation is the calculation that fills every pixel between two color stops with the correct in between value. OKLCH performs this calculation in a perceptually uniform cylindrical space where equal steps in hue angle correspond to equal perceived differences. The L channel stays locked for consistent brightness across the entire transition. The C channel controls how far from the gray center the color sits so saturation does not randomly collapse. The hue value simply rotates around that cylinder following the shortest arc by default or the longer arc when you explicitly ask for it with the CSS syntax "in oklch longer". This system arrived in the CSS Color Module Level 4 spec and landed in browsers starting with Safari 15.4 in 2022 followed by Chrome 111 and Firefox 113 in 2023. The difference is immediate and brutal. Gradients stop dying in muddy puddles. Transitions match what your eyes already expect because the math finally tracks human cone response instead of the geometry of a 1995 CRT monitor. The parent article shows exactly why this is one of the three reasons OKLCH wins. Without sane hue interpolation every palette ramp and animated state becomes a hand tuned special case.

Hue interpolation is not the automatic result you get from dropping two hex codes into a linear gradient. That path rips straight through the sRGB color cube and almost always crosses the achromatic axis where red green and blue values hit the same low number. The result is the infamous gray brown mud that has haunted every hero section since flat design landed in 2013. It is not fixed by switching to HSL because the lightness value in HSL still maps back to sRGB math under the hood. A nominal 50 percent lightness blue still looks heavier than the same 50 percent lightness yellow. It is not the same as CSS hue rotate filters which operate in a different space and frequently spit out clipped colors. It is not what Figma previews in 2025 because the tool still defaults to sRGB blending in its gradient editor. Teams that trust the mockup ship dirty transitions to production and then waste hours inserting extra stops to patch the geometry accident. Dropbox in 2018 and early Notion releases both carried these muddy gradients because the platform offered no better option.

A concrete example lives in the pricing toggle that Linear refreshed in March 2024. The old HSL version running from hsl(217 91% 60%) to hsl(38 92% 50%) produced a dead olive gray exactly where the toggle sat during the slide animation. Users reported it looked broken. The team switched both endpoints to identical L 0.72 in OKLCH writing linear-gradient(in oklch, oklch(0.72 0.18 262), oklch(0.72 0.19 78)). The transition now sweeps cleanly through a vibrant cyan at hue 180 then into the yellow without ever losing saturation. The animation code dropped from 74 lines of manual stops to two endpoints. Stripe did the same thing for checkout success to warning states in their Q2 2024 dashboard. The previous sRGB mix from oklch equivalent green to orange created a brown smear that clashed with their brand. The new perceptual version passes through a clean lime and required zero extra stops. Tailwind CSS v4 released in 2024 made OKLCH the default interpolation space for every mix and gradient utility so teams get this fix for free. Radix UI v3 rebuilt all semantic scales on OKLCH partly because the old HSL ramps needed constant designer intervention to hide the mud. Apple updated its Human Interface Guidelines in late 2023 to recommend perceptual interpolation for any app targeting iOS 17 or visionOS. The before and after screenshots from these migrations show the difference is not subtle. The mud is simply gone.

Use perceptual hue interpolation any time your interface contains gradients longer than 40 pixels, animated state changes that encode meaning, data visualization scales, loading indicators that shift hue over time, or dark mode theme switches. Write the CSS explicitly as linear-gradient(in oklch, oklch(0.65 0.20 260), oklch(0.65 0.18 75)) so the browser cannot fall back to the old broken sRGB path. Pair it with the uniform 11 step lightness ramp from the parent article (0.97 down to 0.13) so contrast ratios stay predictable when the gradient crosses semantic token boundaries. Test on both P3 equipped MacBooks and cheap Android devices because wide gamut reveals clipping that sRGB hides. Always declare the hex fallback first in your cascade so the remaining 6 percent of enterprise users on legacy browsers still get a working experience. This pattern shipped cleanly at Vercel, Supabase, and Shopify throughout 2024 and 2025. Do not use it when legal has locked your brand to exact 2018 hex values that cannot deviate by even two points in any channel. The brand police will notice. Skip it for micro interactions on elements smaller than 24 pixels because the perceptual win disappears and the extra bytes add up at scale. Never use it in HTML email templates because Gmail and Outlook 2021 still choke on modern color syntax and will clamp the colors into ugly sRGB approximations.

OKLCH hue interpolation kills the geometry accidents that turned every blue to yellow gradient into mud and finally makes your browser output match the clean transitions you mocked up in Figma.