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>
