CSS 数据类型 - hue-interpolation-method

CSS 数据类型 <hue-interpolation-method> 确定用于在 hue 值之间进行插值的算法。此方法指定如何根据色轮查找两个色相值之间的中点。它是 <color-interpolation-method> 数据类型的一个组件。

默认的色调插值算法在插值 <hue> 值时更短。

可能的值

一对色相角度对应于色轮上的两个半径，该色轮将圆周切割成两个可能的弧线以进行插值。圆弧从第一个半径开始，到另一个半径结束，但它们都以相反的方向（顺时针和逆时针）移动。

有四种算法可以确定用于从一对色调角度进行插值的弧。例如，对于标准化为范围 [0deg， 360deg] 的一对色相角度 01 和 02，以下算法确定从 01 到 02 插值时要使用的弧线：

短弧

要使用的短弧。当两个半径重合时，圆弧退化到一个点。当两条圆弧的长度相同时：

当 01 < 02 时，则使用顺时针方向的圆弧。
当 01 > 02 时，则使用逆时针圆弧。

有关详细信息，请参阅图表：

更短的色调

较短的色调 2

长弧

使用较长的弧线。当两个半径重合时：

当 01 ≤ 02 时，圆弧变为顺时针方向的完整圆周。
当 01 > 02 时，圆弧变为逆时针方向的完整圆周。

当两条圆弧的长度相同时：

当 01 < 02 时，则使用顺时针方向的圆弧。
当 01 > 02 时，将使用逆时针圆弧。

有关详细信息，请参阅图表：

较长的色调

较长色调 2

增加

将使用顺时针圆弧。当两个半径重合时，圆弧退化为单个点。

有关递增算法，请参阅图表：

增加色调

降低

应使用逆时针圆弧。当两个半径重合时，圆弧退化为单个点。

有关递增算法，请参阅图表：

由于只有两条弧可供选择，因此这些算法在某些情况下是等效的，例如：

当 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>

打印本页