CSS Hue Interpolation: Direct the Gradient

The same two endpoint colors can produce four different journeys around the hue circle. CSS hue interpolation now lets authors name that route. The design task is choosing it deliberately and checking what the display can actually render.

CSS hue interpolation offers four routes

The same two endpoint colors can produce four different journeys around the hue circle. CSS hue interpolation lets authors name shorter, longer, increasing, or decreasing hue; the design job is choosing the route deliberately and checking what a display can render.

Take OKLCH endpoints at 350° and 10° with equal lightness and chroma. The shorter route advances 20° across zero, placing its midpoint at 0°. The longer route travels −340° and passes through 180°. Increasing also advances 20°; decreasing travels −340°. Reverse the endpoints and the directed methods swap their visual roles, while shorter remains the minimum-magnitude arc.

That difference is compositional, not a quality ranking. The short route may preserve a narrow warm family. The long route can deliberately traverse green, cyan, and violet. A campaign wash might need spectacle; a status transition might need continuity. Neither setting is universally “better.”

Use the four-route compass as a decision surface. It records start, end, signed delta, and midpoint hue in text as well as color, so the choice remains inspectable in monochrome and forced colors. A gradient should not hide its geometry behind a rainbow preview.

Choose the interpolation space before the hue path

A hue interpolation method only applies to a polar color space with an angular hue coordinate, such as HSL, HWB, LCH, or OKLCH. Rectangular sRGB and Oklab interpolate Cartesian channels; there is no hue angle to route. Writing a hue method beside a rectangular space is therefore the wrong model, even when two endpoints look similar.

For interface work, OKLCH is often convenient because lightness is designed to track perceived lightness more evenly than legacy HSL. That does not make every equal numerical step perceptually identical or guarantee gamut. Freeze lightness, chroma, hue, alpha, interpolation space, and route in the receipt rather than storing two hex colors and hoping a future tool reconstructs intent.

The contact sheet compares the same endpoints through sRGB, Oklab, and an explicitly routed OKLCH gradient. It is a browser rendering, not a spectrophotometer. Its semantic table states which representation has a hue dimension and lists reference midpoint coordinates.

OKLCH color foundations introduces the coordinates. Display P3 CSS systems handles wider-gamut delivery. This tutorial stays focused on the route around a polar space, not on claiming one color space wins every design problem.

Read every hue interpolation method exactly

Normalize finite hue angles into the interval from zero through 360 degrees. Let d be end minus start. For shorter hue, adjust d into the smallest signed arc: add 360 when d is below negative 180, and subtract 360 when d is above 180. For longer hue, choose the complementary arc: subtract 360 when d is between zero and 180, and add 360 when d is between negative 180 and zero. Increasing hue makes d nonnegative by adding 360 when needed; decreasing makes it nonpositive by subtracting 360. This CSS hue interpolation math keeps each branch readable in prose and code.

Exact 180° ties need a stable rule. The CSS Color 4 algorithm preserves direction according to the ordered pair rather than choosing randomly. The lab fixes the tie through the same normalized branch and tests both endpoint orders. Equal hues have zero delta for shorter/increasing/decreasing; longer represents a full turn only when the method’s rule calls for the complementary path, so the receipt exposes its delta instead of hiding it behind identical endpoints.

The CSS Color Module Level 4 defines color interpolation and hue adjustment. The implementation in the lab is a small reference model for bounded endpoints, not a browser conformance oracle.

Sample hue as start+d×t, then normalize for display. Keep the unwrapped value too: it proves increasing stayed monotonic across 360 and decreasing did not silently switch direction.

Write explicit gradient and color-mix syntax

For a gradient, place the interpolation clause after the direction: linear-gradient(90deg in oklch longer hue, oklch(...), oklch(...)). The default hue route for polar interpolation is shorter, but explicit authorship protects the design when a token or endpoint changes. For a mix, write color-mix(in oklch longer hue, colorA 50%, colorB). That explicit longer hue gradient documents both the CSS color interpolation space and the route.

The CSS Images Module Level 4 defines gradient interpolation behavior and defaults. CSS Color Module Level 5 applies the shared interpolation method to color-mix(). These are evolving standards; support must be feature-detected in the browsers your product actually serves.

Progressive enhancement starts with a useful fallback declaration, followed by the explicit advanced declaration. A browser that rejects the later value keeps the earlier one. The lab emits a reference sampled fallback made from bounded sRGB stops and labels any conversion approximation. It does not pretend the fallback is numerically identical to a browser’s full gamut-mapping pipeline.

Keep relative color syntax for deriving related tokens separate from route choice. Derivation answers where endpoints come from; hue interpolation answers how a browser travels between them.

Preserve missing and powerless hue

Hue becomes powerless when chroma is zero, and practically unstable when chroma is extremely close to zero. A neutral gray does not carry a meaningful direction around the hue circle. Inventing a vivid hue for that endpoint can make a deterministic demo while misrepresenting the authored color. CSS hue interpolation must preserve that missing information in its receipt.

