Функция CSS `hsl()`

Функциональная нотация hsl() задаёт цвет в sRGB-цветовом пространстве на основе его компонентов цветового тона, насыщенности и светлоты. Необязательный компонент альфа задаёт прозрачность цвета.

Дополнительные цвета с помощью hsl() можно определить, прибавив 180 градусов к значению цветового тона или вычтя их из него, поскольку такие цвета расположены на одном диаметре цветового круга. Например, если угол цветового тона цвета равен 10deg, угол цветового тона дополнительного цвета равен 190deg.

Попробуйте

background: hsl(50 80% 40%);

background: hsl(150deg 30% 60%);

background: hsl(0.3turn 60% 45% / 0.7);

background: hsl(0 80% 50% / 25%);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

Синтаксис

/* Absolute values */
hsl(120deg 75% 25%)
hsl(120 75 25) /* deg and % units are optional */
hsl(120deg 75% 25% / 60%)
hsl(none 75% 25%)

/* Relative values */
hsl(from green h s l / 0.5)
hsl(from #123456 h s calc(l + 20))
hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30))

/* Legacy 'hsla()' alias */
hsla(120deg 75% 25% / 60%)

/* Legacy format */
hsl(120, 75%, 25%)
hsl(120deg, 75%, 25%, 0.8)

Значения

Ниже описаны допустимые значения для абсолютных и относительных цветов.

Синтаксис абсолютных значений

hsl(H S L[ / A])

Параметры перечислены ниже:

H

<number>, <angle> или ключевое слово none (в данном случае эквивалентное 0deg), обозначающее угол <hue> цвета.

Примечание: Углы, соответствующие определённым цветовым тонам, различаются в цветовых пространствах sRGB (используется в hsl() и hwb()), CIELAB (используется в lch()) и Oklab (используется в oklch()). Подробнее см. на справочной странице <hue>, где также приведены примеры.

S

<percentage> или ключевое слово none (в данном случае эквивалентное 0%). Это значение обозначает насыщенность цвета. Здесь 100% означает полную насыщенность, а 0% — полное отсутствие насыщенности (серый цвет).

L

<percentage> или ключевое слово none (в данном случае эквивалентное 0%). Это значение обозначает светлоту цвета. Здесь 100% означает белый цвет, 0% — чёрный, а 50% — «нормальный».

A Необязательно

<alpha-value>, обозначающее значение альфа-канала цвета: число 0 соответствует 0% (полностью прозрачный), а 1 — 100% (полностью непрозрачный). Кроме того, ключевое слово none можно использовать, чтобы явно указать отсутствие альфа-канала. Если значение канала A не указано явно, по умолчанию оно равно 100%. Если значение задано, перед ним ставится косая черта (/).

Синтаксис относительных значений

hsl(from <color> H S L[ / A])

Параметры перечислены ниже:

from <color>

При определении относительного цвета всегда указывается ключевое слово from, за которым следует значение color, представляющее исходный цвет. Это исходный цвет, на основе которого задаётся относительный цвет. Исходным цветом может быть любой допустимый синтаксис color, включая другой относительный цвет.

H

<number>, <angle> или ключевое слово none (в данном случае эквивалентное 0deg), обозначающее угол <hue> выходного цвета.

S

<percentage> или ключевое слово none (в данном случае эквивалентное 0%). Это значение обозначает насыщенность выходного цвета. Здесь 100% означает полную насыщенность, а 0% — полное отсутствие насыщенности (серый цвет).

L

<percentage> или ключевое слово none (в данном случае эквивалентное 0%). Это значение обозначает светлоту выходного цвета. Здесь 100% означает белый цвет, 0% — чёрный, а 50% — «нормальный».

A Необязательно

<alpha-value>, обозначающее значение альфа-канала выходного цвета: число 0 соответствует 0% (полностью прозрачный), а 1 — 100% (полностью непрозрачный). Кроме того, ключевое слово none можно использовать, чтобы явно указать отсутствие альфа-канала. Если значение канала A не указано явно, по умолчанию оно равно значению альфа-канала исходного цвета. Если значение задано, перед ним ставится косая черта (/).

