Тип CSS `<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 и так далее.

Описание

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

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

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

Интерполяция значений <hue>

Значения <hue> интерполируются как значения <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

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%;
}

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

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

Результат

Спецификации

Совместимость с браузерами

См. также

• color
• <hue-interpolation-method>