CSS <hue-interpolation-method> Data Type

The CSS <hue-interpolation-method> data type controls the path used when interpolating between hue angles in a polar color space. It determines whether interpolation follows the shorter, longer, increasing, or decreasing path around the hue circle.

Syntax

The <hue-interpolation-method> data type consists of one of four hue interpolation keywords followed by the hue keyword:

<hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue

The available values are:

shorter hue
longer hue
increasing hue
decreasing hue

Hue Interpolation Values

Value	Description
`shorter hue`	Interpolates along the shorter path between the two hue angles.
`longer hue`	Interpolates along the longer path between the two hue angles.
`increasing hue`	Interpolates in the direction of increasing hue angles.
`decreasing hue`	Interpolates in the direction of decreasing hue angles.

If a hue interpolation method is not specified, shorter hue is used.

Shorter and Longer Hue

The shorter hue and longer hue values choose a path according to the angular distance between two hues. Because hue values form a circle, two possible paths normally connect one hue to another.

shorter hue uses the path with the smaller angular distance, while longer hue uses the path with the larger angular distance.

in oklch shorter hue
in oklch longer hue

Increasing and Decreasing Hue

The increasing hue and decreasing hue values select a direction rather than choosing the path based on its length.

increasing hue follows increasing hue angles around the hue circle, while decreasing hue follows decreasing hue angles.

in oklch increasing hue
in oklch decreasing hue

<hue-interpolation-method> Example

The following gradients use the same two colors but specify different hue interpolation paths in the OKLCH color space:

.shorter {
  background: linear-gradient(in oklch shorter hue, oklch(70% 0.2 30), oklch(70% 0.2 300));
}
.longer {
  background: linear-gradient(in oklch longer hue, oklch(70% 0.2 30), oklch(70% 0.2 300));
}

Browser Result

shorter hue

longer hue

The starting and ending colors are identical, but the selected hue interpolation method changes the colors encountered between them.

Specifications

The <hue-interpolation-method> data type is defined in the CSS Color Module Level 4 .