Определение компонентов каналов выходного цвета для относительного цвета

При использовании синтаксиса относительных цветов внутри функции hsl() браузер преобразует исходный цвет в эквивалентный цвет HSL (если он ещё не задан в этом формате). Цвет определяется тремя отдельными значениями цветовых каналов — h (цветовой тон), s (насыщенность) и l (светлота), — а также значением альфа-канала (alpha). Эти значения каналов доступны внутри функции и могут использоваться при задании значений каналов выходного цвета:

• Значение h преобразуется в <number> в диапазоне от 0 до 360 включительно, представляющее значение угла <hue> исходного цвета.
• Значения s и l преобразуются в <number> в диапазоне от 0 до 100 включительно, где 100 эквивалентно 100%.
• Значение alpha преобразуется в <number> в диапазоне от 0 до 1 включительно.

При определении относительного цвета каналы выходного цвета можно задать несколькими способами. Ниже мы рассмотрим несколько примеров.

В первых двух примерах ниже используется синтаксис относительных цветов. Однако первый пример задаёт тот же цвет, что и исходный, а второй — цвет, вовсе не основанный на исходном. По сути, они не создают относительные цвета! Вряд ли вы будете использовать такие варианты в реальном коде; вероятно, вместо этого вы просто укажете абсолютное значение цвета. Эти примеры приведены как отправная точка для изучения синтаксиса относительных цветов hsl().

Начнём с исходного цвета rgb(255 0 0) (эквивалентного hsl(0 100% 50%)). Следующая функция задаёт тот же цвет, что и исходный: она использует значения каналов h, s и l исходного цвета (0, 100% и 50%) в качестве значений каналов выходного цвета:

hsl(from rgb(255 0 0) h s l)

Выходной цвет этой функции — эквивалент hsl(0 100% 50%) в sRGB color(): color(srgb 1 0 0).

В следующей функции для значений каналов выходного цвета используются абсолютные значения, в результате чего получается совершенно другой цвет, не основанный на исходном:

hsl(from rgb(255 0 0) 240 60% 70%)

В этом случае выходной цвет — эквивалент hsl(240 60% 70%) в sRGB color(): color(srgb 0.52 0.52 0.88).

Следующая функция создаёт относительный цвет на основе исходного:

hsl(from rgb(255 0 0) h 30% 60%)

Этот пример:

• Преобразует исходный цвет (rgb(255 0 0)) в эквивалент hsl() (hsl(0 100% 50%)).
• Задаёт для канала H выходного цвета значение канала H исходного цвета в представлении hsl() — 0.
• Задаёт новые значения каналов S и L выходного цвета, не основанные на исходном цвете: соответственно 30% и 60%.

Итоговый выходной цвет эквивалентен hsl(0 30% 60%) в цветовом пространстве sRGB — color(srgb 0.72 0.48 0.48).

В рассмотренных выше примерах альфа-каналы исходного и выходного цветов не указывались явно. Если альфа-канал выходного цвета не указан, по умолчанию он принимает то же значение, что и альфа-канал исходного цвета. Если альфа-канал исходного цвета не указан (и это не относительный цвет), по умолчанию он равен 1. Поэтому в приведённых выше примерах значения альфа-каналов исходного и выходного цветов равны 1.

Рассмотрим несколько примеров с заданными значениями альфа-каналов исходного и выходного цветов. В первом значение альфа-канала выходного цвета совпадает со значением исходного, а во втором задано другое значение, не связанное со значением альфа-канала исходного цвета.

