<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
, orxyz-d65
. <polar-color-space>
-
One of the keywords
hsl
,hwb
,lch
, oroklch
. <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