The lab accepts the literal word none for missing hue and marks chroma at or below 0.000004 as powerless, matching the CSS Color 4 OKLCH epsilon. These are not interchangeable. An explicitly authored numeric hue remains specified even when its chroma makes that hue powerless for rendering; a literal none is missing and borrows the other endpoint’s hue for interpolation when one exists. A conversion pipeline may produce a missing hue when a component becomes powerless, but this lab parses directly authored OKLCH, so it never erases an explicit number. The receipt preserves missing and powerless flags separately.

This behavior should be visible. The semantic table says “borrowed for interpolation” or “hue unavailable,” not merely a number. Near-neutral transitions can still vary in lightness and chroma; the design can be successful without pretending their angular path was independently observable.

Missing components, powerless components, and transparent colors are related but different states. Alpha interpolation can reveal otherwise invisible RGB or OKLCH components as opacity rises. Record the authored endpoints and the effective interpolation values separately so refactoring does not turn hidden color into an accidental flash.

The rule is simple: preserve absence as evidence. A design receipt gains credibility when it states which axis could not influence the result.

Audit gamut, alpha, and contrast separately

An OKLCH sample can fall outside sRGB even when both endpoints render acceptably. The lab converts each reference sample to linear sRGB, flags channels outside the interval from zero through one, then clips only for its fallback preview. That flag is a diagnostic, not a prediction of every browser’s gamut-mapping result. Browsers and color-management pipelines may map differently. CSS hue interpolation and gamut mapping remain separate decisions.

Alpha is interpolated with the color under the CSS model’s premultiplication rules. For OKLCH, CSS hue interpolation multiplies L and C—not hue—by endpoint alpha, interpolates those premultiplied axes and alpha, then divides L and C by the interpolated alpha when it is nonzero. Hue follows its independently selected angular route. For the fixture .7 .2 350 / .2 to .6 .1 10 / .9, the shorter-route midpoint is approximately L=.618182 C=.118182 H=0 A=.55, not the independently interpolated .65 .15 0 / .55. The lab records both premultiplied axes and reconstructed samples; test the actual CSS over the intended background.

Contrast is another decision. A gradient can contain local regions where foreground text fails even when both endpoints pass. Sample the intended text positions against the actual backdrop, and test focus indicators and non-text boundaries independently. The production strip marks “text allowed” only for a named fixture; it is not a universal accessibility approval.

Delta E for design-system changes can quantify token drift, while spectral color mixing explores a different physical metaphor. Polar CSS interpolation is neither pigment mixing nor a promise of perceptual uniformity. Keep those truth boundaries attached to every palette decision.

Art-direct a production palette

Start with intent words that can be reviewed: quiet warmth, electric contrast, dusk transition, or continuous status shift. Then test every route with the same endpoints, space, lightness, chroma, alpha, size, and background. Changing only the CSS hue interpolation path turns preference into a controlled comparison.

Shorter often helps when endpoint identity should remain close. Longer can create a full-spectrum editorial moment, but it may cross unrelated brand or status colors. Increasing and decreasing are useful when direction carries meaning across a sequence, such as a circular dial or time-based palette. Direction must remain consistent when the component reverses; otherwise the return transition may take a different journey.

Test hostile pairs around 0°, exact 180° ties, neutrals, high chroma, transparent endpoints, and stops that leave sRGB. Name tokens by role and route, for example --wash-brand-longer, instead of encoding “pretty” into a value nobody can audit. The exported receipt stores normalized endpoints and signed delta beside the CSS.

The production decision strip separates route, gamut warning, alpha note, fallback, and text zone. That makes creative judgment legible to engineering without flattening it into a score. The best palette is the one whose route supports the composition and whose delivery risks have an owner.

Ship a CSS hue interpolation receipt

Ship the authored CSS, the useful fallback, feature-detection result, normalized endpoints, route, signed hue delta, midpoint, sample count, powerless-hue states, out-of-sRGB reference flags, and a canonical JSON receipt. A teammate should be able to reverse the endpoints and explain why the CSS hue interpolation path changes.

The limits belong beside the export. Reference conversion does not reproduce every browser gamut mapper. Polar interpolation is not physical light or pigment. Beauty depends on context. Contrast must be checked where text actually appears. Unsupported syntax keeps the declared fallback rather than receiving a synthetic support claim.

Revisit this article on 2027-02-28, or earlier after a material CSS Color or CSS Images revision, a browser-support change, or a discovered mismatch between native rendering and the semantic receipt. Add captured browser/version evidence when promoting a lab route into production.

The decision sequence is space, route, endpoint state, gamut, alpha, contrast, and fallback. Keeping that order stops one colorful screenshot from deciding six separate questions. It also gives the gradient a durable creative rationale: not “the browser made this,” but “we chose this path and verified its consequences.”

Runnable local artifact — The reference gamut flags are not a full browser gamut-mapping oracle, and polar interpolation is not physical pigment or light mixing.

Normalize two OKLCH endpoints, apply one CSS hue route, preserve powerless hue, sample a bounded fallback, and export CSS plus JSON.