hsl(from rgb(255 0 0 / 0.8) h s l / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

hsl(from rgb(255 0 0 / 0.8) h s l / 0.5)
/* Computed output color: color(srgb 1 0 0 / 0.5) */

В следующем примере исходный цвет rgb() снова преобразуется в представление hsl() — hsl(0 100% 50% / 0.8). К значениям H, S, L и A применяются вычисления calc(), а итоговый выходной цвет эквивалентен hsl(60 80% 30% / 0.7) в цветовом пространстве sRGB: color(srgb 0.72 0.72 0.08 / 0.7).

hsl(from rgb(255 0 0 / 0.8) calc(h + 60) calc(s - 20) calc(l - 10) / calc(alpha - 0.1))

Формальный синтаксис

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> = 
  <number> |
  <angle>

<alpha-value> = 
  <number> |
  <percentage>

Примеры

Использование hsl() с conic-gradient()

Функция hsl() хорошо сочетается с conic-gradient(), поскольку обе функции работают с углами.

<div></div>

CSS

div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360 100% 50%),
    hsl(315 100% 50%),
    hsl(270 100% 50%),
    hsl(225 100% 50%),
    hsl(180 100% 50%),
    hsl(135 100% 50%),
    hsl(90 100% 50%),
    hsl(45 100% 50%),
    hsl(0 100% 50%)
  );
  clip-path: circle(closest-side);
}

Результат

Использование относительных цветов с hsl()

В этом примере для трёх элементов <div> задаются разные цвета фона. Среднему элементу назначается исходный, неизменённый --base-color, а левому и правому — осветлённый и затемнённый варианты этого --base-color.

Эти варианты задаются с помощью относительных цветов: пользовательское свойство --base-color передаётся функции hsl(), а канал светлоты выходного цвета изменяется с помощью функции calc(), чтобы получить нужный эффект; цветовой тон и насыщенность остаются неизменными. Светлота осветлённого цвета увеличивается на 20%, а затемнённого — уменьшается на 20%.

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
}

#one {
  background-color: hsl(from var(--base-color) h s calc(l + 20));
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: hsl(from var(--base-color) h s calc(l - 20));
}

/* Use @supports to add in support for old syntax that requires % units to
   be specified in lightness calculations */
@supports (color: hsl(from red h s calc(l - 20%))) {
  #one {
    background-color: hsl(from var(--base-color) h s calc(l + 20%));
  }

  #three {
    background-color: hsl(from var(--base-color) h s calc(l - 20%));
  }
}

Результат

Результат выглядит так:

Устаревший синтаксис: значения, разделённые запятыми

Для обратной совместимости функция hsl() поддерживает форму, в которой все значения разделяются запятыми.

HTML

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: hsl(0 100% 50% / 50%);
}

div.comma-separated {
  background-color: hsl(0, 100%, 50%, 0.5);
}

Результат

Устаревший и современный синтаксис

В примере показано, что синтаксис hsla() является псевдонимом hsl(); оба варианта поддерживаются как в современном, так и в устаревшем синтаксисе (с разделением значений запятыми).

HTML

<div class="modern">HSL</div>
<div class="legacy">HSL</div>
<div class="modernWithAlpha">HSL</div>
<div class="modernHSLA">HSLA</div>
<div class="legacyHSLA">HSLA</div>

CSS

div {
  width: 100px;
  min-height: 50px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  display: flex;
  gap: 20px;
}

div.modern {
  background-color: hsl(90 80% 50%);
}

div.legacy {
  background-color: hsl(90, 80%, 50%);
}

div.modernWithAlpha {
  background-color: hsl(90 80% 50% / 50%);
}

div.modernHSLA {
  background-color: hsla(90 80% 50% / 50%);
}

div.legacyHSLA {
  background-color: hsla(90, 80%, 50%, 0.5);
}

Результат

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

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

См. также

• <hue> — тип данных
• Функции цвета lch() и hwb()
• Интерполяция цветового тона в color-mix()
• Список всех нотаций для цветов
• Инструмент преобразования форматов цвета
• Использование относительных цветов
• Модуль CSS Colors
• Инструмент выбора цвета от Lea Verou