HTML HSL и HSLA цвета
HSL обозначает три компонента, используемые для определения цвета: оттенок (Hue), насыщенность (Saturation) и яркость (Lightness). Этот метод представления цветов основан на восприятии человека и является интуитивно понятным способом работы с цветами через визуализацию положения цвета на цветовом круге, его интенсивность и уровень освещения.
Значение компонентов HSL
Цвета в веб-разработке часто задаются с использованием формата HSL следующим образом:
hsl(оттенок, насыщенность%, яркость%)Давайте подробно рассмотрим каждый компонент.
Оттенок (Hue)
Это основной параметр, определяющий позицию цвета на цветовом круге. Представляется углом от 0° до 360°, где:
- 0° соответствует красному цвету,
- 120° — зелёному,
- 240° — синему.
Этот показатель позволяет легко менять цветовой тон без изменения насыщенности и уровня света.
Насыщенность (Saturation)
Показатель насыщенности определяет чистоту цвета относительно нейтральной шкалы серых оттенков. Выражается в процентах:
- Если насыщенность равна 0%, мы получаем серый цвет разной светлости (зависит от параметра яркости).
- Максимальное значение насыщенности (100%) означает наиболее яркий и чистый цвет.
Яркость (Lightness)
Параметр яркости характеризует общий уровень осветления или затемнения цвета. Она тоже измеряется в процентах:
- Значение яркости 0% даёт абсолютно чёрный цвет вне зависимости от оттенка и насыщенности.
- При значении 50% достигается нормальный уровень средней освещённости.
- А вот максимальное значение яркости (100%) выдаёт чисто-белый цвет независимо от остальных двух показателей.
Таким образом, комбинируя эти три значения, можно создать любой нужный цвет, используя всего лишь одно простое правило. Формат HSL особенно удобен для дизайнеров и разработчиков интерфейсов благодаря своей наглядности и легкости восприятия человеком.
Примеры:
Попробуйте создать собственный оттенок:
HUE
SATURATION
LIGHTNESS
Оттенки серого
Оттенки серого можно задать, установив оттенок и насыщенность на 0, а яркость изменяя от 0% до 100% для получения более темных или светлых оттенков.
Пример:
Формат HSLA — расширенная версия HSL
HSLA — это расширение HSL с добавлением альфа-канала (прозрачности). Формат HSLA:
hsla(оттенок, насыщенность, яркость, альфа)Альфа-канал принимает значения от 0.0 (полностью прозрачный) до 1.0 (непрозрачный).
Примеры:
Поэкспериментируйте с прозрачностью, задавая разные значения альфа:
HUE
SATURATION
LIGHTNESS
ALPHA
Цветовая модель HSL и HSLA предоставляет гибкий и интуитивно понятный способ задания цветов, что делает ее популярной в веб-разработке.