Color Interpolation and Hue Interpolation

• July 17 2023
• 1 min. read

While I was researching gradients, I came across a couple of interesting features introduced in the CSS Color Level 4 specification

You can specify the color you want the gradient to run on. This is called hue interpolation.

The example below uses the OKLab color space in the conic gradient

.oklab01 {
  background: conic-gradient(
    in oklab,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

You can also specify how browsers interpolates the hues in a gradient

The four possible values are:

• shortest
• longest
• increasing
• decreasing

The Codepen below shows the different hue interpolation methods used with the same two colors from cyan to blue.

Links and Resources #

• Gradients — MDN
• Using CSS Gradients — MDN
• A Deep CSS Dive Into Radial And Conic Gradients
• Gradients in the CSS Color Level 4 specification
• Gradients — MDN
• Gradient hue interpolation
• Gradient in modern color spaces — Codepen — Adam Argyle
• Interactive color space interpolation results— Codepen — Adam Argyle

Edit on Github