CSS 数据类型 - <hue>

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>

打印页面