CSS 数据类型 - hue

CSS 数据类型 <hue> 用于描述颜色的色相角度。接受 hue 作为单个值的颜色函数使用此数据类型。其中一些函数是：hsl（）、hwb（）、lch（）和 oklch（）。

不同的颜色是 0 度的红色、60 度的黄色、120 度的青柠色、180 度的青色、240 度的蓝色和 300 度的洋红色

可能的值

数据类型 <hue> 可以具有以下值之一：

<angle>：指定角度值，分别以 deg、grad、rad 或 turn 表示。
<number>：指定一个数字，表示色相角度的度数。

由于 <angle> 是周期性的，因此 <hue> 的值被标准化为 [0deg， 360deg] 范围，因此，480 度与 120 度相同，-120 度与 240 度相同，-1 圈与 1 圈相同，依此类推。

语法


<hue> = <angle>|<number>

注：根据色彩空间，角度对应于特定的色相。例如，sRGB 绿色的色相角度在 sRGB 颜色空间中为 120 度，但在 CIELAB 颜色空间中为 134.39 度。

CSS <hue> - 不同色彩空间中的色调

以下示例演示了在不同颜色空间中使用 <hue> 数据类型：


<html>
<head>
<style> 	
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 padding: 5px;
	 	 	 display: inline-block;
	 	}
	 	.hsl {
	 	 	 background-color:hsl(50 100% 50%);
	 	}
	 	.hwb {
	 	 	 background-color: hwb(50 0% 0%);
	 	}
	 	.oklch {
	 	 	 background-color: oklch(0.9 0.2 3);
	 	}
	 	.lch {
	 	 	 background-color: lch(80 150 20);
	 	}
</style>
</head>
<body>
	 	<div class="hsl">hsl</div>
	 	<div class="hwb">hwb</div>
	 	<div class="oklch">oklch</div>
	 	<div class="lch">lch</div>
</body>
</html>

CSS <hue> - 更改颜色的色调

以下示例演示了 <hue> 数据类型的使用，其中颜色的 hue 以不同程度的变化：


<html>
<head>
<style> 	
	 	div {
	 	 	 width: 80px;
	 	 	 height: 80px;
	 	 	 border: 2px solid black;
	 	 	 padding: 5px;
	 	 	 display: inline-block;
	 	}
	 	.hsl-0 {
	 	 	 background-color:hsl(0 100% 50%);
	 	}
	 	.hsl-30 {
	 	 	 background-color:hsl(30 100% 50%);
	 	}
	 	.hsl-60 {
	 	 	 background-color:hsl(60 100% 50%);
	 	}
	 	.hsl-90 {
	 	 	 background-color:hsl(90 100% 50%);
	 	}
	 	.hsl-180 {
	 	 	 background-color:hsl(180 100% 50%);
	 	}
	 	.hsl-200 {
	 	 	 background-color:hsl(200 100% 50%);
	 	}
	 	.hsl-270 {
	 	 	 background-color:hsl(270 100% 50%);
	 	}
	 	.hsl-360 {
	 	 	 background-color:hsl(360 100% 50%);
	 	}
</style>
</head>
<body>
	 	<div class="hsl-0">hsl-0deg</div>
	 	<div class="hsl-30">hsl-30deg</div>
	 	<div class="hsl-60">hsl-60deg</div>
	 	<div class="hsl-90">hsl-90deg</div>
	 	<div class="hsl-180">hsl-180deg</div>
	 	<div class="hsl-200">hsl-200deg</div>
	 	<div class="hsl-270">hsl-270deg</div>
	 	<div class="hsl-360">hsl-360deg</div>
</body>
</html>

打印本页