Большинство цветов, которые люди используют в CSS - это шестнадцатеричный и RGB. Однако, в последнее время всё чаще стало появляться использование цветов HSL. В статье подробней рассмотрим, как HSL действительно может помочь нам лучше работать с цветами в CSS.
Введение
Обычно мы используем шестнадцатеричные цветовые кодировки (hex-цвета), что вполне нормально, но у них есть несколько проблем:
- они ограничены;
- их трудно понять читая.
Под "ограничены" подразумевается, что изменить цвет, не открыв цветовой круг и не выбрав цвет самостоятельно, непросто. Кроме того, непросто угадать, что это вообще за цвет, глядя на шестнадцатеричный код.
Рассмотрим следующую иллюстрацию:
Перед нами в шестнадцатеричном коде стандартный css-цвет "purple" - фиолетовый и он же, но темнее. Обратите внимание, глядя на код, что они не связаны друг с другом. Да и трудно сказать, что они оба фиолетовые с разными оттенками.
В проектах вам может понадобиться создать более светлый или темный оттенок цвета, чтобы быстро что-то проверить или просто добавить его к элементу. Для hex-цветов это невозможно, пока вы не откроете палитру цветов.
К счастью, цвета HSL могут помочь нам в решении этой конкретной проблемы и открывают для нас множество возможностей.
Что такое HSL?
HSL - аббревиатура, которая расшифровывается как Hue (оттенок), Saturation (насыщенность) и Lightness (яркость). Он основан на цветовом круге RGB. У каждого цвета есть угол и процентное значение для указания насыщенности и яркости.
Давайте возьмем пример оранжевого цвета. Сначала мы выбираем цвет, как обычно, из палитры цветов, и обязательно получаем для него значение HSL.
Ниже будем рассматривать пример выбора цвета в палитре chrome (в инструментах разработчика), но вы можете использовать любой инструмент для дизайна или графический редактор, какой захотите.
Обратите внимание на значения HSL. Первый показатель - это угол, на котором расположен выбранный нами цвет. Согласно цветовому кругу, 36° указывает на оранжевый цвет. Когда у нас есть угол, мы можем начать настраивать насыщенность и яркость в соответствии с нашими потребностями.
В рассмотренной палитре также есть показатель A, равный единице. Это альфа-канал, он показывает прозрачность цвета.
Насыщенность
Насыщенность определяет, насколько насыщенным должен быть цвет. 0% - полностью ненасыщен, а 100% - полностью насыщен.
Яркость
Что касается яркости, она определяет, насколько светлый или темный будет цвет. 0% - черный, 100% - белый.
Вот как мы можем использовать HSL-цвет в CSS:
.box {
background-color: hsl(36, 95%, 42%);
}Изменяя цветовой угол, мы можем получить цвета, близкие по насыщенности и яркости к базовому. Это очень полезно при работе с фирменными цветами, поскольку позволяет создать последовательный набор вторичных к фирменным цветов.
В примере 3 одинаковых по насыщенности и яркости цвета. Это как раз то, что замечательно в цветах HSL. Его легче читать и редактировать, чем любой другой цветовой тип.
Применение HSL-цветов
Изменение цвета по ховеру
Когда цвет определенного элемента должен быть темнее при наведении, цвета HSL могут быть идеальными для этого. Такое поведение полезно для таких компонентов, как кнопки или ссылки.
Используя для простоты CSS-переменные, имплементировать такую задачу можно следующим образом:
:root {
--submit-h: 300;
--submit-s: 100%;
--submit-l: 25%;
}
.button {
background-color: hsl(var(--submit-h), var(--submit-s), var(--submit-l));
}
.button:hover {
--submit-l: 20%;
}Значение яркости при наведении будет меньше, а значит кнопка будет темнее.
Комбинация цветов с разными оттенками
HSL может быть полезен, когда у нас есть дизайн, в котором используется один и тот же цвет, но с разными оттенками. Например, нам нужно сделать тему в оттенках одного цвета:
Основная навигация имеет главный цвет, контейнер с логотипом имеет более темный оттенок, плашка сверху - более светлый, а фон ещё светлее. С HSL мы можем легко получить любой из оттенков, изменив значение яркости.
Это может быть чрезвычайно полезно при наличии пользовательского интерфейса с несколькими темами. Используя CSS-переменные с прописанными значениями яркости каждому элементу нам достаточно будет для переключения тем всего лишь менять основной цвет.
Цветные палитры
Изменяя яркость, мы можем создать набор оттенков для цвета, который можно использовать для стайл-гайдов или UI-шаблонов.
Это полезно как для дизайнеров, которые будут использовать выбранные цвета в макетах, так и для разработчиков, недавно вошедших в проект, которым будет быстро доступна цветовая схема бренда.
В качестве примера взгляните на интерактивную демонстрацию палитры. Ползунок меняет только значение цвета, а остальные оттенки меняются автоматически:
Кастомный белый цвет
Часто нам нужно окрасить текст элемента определённого цвета в белый цвет, чтобы этот текст выделялся. Выглядит такой белый цвет скучновато, и мы можем заменить его очень светлым оттенком того цвета, который у нас есть, тоесть "кастомным" белым цветом.
Рассмотрим пример:
Обратите внимание, как чистый белый цвет справа слишком выделяется по сравнению с белым, полученным из очень светлого оттенка того цвета, который у нас есть.
Варианты кнопок
Еще один полезный вариант использования цветов HSL - это когда у нас есть различные оттенки одного цвета, которые используются для различных вариантов кнопок. В примере приведена кнопка с первичным цветом, со вторичным, с рамкой и тенью. Цвета HSL идеально подходят для этого.
Вот как в сочетании с CSS-переменными можно заимплементировать кнопки:
:root {
--submit-h: 300;
--submit-s: 100%;
--submit-l: 25%;
}
.button {
background-color: hsl(var(--submit-h), var(--submit-s), var(--submit-l));
border: 3px solid hsl(var(--submit-h), var(--submit-s), var(--submit-l));
}
.button--darker {
--submit-l: 20%;
color: #FFF;
}
.button--primary {
color: #FFF;
}
.button--bordered {
background-color: transparent;
color: hsl(var(--submit-h), var(--submit-s), var(--submit-l));
}
.button--shadowed {
background-color: transparent;
border-color: transparent;
color: hsl(var(--submit-h), var(--submit-s), var(--submit-l));
box-shadow: 0 0 10px hsl(var(--submit-h), var(--submit-s), var(--submit-l));
}Настройка основных вариантов кнопок выполняется быстро и может быть расширена для более разнообразных вариантов. А изменение значения цвета изменит все кнопки под стать темы.
Заключение
Цвета HSL очень эффективны, если мы используем их правильно. Они могут сэкономить нам время и силы и даже помочь изучить варианты применения цвета в дизайне.
Комментарии (0)