English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство по CSS

CSS @RULES

Полный список свойств CSS

Функция hsl() CSS

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

CSS функция

Онлайн пример

Определение цвета HSL:

<!DOCTYPE html>
<title>Основной учебник (oldtoolbag.com)</title>　
<style>
body {
　　　　background: hsl(30, 100%, 50%);
　　　　color: hsl(30, 100%, 75%);
　　　　font-size: 1.3em;
　　　　}
</style>
<h1>Down in Africa</h1>
<p>Нужно потратить время на то, что мы никогда не делали...</p>
Проверьте, посмотрите ‹/›

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

Функция hsl() использует тон, сатурацию и яркость для определения цвета.

HSL - тон, сатурация, яркость (на английском: Hue, Saturation, Lightness).

  • Тон (H)Это базовое свойство цвета, то, что обычно называют названием цвета, например, красный, желтый и т.д.

  • Сатурация (S)Это степень чистоты цвета, чем выше, тем чище цвет, а низкий уровень постепенно становится серым, значения в диапазоне 0-100%.

  • Яркость (L)Увеличение яркости 0-100%, цвет будет меняться в сторону белого; уменьшение яркости, цвет будет меняться в сторону черного.

HSL - это способ представления точки в цилиндрической системе координат, используемой в модели цвета RGB. Эти два способа стремятся сделать представление цвета более直观, чем геометрическая структура RGB, основанная на координатах Кардано.

Поддерживаемая версия: CSS3

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

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

Функция




hsl()1.09.01.03.19.5

Грамматика CSS

hsl(hue, saturation, lightness)
ЗначениеОписание
ЦветОпределение цвета (0 до 360) - 0 (или 360) как красного, 120 как зелёного, 240 как синего
НасыщенностьОпределение насыщенности; 0% как серого, 100% как полного цвета
ЯркостьОпределение яркости 0% как тёмного, 50% как обычного, 100% как белого

Пример изменения цвета

На следующем графике, у всех образцов одинаковые тон и亮度. Единственное различие - насыщенность.

hsl(240, 100%, 50%)
hsl(240, 90%, 50%)
hsl(240, 80%, 50%)
hsl(240, 70%, 50%)
hsl(240, 60%, 50%)
hsl(240, 50%, 50%)
hsl(240, 40%, 50%)
hsl(240, 30%, 50%)
hsl(240, 20%, 50%)
hsl(240, 10%, 50%)
hsl(240, 0%, 50%)

На следующем рисунке, у всех образцов одинаковые оттенок и насыщенность. Единственное различие - уровень яркости.

hsl(240, 100%, 100%)
hsl(240, 100%, 90%)
hsl(240, 100%, 80%)
hsl(240, 100%, 70%)
hsl(240, 100%, 60%)
hsl(240, 100%, 50%)
hsl(240, 100%, 40%)
hsl(240, 100%, 30%)
hsl(240, 100%, 20%)
hsl(240, 100%, 10%)

CSS функция

Правило @charset CSSФункции CSS