<hue>

語法

<hue> 可以是 <angle> 或 <number>。

值

<angle>: 使用 deg、grad、rad 或 turn 分別表示以度、梯度、弧度或週數表示的角度。
<number>: 一個實數，表示色相角的度數。

由於 <angle> 是週期性的，<hue> 會被歸一化到 [0deg, 360deg) 的範圍。它會隱式地環繞，例如 480deg 與 120deg 相同，-120deg 與 240deg 相同，-1turn 與 1turn 相同，以此類推。

描述

An sRGB color wheel

上面的色輪顯示了 sRGB 色彩空間中所有角度的色相。特別是，紅色在 0deg，黃色在 60deg，黃綠色在 120deg，青色在 180deg，藍色在 240deg，洋紅色在 300deg。

不同色彩空間中，對應特定色相的角度也不同。例如，sRGB 綠色在 sRGB 色彩空間中的色相角是 120deg，但在 CIELAB 色彩空間中是 134.39deg。

下表列出了 sRGB（由 hsl() 和 hwb() 使用）、CIELAB（由 lch() 使用）和 Oklab（由 oklch() 使用）色彩空間中不同角度的典型顏色

	0°	60°	120°	180°	240°	300°
sRGB
CIELAB
Oklab

`<hue>` 值的插值

<hue> 值以 <angle> 值的形式進行插值，預設插值演算法是 shorter。在某些與顏色相關的 CSS 函式中，這可以透過 <hue-interpolation-method> 元件進行覆蓋。

正式語法

<hue> = 
  <number>  |
  <angle>

示例

使用滑塊改變顏色的色相

以下示例顯示了改變 hsl() 函式符號的 hue 值對顏色的影響。

HTML

html

<input type="range" min="0" max="360" value="0" id="hue-slider" />
<p>Hue: <span id="hue-value">0deg</span></p>
<div id="box"></div>

CSS

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}
p {
  font-family: sans-serif;
}
span {
  font-family: monospace;
  background: rgb(0 0 0 / 10%);
  padding: 3px;
}
#hue-slider {
  width: 90%;
}

css

#box {
  background-color: hsl(0 100% 50%);
}

JavaScript

js

const hue = document.querySelector("#hue-slider");
const box = document.querySelector("#box");
hue.addEventListener("input", () => {
  box.style.backgroundColor = `hsl(${hue.value} 100% 50%)`;
  document.querySelector("#hue-value").textContent = `${hue.value}deg`;
});

結果

在不同色彩空間中近似紅色色相

以下示例顯示了在不同色彩空間中相似的紅色。為了可讀性，lch() 和 oklch() 函式中的值已進行四捨五入。

HTML

html

<div data-color="hsl-red">hsl()</div>
<div data-color="hwb-red">hwb()</div>
<div data-color="lch-red">lch()</div>
<div data-color="oklch-red">oklch()</div>

CSS

css

[data-color="hsl-red"] {
  /* hsl(<hue> <saturation> <lightness>) */
  background-color: hsl(0 100% 50%);
}
[data-color="hwb-red"] {
  /* hwb(<hue> <whiteness> <blackness>) */
  background-color: hwb(0 0% 0%);
}
[data-color="lch-red"] {
  /* lch(<lightness> <chroma> <hue>) */
  background-color: lch(50 150 40);
}
[data-color="oklch-red"] {
  /* oklch(<lightness> <chroma> <hue>) */
  background-color: oklch(0.6 0.4 20);
}

div {
  font-family: monospace;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
  display: inline-block;
}

結果

規範

規範
CSS 顏色模組第四版 # typedef-hue

語法

值

描述

`<hue>` 值的插值

正式語法

示例

使用滑塊改變顏色的色相

HTML

CSS

JavaScript

結果

在不同色彩空間中近似紅色色相

HTML

CSS

結果

規範

瀏覽器相容性

css.types.color.hsl

css.types.color.hwb

css.types.color.lch

css.types.color.oklch

另見

幫助改進 MDN