Функция CSS hsl()

Определение и использование

CSS: hsl() Функция использует модель цвета hue-saturation-lightness (HSL) для указания цвета. Также можно добавить опциональный компонент alpha (представляющий прозрачность цвета).

Совет:HSL代表着色调 (Hue), насыщенность (Saturation) и亮度 (Lightness), и это способ圆柱坐标表示颜色.

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

Пример

Пример 1

Определение различных цветов HSL(A):

#p1 {background-color:hsl(120 100% 50%);} /* Зеленый */
#p2 {background-color:hsl(120 100% 75%);} /* Слабый зеленый */
#p3 {background-color:hsl(120 100% 25%);} /* Темно-зеленый */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Прозрачный темно-зеленый */
#p5 {background-color:hsl(120 60% 70%);} /* Мягкий зеленый */
#p6 {background-color:hsl(290 100% 50%);} /* Фиолетовый */
#p7 {background-color:hsl(290 60% 70%);} /* Мягкий фиолетовый */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Прозрачный мягкий фиолетовый */

Попробуйте сами

Пример 2

Старый синтаксис, разделенный запятыми:

#p1 {background-color:hsl(120, 100%, 50%);} /* Green */
#p2 {background-color:hsl(120, 100%, 75%);} /* Light green */
#p3 {background-color:hsl(120, 100%, 25%);} /* Dark green */
#p4 {background-color:hsl(120, 60%, 70%);} /* Soft green */
#p5 {background-color:hsl(290, 100%, 50%);} /* Purple */
#p6 {background-color:hsl(290, 60%, 70%);} /* Soft purple */

Попробуйте сами

Синтаксис CSS

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

hsl(hue saturation lightness / A)
Значение Описание
hue Обязателен. Определяет градус на цветовом круге (от 0 до 360) - 0 (или 360) - красный, 120 - зеленый, 240 - синий.
saturation

Обязателен. Определяет насыщенность цвета; 0% - серый, 100% - полутон (полная насыщенность).

Также можно использовать None (что равно 0%).
lightness

Обязателен. Определяет亮度 цвета; 0% - черный, 50% - нормальный, 100% - белый.

Также можно использовать None (что равно 0%).
/ A

Опционально. Значение канала alpha цвета (от 0% (или 0) - полностью прозрачный до 100% (или 100) -完全不 прозрачный).

Также можно использовать None (что означает отсутствие канала alpha).

Значение по умолчанию 100%.

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

hsl(from color hue saturation lightness / A)
Значение Описание
from color

С началом ключевого слова from, за которым следует значение цвета, представляющее исходный цвет.

Это исходный цвет, на котором основан относительный цвет.
hue Обязателен. Определяет градус на цветовом круге (от 0 до 360) - 0 (или 360) - красный, 120 - зеленый, 240 - синий.
saturation

Обязателен. Определяет насыщенность цвета; 0% - серый, 100% - полутон (полная насыщенность).

Также можно использовать None (что равно 0%).
lightness

Обязателен. Определяет亮度 цвета; 0% - черный, 50% - нормальный, 100% - белый.

Также можно использовать None (что равно 0%).
/ A

Опционально. Значение канала alpha цвета (от 0% (или 0) - полностью прозрачный до 100% (или 100) -完全不 прозрачный).

Также можно использовать None (что означает отсутствие канала alpha).

Значение по умолчанию 100%.

Технические детали

Версия: CSS3

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
с alpha Параметр hsl()
65 79 52 12.1 52
Параметры, разделенные пробелом
65 79 52 12.1 52

Соответствующие страницы

Урок:Цвет CSS HSL

См. также:Цвет CSS

См. также:Функция CSS hwb()

См. также:Функция CSS lab()

См. также:Функция CSS lch()

См. также:Функция oklab() в CSS

См. также:Функция oklch() в CSS