hsl()

Базовая информация Широко доступно

Эта функция хорошо укоренилась и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Примечание: hsla() функциональная запись является псевдонимом для hsl(). Они полностью эквивалентны. Рекомендуется использовать hsl().

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

Попробуйте

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

Синтаксис

/* 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 #0000FF 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()/hsla() также можно записать в устаревшем формате, в котором все значения разделены запятыми, например, hsl(120, 75%, 25%) или hsla(120deg, 75%, 25%, 0.8). Значение none не допускается в устаревшем синтаксисе с запятыми, deg значения оттенка необязательно, а единицы % требуются для значений насыщенности и светлоты.

Значения

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

Синтаксис абсолютного значения

hsl(H S L[ / A])

Параметры следующие:

H: Значение <number>, <angle> или ключевое слово none (эквивалентное 0deg в этом случае), представляющее угол оттенка цвета.

Примечание: Углы, соответствующие определённым оттенкам, различаются в цветовых пространствах 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%. Если указано, значение предваряется косой чертой (/).

Примечание: См. Отсутствующие компоненты цвета для получения дополнительной информации об эффекте none.

Примечание: Абсолютные hsl() цвета сериализуются в значения rgb(). Значения компонентов красного, зелёного и синего цветов могут быть округляемы при сериализации.

Синтаксис относительного значения

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

Параметры следующие:

from <color>: Ключевое слово from всегда включается при определении относительного цвета, за которым следует значение <color>, представляющее цвет-источник. Это исходный цвет, на основе которого строится относительный цвет. Цвет-источник может быть любым допустимым значением синтаксиса <color>, включая другой относительный цвет.
H: Значение <number>, <angle> или ключевое слово none (эквивалентное 0deg в этом случае), представляющее угол оттенка выходного цвета.
S: Значение <percentage> или ключевое слово none (эквивалентное 0% в этом случае). Это значение представляет насыщенность выходного цвета. Здесь 100% полностью насыщен, а 0% полностью ненасыщен (серый).
L: Значение <percentage> или ключевое слово none (эквивалентное 0% в этом случае). Это значение представляет светлоту выходного цвета. Здесь 100% — белый, 0% — чёрный, а 50% — «нормальный».
A Необязательно: Значение <alpha-value>, представляющее значение канала альфа выходного цвета, где число 0 соответствует 0% (полностью прозрачный), а 1 соответствует 100% (полностью непрозрачный). Кроме того, можно использовать ключевое слово none для явного указания отсутствия канала альфа. Если значение канала A не указано явно, оно по умолчанию равно значению канала альфа цвета-источника. Если указано, значение предваряется косой чертой (/).

Примечание: Для полного охвата всего спектра видимых цветов выходные значения относительных hsl() цветовых функций сериализуются в color(srgb). Это означает, что запрос значения выходного цвета через свойство HTMLElement.style или метод CSSStyleDeclaration.getPropertyValue() возвращает выходной цвет в виде значения color(srgb ...).

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

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

Значение h разрешается до значения <number> между 0 и 360, включительно, которое представляет значение угла оттенка цвета-источника.
Значения 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)

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

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

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

В этом случае выходной цвет — sRGB-эквивалент color() цвета hsl(240 60% 70%): 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 для выходного цвета на значения канала hsl() эквивалента цвета-источника H — 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). Выполняются вычисления calc() для значений H, S, L, и A, и конечный цвет вывода эквивалентен 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))

Примечание: Поскольку значения каналов исходного цвета преобразуются в <number> значения, при использовании их в вычислениях необходимо добавлять числа, даже в тех случаях, когда канал обычно принимает <percentage>, <angle>, или другие типы значений. Добавление <percentage> к <number>, например, не работает.

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

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  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(), так как обе работают с углами.

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%.

CSS

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

/* As per the spec, s and l values should resolve to a number between 0-100
   However, Chrome 121+ incorrectly resolves them to numbers between 0-1
   hence currently using calculations like l + 0.2 instead of l + 20 */

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

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

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

/* Use @supports to add in support for old syntax that requires % units to
   be specified in lightness calculations. This is required for
   Safari 16.4+ */
@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);
}

Результат

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

Спецификация
CSS Color Module Level 5 # relative-HSL
CSS Color Module Level 4 # the-hsl-notation

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`hsl`	1	12	1	9.5	3.1	18	4	10.1	2	1.0	≤37
`alpha_parameter`	65	79	52	52	12.1	65	52	47	12.2	9.0	65
`mixed_type_parameters`	121	121	122	107	Нет	121	122	81	Нет	25.0	121
`relative_syntax`	119 `s` и `l` значения каналов неправильно преобразуются в числа от 0 до 1 вместо 0 до 100. В результате для вычислений значений каналов необходимо задавать `s` и `l` в виде десятичных процентов (например, 0,2 для 20%).	119 `s` и `l` значения каналов неправильно преобразуются в числа от 0 до 1 вместо 0 до 100. В результате для вычислений значений каналов необходимо задавать `s` и `l` в виде десятичных процентов (например, 0,2 для 20%).	128	105 `s` и `l` значения каналов неправильно преобразуются в числа от 0 до 1 вместо 0 до 100. В результате для вычислений значений каналов необходимо задавать `s` и `l` в виде десятичных процентов (например, 0,2 для 20%).	16.4 Реализация основана на более старой версии спецификации. В результате вычисления со значениями каналов работают некорректно, требуя указания значений с единицами (`deg` для `h`, `%` для `s` и `l`).	119 `s` и `l` значения каналов неправильно преобразуются в числа от 0 до 1 вместо 0 до 100. В результате для вычислений значений каналов необходимо задавать `s` и `l` в виде десятичных процентов (например, 0,2 для 20%).	128	79 `s` и `l` значения каналов неправильно преобразуются в числа от 0 до 1 вместо 0 до 100. В результате для вычислений значений каналов необходимо задавать `s` и `l` в виде десятичных процентов (например, 0,2 для 20%).	16.4 Реализация основана на более старой версии спецификации. В результате вычисления со значениями каналов работают некорректно, требуя указания значений с единицами (`deg` для `h`, `%` для `s` и `l`).	25.0 `s` и `l` значения каналов неправильно преобразуются в числа от 0 до 1 вместо 0 до 100. В результате для вычислений значений каналов необходимо задавать `s` и `l` в виде десятичных процентов (например, 0,2 для 20%).	119 `s` и `l` значения каналов неправильно преобразуются в числа от 0 до 1 вместо 0 до 100. В результате для вычислений значений каналов необходимо задавать `s` и `l` в виде десятичных процентов (например, 0,2 для 20%).
`space_separated_parameters`	65	79	52	52	12.1	65	52	47	12.2	9.0	65

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl