<color-interpolation-method>

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.

<color-interpolation-method> CSS 数据类型表示用于在 <color> 值之间插值的色彩空间。它可用于覆盖像 color-mix() 和 linear-gradient() 等与颜色相关的函数符号所用的默认插值色彩空间。

在对 <color> 值插值时，插值色彩空间默认为 oklab。

语法

<color-interpolation-method> 指定了插值应使用直角坐标色彩空间还是带可选色相插值方法的极坐标色彩空间：

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

值

<rectangular-color-space>

关键字 srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、lab、oklab、xyz、xyz-d50 或 xyz-d65 之一。

<polar-color-space>

关键字 hsl、hwb、lch 或 oklch 之一。

<hue-interpolation-method> 可选

用于色调插值的算法。默认为 shorter hue。

<custom-color-space>

一个指向自定义 @color profile 的 <dashed-ident>。

形式语法

<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       |
  xyz-d65       

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

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

示例

用渐变比较各种插值色彩空间

以下示例展示了 linear-gradient() 使用不同的插值色彩空间的效果。

HTML

html
<div>sRGB：</div>
<div class="gradient srgb"></div>
<div>Oklab：</div>
<div class="gradient oklab"></div>
<div>Oklch（带 <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);
}

结果

重复渐变中的颜色插值

以下示例展示了在重复渐变中插值颜色时如何指定色彩空间。

三个框展示了使用 repeating-conic-gradient()、repeating-linear-gradient() 和 repeating-radial-gradient() 函数创建的不同类型的重复渐变。

第一个框使用 Lab 色彩空间在两个颜色值之间进行插值。第二个和第三个框使用 Oklch 色彩空间，并且额外提供了一个 <hue-interpolation-method> 来指定如何在色调值之间进行插值。

HTML

html
<div class="gradient conic">圆锥渐变</div>
<div class="gradient linear">线性渐变</div>
<div class="gradient radial">径向渐变</div>

CSS

我们在每个渐变中使用了相同的两种颜色，以展示 <hue-interpolation-method> 和色彩空间在渐变颜色插值中的不同效果。

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

结果

对比第一个和第二个框展示了在不同色彩空间中插值两种颜色时的差异。对比第二个和第三个框则展示 <hue-interpolation-method> 之间的差异，其中线性渐变使用了较短的方法（默认），而径向渐变使用了较长的方法。

规范

Specification
CSS Color Module Level 4
# interpolation-space

浏览器兼容性

BCD tables only load in the browser

参见