<color-interpolation-method>

The <color-interpolation-method> CSS data type represents the color space used for interpolation between <color> values. It can be used to override the default interpolation color space for color-related functional notations such as color-mix() and linear-gradient().

When interpolating <color> values, the interpolation color space defaults to Oklab.

Syntax

The <color-interpolation-method> specifies whether interpolation should use a rectangular color space or a polar color space with an optional hue interpolation method:

in <rectangular-color-space>
// or
in <polar-color-space>[ <hue-interpolation method>]

Values

<rectangular-color-space>

One of the keywords srgb, srgb-linear, lab, oklab, xyz, xyz-d50, or xyz-d65.

<polar-color-space>

One of the keywords hsl, hwb, lch, or oklch.

<hue-interpolation-method> Optional

The algorithm for hue interpolation. It defaults to shorter hue.

Formal syntax

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

<rectangular-color-space> =
srgb |
srgb-linear |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65

<polar-color-space> =
hsl |
hwb |
lch |
oklch

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

Examples

Comparing interpolation color spaces using gradients

The following example shows the effect of using different interpolation color spaces for linear-gradient().

HTML

html

<div>sRGB:</div>
<div class="gradient srgb"></div>
<div>Oklab:</div>
<div class="gradient oklab"></div>
<div>Oklch (with <code>longer hue</code>):</div>
<div class="gradient oklch-longer"></div>

CSS

css

.gradient {
  height: 50px;
  width: 100%;
}
.srgb {
  background-image: linear-gradient(in srgb to right, blue, red);
}
.oklab {
  background-image: linear-gradient(in oklab to right, blue, red);
}
.oklch-longer {
  background-image: linear-gradient(in oklch longer hue to right, blue, red);
}

Result

Specifications

Specification
CSS Color Module Level 4
# interpolation-space

Browser compatibility

css.types.color.color-mix

BCD tables only load in the browser

css.types.image.gradient.conic-gradient.interpolation_color_space

BCD tables only load in the browser

css.types.image.gradient.linear-gradient.interpolation_color_space

BCD tables only load in the browser

css.types.image.gradient.radial-gradient.interpolation_color_space

BCD tables only load in the browser

css.types.image.gradient.repeating-conic-gradient.interpolation_color_space

BCD tables only load in the browser

css.types.image.gradient.repeating-linear-gradient.interpolation_color_space

BCD tables only load in the browser

css.types.image.gradient.repeating-radial-gradient.interpolation_color_space

BCD tables only load in the browser

See also