CSS 数据类型 <hue-interpolation-method> 确定用于在 hue 值之间进行插值的算法。此方法指定如何根据色轮查找两个色相值之间的中点。它是 <color-interpolation-method> 数据类型的一个组件。
默认的色调插值算法在插值 <hue> 值时更短。
可能的值
一对色相角度对应于色轮上的两个半径，该色轮将圆周切割成两个可能的弧线以进行插值。圆弧从第一个半径开始，到另一个半径结束，但它们都以相反的方向（顺时针和逆时针）移动。
有四种算法可以确定用于从一对色调角度进行插值的弧。例如，对于标准化为范围 [0deg， 360deg] 的一对色相角度 01 和 02，以下算法确定从 01 到 02 插值时要使用的弧线：
短弧
要使用的短弧。当两个半径重合时，圆弧退化到一个点。当两条圆弧的长度相同时：
- 当 01 < 02 时，则使用顺时针方向的圆弧。
- 当 01 > 02 时，则使用逆时针圆弧。
有关详细信息，请参阅图表：
长弧
使用较长的弧线。当两个半径重合时：
- 当 01 ≤ 02 时，圆弧变为顺时针方向的完整圆周。
- 当 01 > 02 时，圆弧变为逆时针方向的完整圆周。
当两条圆弧的长度相同时：
- 当 01 < 02 时，则使用顺时针方向的圆弧。
- 当 01 > 02 时，将使用逆时针圆弧。
有关详细信息，请参阅图表：
增加
将使用顺时针圆弧。当两个半径重合时，圆弧退化为单个点。
有关递增算法，请参阅图表：
降低
应使用逆时针圆弧。当两个半径重合时，圆弧退化为单个点。
有关递增算法，请参阅图表：
由于只有两条弧可供选择，因此这些算法在某些情况下是等效的，例如：
- 当 0 < 02 - 01 < 180 度或 02 - 01 < -180 度时，更短和递增是等效的，更长和递减是等效的。
- 当 -180 度< 02 - 01 < 0 度或 02 - 01 > 180 度时，更短和递减相等，更长和递增相等。
关于增加和减少插值算法，需要注意的重要一点是，当色相角度差异在过渡或动画期间超过 180 度时，弧线不会像较短和较长的插值算法那样翻转到另一侧。
语法
<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>
