CSS color-interpolation-method in Color-Mix

The CSS color-interpolation-method parameter defines the exact color space and mathematical algorithm used to blend colors together in modern CSS features, including the color-mix() function and CSS gradients. By allowing developers to explicitly choose between polar and rectangular color models, this parameter solves long-standing issues like muddy, desaturated transitions and ensures perceptual uniformity across visual elements.

Syntax and Structure

The color-interpolation-method is declared using the in keyword followed by the target color space name and an optional hue interpolation modifier:

in <color-space> [ <hue-interpolation-method> ]

In color-mix(), this parameter is mandatory and placed as the first argument:

/* Blending red and blue in the OKLCH color space */
background-color: color-mix(in oklch, red, blue);

In CSS gradients, it is optional and placed before the color stops:

/* A linear gradient interpolated in OKLab */
background-image: linear-gradient(in oklab, red, blue);

Supported Color Spaces

CSS Color Module Level 4 classifies color spaces into two primary models:

1. Rectangular Color Spaces

These spaces calculate transitions along Cartesian coordinates (X, Y, Z or R, G, B). Transitions occur along straight lines between values.

  • srgb: The legacy standard web space. Often produces a dull, grayish "dead zone" in the middle of complementary blends.
  • srgb-linear: Similar to sRGB, but calculations occur with linear gamma, producing more physically accurate light mixing.
  • display-p3: A wide-gamut RGB space common on modern displays.
  • lab: A device-independent, perceptually uniform color space.
  • oklab: An optimized version of Lab that fixes numerical instabilities and blue-to-purple hue shifts.

2. Polar (Cylindrical) Color Spaces

These spaces define colors using an angle for the hue (\(H\)), along with lightness and saturation or chroma coordinates.

  • hsl: Standard Hue-Saturation-Lightness.
  • hwb: Hue-Whiteness-Blackness.
  • lch: Lightness-Chroma-Hue.
  • oklch: Perceptually uniform polar space, widely recommended for smooth, intuitive transitions.

Hue Interpolation Modifiers

When using polar color spaces (hsl, hwb, lch, oklch), the hue is positioned on a 360-degree color wheel. The hue-interpolation-method modifier instructs the browser which direction to travel around the wheel between the start and end hues:

  • shorter hue (default): Takes the shortest path around the circle (less than or equal to 180 degrees).
  • longer hue: Takes the longer path around the circle (greater than or equal to 180 degrees).
  • increasing hue: Travels in the direction of increasing degree values (0° toward 360°).
  • decreasing hue: Travels in the direction of decreasing degree values (360° toward 0°).

Example: Controlling Hue Traversal

/* Mixes across the shortest path on the color wheel */
color: color-mix(in oklch shorter hue, red, blue);

/* Mixes across the longer path, passing through greens and yellows */
color: color-mix(in oklch longer hue, red, blue);

Behavior in color-mix() vs. Gradients

While both features use the same parameter syntax, they apply the interpolation differently:

  • color-mix(): Resolves to a single calculated color value at the midpoint (or specified percentages) between the two provided colors. The interpolation calculation happens internally, and the computed value is exported to the browser.
  • Gradients (linear-gradient, radial-gradient, conic-gradient): Generates continuous intermediate color steps across a surface. Specifying the interpolation method directly affects every sub-pixel stop rendered between color nodes.
/* Linear gradient using longer hue traversal in HSL */
.spectrum {
  background-image: linear-gradient(in hsl longer hue, red, blue);
}

/* Mixed border color using linear-srgb */
.card {
  border-color: color-mix(in srgb-linear, var(--primary) 70%, transparent);
}

Why the Choice of Method Matters

Before this specification, all CSS gradients defaulted to interpolating in non-linear srgb. When transitioning between complementary colors (like blue and yellow), the intermediate values lose saturation, producing muddy gray or brown tones.

By setting the interpolation method to oklab or oklch, lightness and chroma are preserved predictably:

  • oklab produces direct, smooth transitions without hue shifts.
  • oklch allows developers to rotate across the full color wheel to create multi-hue rainbow effects using only two color stops.