<hue>

Оттенок может быть либо <angle>, либо <number>.

<angle>

Угол, выраженный в градусах, градиантах, радианах или оборотах с использованием deg, grad, rad, или turn, соответственно.

<number>

Вещественное число, представляющее градусы угла оттенка.

Поскольку оттенок является периодическим, <hue> нормализуется к диапазону [0deg, 360deg). Он неявно циклически повторяется так, что 480deg эквивалентно 120deg, -120deg эквивалентно 240deg, -1turn эквивалентно 1turn, и так далее.

Цветовой круг выше показывает оттенки под всеми углами в цветовом пространстве sRGB цветовое пространство. В частности, красный находится под углом 0deg, жёлтый под углом 60deg, лимонный под углом 120deg, голубой под углом 180deg, синий под углом 240deg, и пурпурный под углом 300deg.

Углы, соответствующие определённым оттенкам, различаются в зависимости от цветового пространства. Например, угол оттенка зелёного цвета в sRGB составляет 120deg в цветовом пространстве sRGB, но 134.39deg в цветовом пространстве CIELAB.

В следующей таблице перечислены типичные цвета под разными углами в цветовых пространствах sRGB (используется hsl() и hwb()), CIELAB (используется lch()) и Oklab (используется oklch()):

Значения оттенка интерполируются как значения <angle>, и алгоритм интерполяции по умолчанию — shorter. В некоторых функциях CSS, связанных с цветом, это можно переопределить компонентом <hue-interpolation-method>.

<hue> = 
  <number>  |
  <angle>   

В следующем примере показано, как изменяется значение hue функционального обозначения hsl() на цвет.

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

#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

<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

[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);
}

Результат

• <color>
• <hue-interpolation-method>