<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