<color-interpolation-method>

<color-interpolation-method> 指定插值是否应该使用矩形颜色空间或极坐标颜色空间，并带有一个可选的色调插值方法。

in <rectangular-color-space>
// or
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>

一个 <dashed-ident>，它引用一个自定义 @color profile。

<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

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

结果

以下示例展示了如何在重复渐变中插值颜色时指定颜色空间。三个方框显示了使用 repeating-conic-gradient()、repeating-linear-gradient() 和 repeating-radial-gradient() 函数的不同类型的重复渐变。第一个方框使用 Lab 颜色空间来插值两个颜色值。第二个和第三个方框使用 Oklch，并另外提供了一个 <hue-interpolation-method> 来指定如何在色调值之间进行插值。

HTML

<div class="gradient conic">conic</div>
<div class="gradient linear">linear</div>
<div class="gradient radial">radial</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> 之间的区别，其中线性渐变使用较短的方法（默认），而径向渐变使用较长的方法。

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