<hue-interpolation-method>

Baseline 2024

新推出

自 2024 年 6 月起，此功能已在最新的裝置和瀏覽器版本中可用。此功能可能不適用於較舊的裝置或瀏覽器。

<hue-interpolation-method> CSS 資料型別表示用於在 <hue> 值之間進行插值的演算法。插值方法指定如何根據色輪在兩個色相值之間找到中間點。它被用作 <color-interpolation-method> 資料型別的一個組成部分。

當插值 <hue> 值時，色相插值演算法預設值為 shorter。

語法

<hue-interpolation-method> 值由一個色相插值演算法名稱後跟一個字面量 hue 組成。

shorter hue
longer hue
increasing hue
decreasing hue

值

任意一對色相角對應於色輪上的兩條半徑，它們將圓周切成兩條可能的插值弧。兩條弧都從第一條半徑開始，到第二條半徑結束，但一條是順時針方向，另一條是逆時針方向。

注意：以下描述和插圖基於色相角順時針增加的色輪。請注意，有些色輪中的角度增加是逆時針操作。

對於一對色相角 θ1 和 θ2，規範化到 [0deg, 360deg) 範圍，有四種演算法可以確定從 θ1 到 θ2 插值時使用哪條弧線。

shorter

使用較短的弧線。當兩條半徑重合時，弧線退化為單個點。當兩條弧線長度相同時：

如果 θ1 < θ2，使用順時針弧線；
如果 θ1 > θ2，使用逆時針弧線。

longer

使用較長的弧線。當兩條半徑重合時：

如果 θ1 ≤ θ2，弧線變為完整的圓周，方向為順時針。
如果 θ1 > θ2，弧線變為完整的圓周，方向為逆時針。

當兩條弧線長度相同時：

如果 θ1 < θ2，使用順時針弧線；
如果 θ1 > θ2，使用逆時針弧線。

increasing

使用順時針弧線。當兩條半徑重合時，弧線退化為單個點。

increasing with θ1 = 135deg and θ2 = 45deg

decreasing

使用逆時針弧線。當兩條半徑重合時，弧線退化為單個點。

decreasing with θ1 = 135deg and θ2 = 45deg

由於只有兩條弧線可供選擇，這些演算法在某些情況下是成對等效的。具體而言：

如果 0deg < θ2 - θ1 < 180deg 或 θ2 - θ1 < -180deg，則 shorter 和 increasing 等效，而 longer 和 decreasing 等效。
如果 -180deg < θ2 - θ1 < 0deg 或 θ2 - θ1 > 180deg，則 shorter 和 decreasing 等效，而 longer 和 increasing 等效。

increasing 和 decreasing 的一個顯著特點是，當色相角差在過渡或動畫過程中經過 180deg 時，弧線不會像 shorter 和 longer 那樣翻轉到另一側。

正式語法

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

示例

比較色相插值演算法

以下示例顯示了在 linear-gradient() 中使用不同色相插值演算法的效果。

HTML

html

<div class="hsl">
  <p>HSL</p>
</div>
<div class="hsl-increasing">
  <p>HSL increasing</p>
</div>
<div class="hsl-decreasing">
  <p>HSL decreasing</p>
</div>
<div class="hsl-shorter">
  <p>HSL shorter</p>
</div>
<div class="hsl-longer">
  <p>HSL longer</p>
</div>
<div class="hsl-named">
  <p>HSL named</p>
</div>
<div class="hsl-named-longer">
  <p>HSL named (longer)</p>
</div>

CSS

div {
  border: 1px solid black;
  height: 50px;
  margin: 10px;
  width: 90%;
}
p {
  color: white;
  margin: 6px;
}

/* Fallback styles */
.hsl,
.hsl-shorter,
.hsl-named {
  background: linear-gradient(
    to right,
    hsl(39 100% 50%),
    hsl(46 100% 50%),
    hsl(53 100% 50%),
    hsl(60 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right,
    hsl(190 100% 50%),
    hsl(225 100% 50%),
    hsl(260 100% 50%),
    hsl(295 100% 50%),
    hsl(330 100% 50%),
    hsl(365 100% 50%),
    hsl(400 100% 50%),
    hsl(435 100% 50%),
    hsl(470 100% 50%),
    hsl(505 100% 50%),
    hsl(540 100% 50%)
  );
}
.hsl-decreasing,
.hsl-longer,
.hsl-named-longer {
  background: linear-gradient(
    to right,
    hsl(399 100% 50%),
    hsl(368 100% 50%),
    hsl(337 100% 50%),
    hsl(307 100% 50%),
    hsl(276 100% 50%),
    hsl(245 100% 50%),
    hsl(214 100% 50%),
    hsl(183 100% 50%),
    hsl(152 100% 50%),
    hsl(122 100% 50%),
    hsl(91 100% 50%),
    hsl(60 100% 50%)
  );
}

css

.hsl {
  background: linear-gradient(
    to right in hsl,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right in hsl increasing hue,
    hsl(190deg 100% 50%),
    hsl(180deg 100% 50%)
  );
}
.hsl-decreasing {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-shorter {
  background: linear-gradient(
    to right in hsl shorter hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-longer {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-named {
  background: linear-gradient(to right in hsl, orange, yellow);
}
.hsl-named-longer {
  background: linear-gradient(to right in hsl longer hue, orange, yellow);
}

結果

規範

規範
CSS 顏色模組第四版 # hue-interpolation

瀏覽器相容性

另見

<color-interpolation-method>
<hue> 資料型別

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 10 月 10 日，由 MDN 貢獻者完成。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題