Шестнадцатеричный формат цвета и RGB(A) широко используются верстальщиками, но они не являются интуитивно понятными или удобными для чтения, не говоря уже о настройке. Когда требуется подобрать контрастный цвет или подобрать множественное сочетание, приходится прибегать к графическим интерфейсам, что не очень удобно и точно. Но в CSS существует еще одна возможность определить цвет – HSL. Есть великолепная статья Marcin Wichary о преимуществах этого формата.
HSL == Hue, Saturation, Lightness
Вот так выглядит синтаксис CSS-функции hsl():
color: hsl(33, 80%, 50%);Первый параметр – это тон, второй – насыщенность, а третий – светлота. Есть также вариант hsla(), в котором добавляется четвертый параметр – непрозрачность цвета.
Лучший способ понять HSL – обратиться к цветовому кругу.
Тон (hue)
Параметр Hue – это угол на цветовом круге. Красный цвет соответствует 0 градусов, а остальные – от 0 до 360. Единицы измерения в функции hsl() указывать не нужно.
Насыщенность (saturation)
Цвета могут быть яркими (насыщенными) или тусклыми. Чем меньше цвета, тем более серый оттенок получается. Параметр Saturation принимает значения от 0% (серый) до 100% (чистый цвет).
Светлота (lightness)
Функция HSL добавляет к цвету белый или черный, чтобы изменить его. Белый делает результат светлее, а черный – темнее. Значение параметра Lightness ниже 50% означает, что добавляется черный цвет, выше – белый. Тон при этом остается неизменным.
При определении цвета в формате HSL, вы выбираете его на цветовом кругу в виде угла между 0 и 360. Установив насыщенность на 100% и осветление на 50%, вы получите чистейшую форму этого цвета. Настройка становится очень интуитивной.
HSL и цветовые сочетания
Использование цветового круга дает много преимуществ. Например, гораздо проще подбирать сочетания.
Дополнительные (комплементарные) цвета находятся напротив друг друга, поэтому все, что вам нужно сделать в CSS, это добавить 180° к значению оттенка.
--primary-color: hsl(257, 26%, 42%);
--complementary-color: hsl(437, 26%, 42%); // 257 + 180 === 257 - 180Вы, вероятно, заметили, что в примере значение тона превышает 360 градусов. Функция hsl() достаточно умна, чтобы сделать еще один оборот круга и начать считать угол заново.
Существует очень много различных цветовых сочетаний (или схем). Например, триады можно получить добавляя (или вычитая 120 градусов). Аналогичные цвета отделены 30 градусами. Вы также можете создавать монохроматические схемы с единственным основным оттенком и настраивать его яркость.
Перевод
Вы легко можете перевести все цвета, используемые в вашем проекте, в формат HSL, используя плагины для редактора кода.
HSL и CSS custom properties
Пользовательские свойства CSS (CSS-переменные) необычайно удобны для создания нескольких тем.
- Они могут быть встроены в атрибут
style, тегstyleили в отдельный стилевой файл, значит, не нужно создавать для каждой темы отдельные стили. - Они доступны из javascript-кода во время выполнения, следовательно могут быть заменены на лету без обновления страницы.
Можно определить набор цветов для каждой темы, а затем “активировать” тему, обновив значение data-атрибута или класса у корневого элемента.
Переменные CSS могут выступать в качестве значения внутри другой переменной. Также они отлично сочетаются с функцией calc(). Вместе с hsl() это дает огромные возможности для создания и манипулирования цветовой темой сайта.
Создание разных тем с использованием переменных CSS и HSL может выглядеть примерно так:
html {
/* ...какие-то другие стили... */
--hue: 257;
--complimentary-hue: calc( var(--hue) - 180);
/* Стили совершенно случайные, просто для примера */
--background: hsl(var(--hue), 26%, 42%);
--background-dark: hsl(var(--hue), 26%, 28%);
--button-background: hsl(var(--complimentary-hue), 26%, 55%);
/* etc. */
}
html[data-theme='green'] {
--hue: 128;
}
html[data-theme='pink'] {
--hue: 313;
}Вы можете организовать код десятками различных способов, все зависит от конкретного проекта и потребностей. Это просто пример, демонстрирующий, как формат HSL в комбинации с CSS-переменными может облегчить работу с цветом.
Полезные ссылки
И напоследок
Github также использует hsl. Вместо прежнего тусклого серого цвета они взяли синий, затемнили и обесцветили его, уменьшив светлоту. Получилось очень здорово!
0 комментариев