<hue>

<hue> CSS 数据类型表示颜色的色相角。它用于接受以单个值表示的色相的颜色函数，特别是 hsl()、hwb()、lch() 和 oklch() 函数表示法。

语法

<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

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 颜色模块 Level 4 # typedef-hue

<hue>

语法

值

描述

`<hue>` 值的插值

正式语法

示例

使用滑块更改颜色的色相

HTML

CSS

JavaScript

结果

在不同的颜色空间中近似红色色相

HTML

CSS

结果

规范

浏览器兼容性

css.types.color.hsl

css.types.color.hwb

css.types.color.lch

css.types.color.oklch

另请参阅