Firefox Tomorrow

css type

`<color-interpolation-method>` CSS type

View on MDN ↗

The <color-interpolation-method> CSS data type represents the color space used for interpolation between &lt;color&gt; 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, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50, or xyz-d65.

  • <polar-color-space>

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

  • &lt;hue-interpolation-method&gt; Optional

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

  • <custom-color-space>

Formal syntax

Examples

Comparing interpolation color spaces using gradients

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

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

.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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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.

HTML

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

CSS

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.

.gradient {
  height: 200px;
  width: 200px;
  display: inline-block;
  font-family: monospace;
  margin: 10px;
  font-size: 16px;
}

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

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

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

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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-methods, with the linear gradient using the shorter method (default) and the radial gradient using the longer method.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also