CSS 数据类型 <hue> 用于描述颜色的色调角。接受色调作为单个值的颜色函数使用此数据类型。其中一些函数是:hsl()、hwb(), lch() 和 oklch() .
不同的颜色为 0 度时的红色、60 度时的黄色、120 度时的石灰色、180 度时的青色、240 度时的蓝色和 300 度时的洋红色
可能的值
数据类型 <hue> 可以具有以下值之一:
<angle>:指定分别以 deg、grad、rad 或turn 表示的角度值.
<number>:指定一个数字，表示色调角的度数。
由于 <angle> 是周期性的，因此<hue> 的值标准化为范围 [0deg, 360deg]，例如 480deg 等于 120deg，-120deg 等于 240deg，-1turn 等于 1turn，依此类推。
语法
<hue> = <angle> | <number> 注意:根据颜色空间，角度对应于特定的色调。例如，sRGB 绿色的色相角在 sRGB 色彩空间中为 120deg，但在 CIELAB 色彩空间中为 134.39deg。
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> 数据的使用颜色色调发生不同程度变化的类型:
<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>