<hue-interpolation-method>

<hue-interpolation-method> CSS 数据类型表示用于在<hue>值之间进行插值的算法。插值方法指定了如何根据色轮找到两个色调值之间的中点。它用作<color-interpolation-method>数据类型的一个组成部分。

在对<hue>值进行插值时，色调插值算法默认为shorter。

语法

<hue-interpolation-method>值由色调插值算法的名称和一个文字标记hue组成。

shorter hue
longer hue
increasing hue
decreasing hue

值

任何一对色调角度对应于色轮上的两条半径，它们将圆周分成两个可能的插值弧。两个弧都从第一条半径开始，到第二条半径结束，但一个顺时针方向，另一个逆时针方向。

注意：以下描述和插图基于色轮，其中色调角度沿顺时针方向增加。请注意，也存在色轮，其中角度的增加将是逆时针操作。

对于一对归一化为范围[0deg, 360deg)的色调角度θ1和θ2，有四种算法来确定在从θ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);
}