HSB Цвета с Sass

Зачем нам нужна другая цветовая модель? И это справедливый вопрос, учитывая, что у нас уже есть RGB, HSL и hex, и у нас все хорошо. Чтобы убедить вас, я расскажу вам, почему HSB потрясающий и как вы можете легко реализовать его в любом проекте Sass.

Почему HSB?

Цветовая модель HSB / HSV фактически близка к HSL. HSB обозначает Hue, Saturation и Brightness, компонент Hue равен компоненту в HSL.

Цвета HSB, как и их двоюродный брат HSL, имеют некоторые приятные преимущества по сравнению с RGB и Hex — они позволяют быстро определить цвет, увидев, насколько он насыщенный и яркий, Крис Койер также говорит нам, почему HSL круче, а Дадли Стори — хороший визуальное руководство о том, как думать о цветах HSL. Все эти плюсы одинаково хорошо подходят для HSB.

Кроме того, Карен Менезес написала полезную статью о том, как думать о модификациях цвета, с большим разделом о модели HSL. У HSL даже есть свой собственный сайт .

Этот простой для понимания фактор отсутствует в RGB и hex — просто попытайтесь представить, как выглядят rgb(173, 149, 128)#ad9580

Кроме того, если вам нужен какой-то уровень прозрачности для цвета, гекс больше не вариант; Вы должны выбрать между RGBa и HSLa (и теперь HSBa).

Цвета HSB также более доступны для использования, чем HSL, если вы выбираете / получаете свои цвета из графического программного обеспечения. Такие программы, как GIMP или Adobe Photoshop и Illustrator, предпочитают цветовую модель HSB HSL.

Имея этот фундамент, давайте посмотрим, как мы можем использовать HSB в проекте Sass.

Построение функции

Добавить поддержку цветов HSB в ваш проект легко. Мы определим функцию HSB, чтобы позже мы могли использовать ее так же, как цвета HSL или RGB:

 color: hsb(333, 84, 76)

Эта функция будет принимать 3 или 4 параметра, четвертый — альфа-канал, который по умолчанию мы установим в 1 (полностью непрозрачный):

 @function hsb($h-hsb, $s-hsb, $b-hsb, $a: 1)

Внутри функция преобразует цвет HSB в HSL (это математически проще всего). Sass выводит цвет в его шестнадцатеричном эквиваленте (или RGBa, если цвет имеет прозрачность) независимо от формата, в котором вы предоставляете входной цвет. Другие препроцессоры работают так же.

Компонент Hue не нуждается в преобразовании, поскольку он одинаков для HSB и HSL. Чтобы получить другие компоненты, нам нужна математика.

Получение светимости HSL, эквивалентной нашему цвету HSB, выполняется с помощью простого уравнения:

 $l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100));

И вот как мы вычисляем насыщенность HSL:

 $s-hsl: ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2);

Оператор if Вот более подробное объяснение.

В конце мы просто возвращаем новое значение:

 @return hsla($h-hsb, $s-hsl, $l-hsl, $a);

Хорошо, теперь у нас есть все 3 компонента: оттенок, насыщенность и яркость. Но наш код еще не безупречен. Наша функция потерпит неудачу, если третий параметр (Яркость или $b-hsb0 К счастью для нас, наличие яркости 0

Поэтому лучший способ решить эту проблему — добавить в нашу функцию условие, которое автоматически выводит черный цвет, если яркость равна нулю:

 @function hsb($h-hsb, $s-hsb, $b-hsb, $a: 1) {
  @if $b-hsb == 0 {
    @return hsla(0, 0, 0, $a)
  } @else {
    $l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100));
    $s-hsl: ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2);
    @return hsla($h-hsb, $s-hsl, $l-hsl, $a);
  }
}

И мы сделали. Проверьте демо, которое включает в себя несколько тестовых случаев: