<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 上查看此页面 • 报告此内容存在的问题