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

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

預設色相插值演算法在插值<hue>值時，是較短的。

可能的值

一對色相角對應於色輪上的兩條半徑，它將圓周分成兩個可能的插值弧。這兩個弧都從第一條半徑開始，到另一條半徑結束，但它們都朝相反的方向（順時針和逆時針）移動。

有四種演算法來確定用於從色相角對進行插值的弧。例如，對於一對色相角01和02（歸一化為[0deg, 360deg]範圍），以下演算法確定在從01到02插值時使用的弧

較短的 (Shorter)

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

當01 < 02時，使用順時針弧。
當01 > 02時，使用逆時針弧。

請參考圖表瞭解詳情

較長的 (Longer)

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

當01 ≤ 02時，弧變為具有順時針方向的全圓周。
當01 > 02時，弧變為具有逆時針方向的全圓周。

當兩個弧的長度相同時

當01 < 02時，使用順時針弧。
當01 > 02時，使用逆時針弧。

請參考圖表瞭解詳情

遞增 (Increasing)

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

請參考圖表瞭解遞增演算法

遞減 (Decreasing)

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

請參考圖表瞭解遞增演算法

由於只有兩個弧可以選擇，因此這些演算法在某些情況下是等效的，例如

當0deg < 02 - 01 < 180deg或02 - 01 < -180deg時，較短的和遞增的等效，較長的和遞減的等效。
當-180deg < 02 - 01 < 0deg或02 - 01 > 180deg時，較短的和遞減的等效，較長的和遞增的等效。

關於遞增和遞減插值演算法需要注意的一點是，當色相角差在過渡或動畫過程中穿過180deg時，弧不會像較短的和較長的插值演算法那樣翻轉到另一側。

語法

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

CSS <hue-interpolation-method> - 演算法比較

在下面的示例中使用 linear-gradient() 來演示色相插值方法的不同演算法的比較

<html>
<head>
<style>  
   div {
      width: 200px;
      height: 30px;
   }

   .hsl-plain {
      background: linear-gradient(
         to right in hsl,
         hsl(76deg 100% 50%),
         hsl(20deg 100% 50%)
      );
   }

   .increasing-method {
      background: linear-gradient(
         to right in hsl increasing hue,
         hsl(250deg 100% 50%),
         hsl(30deg 100% 50%)
      );
   }

   .decreasing-method {
      background: linear-gradient(
         to right in hsl decreasing hue,
         hsl(9deg 100% 50%),
         hsl(160deg 100% 50%)
      );
   }

   .shorter-method {
      background: linear-gradient(
         to right in hsl shorter hue,
         hsl(49deg 100% 50%),
         hsl(180deg 100% 50%)
      );
   }
   
   .longer-method {
      background: linear-gradient(
         to right in hsl longer hue,
         hsl(39deg 100% 50%),
         hsl(60deg 100% 50%)
      );
   }
</style>
</head>
<body>
   <div class="hsl-plain">
      <p>HSL</p>
   </div>
   <div class="increasing-method">
      <p>HSL increasing</p>
   </div>
   <div class="decreasing-method">
      <p>HSL decreasing</p>
   </div>
   <div class="shorter-method">
      <p>HSL shorter</p>
   </div>
   <div class="longer-method">
      <p>HSL longer</p>
   </div>
</body>
</html>

列印頁面