В течение длительного времени для работы с цветом в CSS многие верстальщики используют либо шестнадцатеричную систему HEX или RGB. И у каждой такой системы есть свои недочеты и настройки, свои преимущества и удобства, но бывают случаи, когда работать с ними не слишком-то удобно. Непросто становится быстро подобрать контрастный цвет или гармонично сочетающийся оттенок с имеющимися цветами в палитре. А если отойти от «стандарта» и попробовать использовать иной цветовой формат?

Как известно, в CSS их три: hex, rgb и hsl. Первый формат используется чаще, второй – умеренно, третий – редко. Но что именно он скрывает в себе? Для чего был создан? Функция hsl()появилась в CSS давно, но последние изменения датируются  июнем 2018 года, поэтому неудивительно, что её еще мало кто использует. Раньше и браузерами-то формат не особо поддерживался. В то же время в графических редакторах HSL и вариант HSB давно встречаются и многим знакомы.

Считается, что HSL лучше и реалистичнее передает цвета на экране. С его помощью можно даже подобрать те оттенки, которые в RGB настроить довольно сложно. Если же говорить об интуитивности формата, то смотря на значение hsl(), можно гораздо быстрее представить, о каком цвете идет речь и даже становится более понятным, зачем вообще нужно цветовое колесо, о котором мы неоднократно упоминали. Со значениями RGB сложнее – цвета смешиваются, образуя оттенки, поэтому волей-неволей, но приходится открывать тот же Photoshop и проверять/узнавать значение. Или использовать режим разработчика в браузере, о котором тоже рассказывали отдельно, поэтому останавливаться на нем уже не будем.

В то же время использование цветового формата HSL лучшим считается именно тогда, когда это действительно необходимо. Особенно, если дизайн сайта содержит обилие оттенков, переходов, градиентов и так далее. Но если вы используете черный и белый с серым или аналогичные «скромные» варианты, то HSL мало чем сможет вам помочь; не сможет он раскрыть своих возможностей.

Тон, насыщенность, светлота

Сразу оговоримся, что в аббревиатуре HSL иногда параметр Lightness переводят как Яркость или Светлость. Это несколько… некорректно, так как первое существует в отдельном формате цветов HSB (Brightness). Здесь  используется параметр Яркости (изменение в сторону черного), а в HSL (Lightness) – Светлота (изменение цвета в сторону белого). Светлость – более «разговорное» понятие. О разнице Яркости и Светлоты мы рассказывали отдельно.

В CSS функция hsl() выглядит так:

Три параметра в последовательности: тон, насыщенность, светлота (освещенность). Существует также и вариация функции вида hsla(). Разница с оригинальной в добавление альфа-канала (прозрачности).

Почему же формат HSL проще в понимании, в отличие от иных схем? Вспомним цветовое колесо. Его удобно запомнить и по нему легко ориентироваться. Так как это круг, то диаметр его 360 градусов. Стандартное колесо состоит из 12 цветов,  поэтому в градусном варианте выглядеть оно будет таким вот образом.

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

Тон

Тон – первый параметр – определяет цвет. То есть, это один из цветных треугольников. За начало отсчета взят красный цвет = 00 и он же 3600. После красного идет желтый цвет = 600, а значит, оранжевый находится между ними = 200/300/400. Аналогично и с другими цветами, и промежуточными оттенками.

Самый простой вариант для того, чтобы посмотреть и «поиграть» с цветами – режим разработчика в браузере. И вот как эти изменения тона выглядят при смене цвета текста с белого на желтый.

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

Второй параметр определяет тусклость или яркость (насыщение) выбранного цвета. Тусклость создается путем добавления серого, поэтому, чем его меньше, тем цвет чище, красочнее.

 Светлота

Суть работы формата HSL – в подкрашивании всех цветов белым. Если попробуете ввести разные значения в режиме разработчика, то заметите, что третий параметр изменяться будет всегда. Это напоминает работу с акварельными красками. Если требуется темный цвет – добавляется черный, если светлый – белый. Ориентироваться в данном параметре тоже несложно. При 50% – оттенок оригинальный, при 51% и далее – он становится светлее, при 49% и до 0 – темнее.

В теории цвета оттенок – смесь цвета с белым или черным. Тон получается путем смешивания с серым либо тонированием и затенением. Смешивание цвета с любым нейтральным (черный, серый, белый) уменьшает красочность и цветность, в то время как оттенок остается неизменным.

Таким образом, суть формата HSL в том, что оригинальный, чистый цвет – это любое градусное значение от 0 до 360 при насыщенности в значении 100% и светлоте – 50%. Логично, что настроить или  определить уже имеющийся цвет становится проще, чем, например, значение rgb(245,128,36).

 Гармония цвета

