Essential Information on CSS Color Interpolation

Color interpolation is the technique of finding colors between two points. It helps us craft unique colors, beautiful palettes, better gradients, and smooth transitions.

I recently wrote a Guide to CSS Color Functions but didn’t delve deeply into color interpolation — which is unfortunate, as it enables us to create impressive demos like this one:

Notice how oklch(80% 0.3 340) interpolates to oklch(80% 0.3 60), then to oklch(80% 0.3 180), then to oklch(80% 0.3 270) and back to oklch(80% 0.3 340) using CSS animation? I did! That’s a powerful example of interpolation.

Where can we use color interpolation?

Color interpolation is prevalent in CSS. These properties and functions support color interpolation through mixing, gradients, or transitions:

In gradients and the color-mix() function, a formal syntax for color interpolation exists:

 = in [  |  ? ]

 =  | 
   = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
   = hsl | hwb | lch | oklch
   = [ shorter | longer | increasing | decreasing ] hue

Though complex, if we examine how this syntax works in color-mix(), we get something like this:

.element{
  color: color-mix(in lch longer hue, red, blue);
}

The CSS color-mix() function allows us to blend different colors in any color space, which is what color interpolation is about: transitioning from one color to another.

Our main focus is the in lab longer hue part, which directs how color-mix() interpolates. This essentially says, “Hey CSS, interpolate the next colors in the CIELCH color space using a longer hue arc.” The in lab part means the interpolation occurs in CIELCH, one of the many CSS color spaces, but we’ll discuss what longer hue means later.

Remember:

• The in keyword always precedes the color interpolation method.
• The second value is the color space used for mixing.
• The third value is an optional hue interpolation method ending with the hue keyword.

This syntax appears in all gradient functions, where colors are gradually interpolated to achieve a smooth gradient. See how altering the gradient with the color interpolation syntax can create a completely new gradient:

.element {
  background: linear-gradient(in oklch longer hue 90deg, magenta, cyan);
}

Let’s backtrack. Interpolation can occur in two major color spaces: rectangular and polar.

Rectangular color spaces

Rectangular color spaces use Cartesian coordinates on a three-dimensional plane to represent colors, similar to the X (horizontal), Y (vertical), and Z (depth) axes on a graph.

Rectangular color spaces are like a graph, but