CSS <color-interpolation-method> Data Type

The CSS <color-interpolation-method> data type specifies the color space used when colors are interpolated. For polar color spaces, it can also specify how hue angles are interpolated between colors.

Syntax

A <color-interpolation-method> begins with the in keyword followed by a rectangular or polar color space. Polar color spaces can optionally include a hue interpolation method.

<color-interpolation-method> = in <rectangular-color-space> | in <polar-color-space> <hue-interpolation-method>?

Examples include:

in srgb
in srgb-linear
in lab
in oklab
in xyz
in xyz-d50
in xyz-d65
in hsl
in hwb
in lch
in oklch
in oklch longer hue

Color Spaces

The selected color space determines how intermediate colors are calculated. Different color spaces can produce noticeably different results when the same colors are interpolated.

Type	Color Spaces	Description
Rectangular	`srgb`, `srgb-linear`, `lab`, `oklab`, `xyz`, `xyz-d50`, `xyz-d65`	Interpolates color components along rectangular coordinate axes.
Polar	`hsl`, `hwb`, `lch`, `oklch`	Uses a hue angle along with other color components and can specify how the hue is interpolated.

Hue Interpolation

When a polar color space is used, a <hue-interpolation-method> can control the direction taken between two hue angles. If no hue interpolation method is specified, shorter hue is used.

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

<color-interpolation-method> Example

The following gradients use the same starting and ending colors but interpolate them in different color spaces:

.srgb {
  background: linear-gradient(in srgb, blue, red);
}
.oklch {
  background: linear-gradient(in oklch, blue, red);
}

Browser Result

sRGB

OKLCH

Because the gradients perform their calculations in different color spaces, the intermediate colors can differ even though the starting and ending colors are the same.

Specifications

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