<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>?|<custom-color-space>]

<rectangular-color-space> =
srgb|
srgb-linear|
display-p3|
display-p3-linear|
a98-rgb|
prophoto-rgb|
rec2020|
lab|
oklab|
<xyz-space>

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

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

<custom-color-space> =
<dashed-ident>

<xyz-space> =
xyz|
xyz-d50|
xyz-d65

示例

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

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

HTML

<div>sRGB：</div><div></div><div>Oklab：</div><div></div><div>Oklch（带 <code>longer hue</code>）：</div><div></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);}

结果

重复渐变中的颜色插值

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

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

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

HTML

<div>圆锥渐变</div><div>线性渐变</div><div>径向渐变</div>

CSS

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

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

结果

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

规范

浏览器兼容性

css.types.color.color-mix

css.types.color.color.display-p3-linear

参见

• <color>、<gradient>
• <hue-interpolation-method>