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