Baseline 2023

Newly available

Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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.


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>]



One of the keywords srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50, or xyz-d65.


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 |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |

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

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


Comparing interpolation color spaces using gradients

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


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


.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);


Color interpolation in repeating gradients

The following example shows how to specify a color space when interpolating colors in repeating gradients. Three boxes show different types of repeating gradients using the repeating-conic-gradient(), repeating-linear-gradient(), and repeating-radial-gradient() functions. The first box uses the Lab color space to interpolate between two color values. The second and third boxes use Oklch and additionally provide a <hue-interpolation-method> to specify how to interpolate between hue values.


<div class="gradient conic">conic</div>
<div class="gradient linear">linear</div>
<div class="gradient radial">radial</div>


We used the same two colors in each gradient to demonstrate the different effects of <hue-interpolation-method> and color space on color interpolation in gradients.

.conic {
  background-image: repeating-conic-gradient(
    in lab,
    blueviolet 120deg

.linear {
  background-image: repeating-linear-gradient(
    in oklch,
    blueviolet 75px

.radial {
  background-image: repeating-radial-gradient(
    in oklch longer hue,
    blueviolet 50px,
    burlywood 100px


Comparing the first and second boxes demonstrates the difference of interpolating between two colors in differing color spaces. Comparing the second and third boxes shows the difference between <hue-interpolation-method>s, with the linear gradient using the shorter method (default) and the radial gradient using the longer method.


CSS Color Module Level 4
# interpolation-space

Browser compatibility

BCD tables only load in the browser

See also