HSL-цвета в CSS

Значение HSL

HSL означает оттенок (hue), насыщенность (saturation) и светлоту (lightness).

Записывается как hsl(hue, saturation, lightness).

Оттенок — это градус на цветовом круге от 0 до 360: 0 (или 360) — красный, 120 — зелёный, а 240 — синий. Насыщенность — это проценты, где 0% — серый, а 100% — полный цвет. Светлота также в процентах, где 0% — чёрный, 50% — обычный, а 100% — белый.

Цвета HSL

Шесть цветов, записанных как значения hsl().

Prompt
HTML-страница, показывающая несколько цветов, записанных как значения hsl(). Создайте шесть заголовков с цветами фона: hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(147, 50%, 47%), hsl(300, 76%, 72%), hsl(39, 100%, 50%) и hsl(248, 53%, 58%). Подпишите каждый его значением.
Результат: полная HTML-страница

Насыщенность

Насыщенность — это интенсивность цвета.

100% — чистый цвет без серого. 50% — наполовину серый, но цвет всё ещё виден. 0% — полностью серый, цвет исчезает.

Пример

Один и тот же оттенок и светлота с постепенно уменьшающейся насыщенностью.

Prompt
HTML-страница, показывающая, как насыщенность меняет цвет в hsl(). Оставьте оттенок 0 и светлоту 50%, и понижайте насыщенность шаг за шагом: hsl(0, 100%, 50%), hsl(0, 80%, 50%), hsl(0, 60%, 50%), hsl(0, 40%, 50%), hsl(0, 20%, 50%) и hsl(0, 0%, 50%). Используйте их как фон заголовков и подпишите каждый.
Результат: полная HTML-страница

Светлота

Светлота задаёт, сколько света имеет цвет. 0% — нет света (чёрный), 50% — обычный, а 100% — полный свет (белый).

Пример

Один и тот же оттенок и насыщенность с постепенно увеличивающейся светлотой.

Prompt
HTML-страница, показывающая, как светлота меняет цвет в hsl(). Оставьте оттенок 0 и насыщенность 100%, и повышайте светлоту шаг за шагом: hsl(0, 100%, 0%), hsl(0, 100%, 25%), hsl(0, 100%, 50%), hsl(0, 100%, 75%), hsl(0, 100%, 90%) и hsl(0, 100%, 100%). Используйте их как фон заголовков и подпишите каждый.
Результат: полная HTML-страница

Оттенки серого

Оттенки серого получаются установкой оттенка и насыщенности в 0 и изменением только светлоты от 0% до 100%.

Пример

Оттенок и насыщенность остаются на 0, пока светлота меняется от тёмной к светлой.

Prompt
HTML-страница, показывающая оттенки серого, полученные с помощью HSL. Оставьте оттенок и насыщенность равными 0, и повышайте светлоту шаг за шагом: hsl(0, 0%, 0%), hsl(0, 0%, 24%), hsl(0, 0%, 47%), hsl(0, 0%, 71%), hsl(0, 0%, 94%) и hsl(0, 0%, 100%). Используйте их как фон заголовков и подпишите каждый.
Результат: полная HTML-страница

Значение HSLA

HSLA добавляет альфа-канал к HSL, который задаёт прозрачность цвета.

Записывается как hsla(hue, saturation, lightness, alpha). Альфа — число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Пример

Один и тот же цвет с возрастающими значениями альфа — от полностью прозрачного до полностью непрозрачного.

Prompt
HTML-страница, показывающая один и тот же цвет HSL при разных уровнях альфа-канала (непрозрачности) с помощью hsla(). Создайте шесть заголовков с цветом фона hsla(9, 100%, 64%, A), где A принимает значения 0, 0.2, 0.4, 0.6, 0.8 и 1. Подпишите каждый так, чтобы возрастание непрозрачности было понятно.
Результат: полная HTML-страница