Одним из главных преимуществ HSL является то, что создание цветовой гармонии (сочетания) похоже на разнообразие кусочков торта. Мы всегда рассматриваем их, выбираем понравившийся, потом думаем, каким полакомимся следующим и так далее. Цветовой круг разбит на цвета аналогичным образом – напротив друг друга расположены дополнительные цвета. Поэтому, если мы выбрали некоторый цвет и хотим узнать его дополнительный –  просто добавим (или вычтем) к значению выбранного тона 1800. И совершенно не страшно, если значение будет больше 360. Формат HSL способен высчитать и пройтись по колесу, сколько будет необходимо. В данном случае он определил, что это будет желтый, находящийся напротив синего.

Гармоничных вариаций сочетания цветов (схем) много. Аналогично тому, как выше мы подбирали противоположный цвет, триадические цветовые схемы могут быстро создаваться путем добавления/вычитания 1200. Аналоговые комбинации создаются с помощью 300-го разделения. Если же речь идет о монохромной палитре, то и её в формате HSL несложно создать. Достаточно выбрать цвет, а затем добавлять/убавлять Светлоту, чтобы получить тона и тени для данного оттенка. Белый цвет – конец пути!

Пользовательские свойства CSS

Пользовательские свойства CSS или переменные CSS – лучший вариант работы с HSL, если создается несколько тем для одного сайта/приложения, и эти темы должны будут сменяться «на лету». Например, возможность выбора цветовой схемы для личного кабинета на сайте-портале.

  • Такие переменные используются во время выполнения, поэтому можно изменять и обновлять их значения во время работы проекта. Изменения будут также сразу видны без принудительного обновления страницы.
  • Эти переменные можно использовать в атрибуте style, аналогичном теге или в  общей таблице стилей, без необходимости создавать для каждой темы персональный файл.

В итоге получается, что можно создать некоторый набор цветов для разных тем, а затем применить одну из них, выполнив обновление атрибута данных для основного элемента. Можно воспользоваться именами классов. Здесь уж как удобнее верстальщику. Значение атрибута данных  темы обновляется при взаимодействии пользователя с набором входных данных, специально созданных для изменения темы.

Возможен вариант использования пользовательских свойств CSS, как значения внутри другой переменной. И, разумеется, не стоит забывать о функции calc().  Сочетая её с hsl() можно добиться создания и настройки отличных цветовых схем и тем на сайте. Один из вариантов совместной их работы может выглядеть примерно так:

Таким нехитрым образом получается, что код может быть создан различными способами, и зависит он только от конкретного проекта и ваших целей. Но пример выше очень ясно показывает, как HSL может облегчить работу с цветом при использовании переменных CSS.

Перекодировка

При желании можно уже имеющийся проект перевести на систему HSL. Если цвета выбраны в шестнадцатеричном коде, то можно воспользоваться конвертером на codepen.

Можно установить плагины для SublimeText, которые изменят все значения hex\rgb на hsl за считанные секунды. Вариантов много, есть и плагин ColorConvert.

И, конечно, важно еще заметить тот факт, что формат HSL поддерживается теперь уже практически всеми браузерами, кроме совсем стареньких версий IE.

Последние мысли

Многие из нас хотят иметь собственные сайты, небольшие проекты (но родные для души). Но большинство также понимает, что уже имеющиеся сайты, либо те, что еще в наших мыслях обладают, к сожалению,  невысоким приоритетом по сравнению с клиентскими проектами. И это естественно... Но не стоит пренебрегать тем фактом, что собственный сайт для веб-дизайнера, верстальщика, разработчика – еще один родной дом, то место, где о нем узнают клиенты, увидят его возможности и навыки.

И одним из вариантов обновления собственного уголка и является переход на HSL. С ним проще контролировать цвета, видеть, как сочетаются оттенки, подходят ли они под общий стиль и контент. Как пример, тот же GitHub  уже использует данный формат, перейдя от скучного серого оттенка к сине-серому тону. Для этого они взяли за основу синий, обесцветили до уровня серого и немного затемнили Светлость.

Вообще, HSL – мощный формат, особенно в сочетании с функциями CSS. Но если сравнивать HSL и RGB, то первый отличается своей интуитивностью. Можно легко догадаться по значению треугольника, о каком цвете идет речь, а затем увеличить или уменьшить количество серого и белого цветов.  Кроме того, легче создавать цветовые наборы одного тона, изменяя только светлость и насыщенность. Какой именно формат использовать в веб-дизайне и верстке –  значения не имеет.