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>

列印頁面