Как увеличить сочность цвета (scss)?

#html #css #sass #scss

Допустим имеется цвет #ff7fa1, как средствами scss:


Увеличить его сочность до максимального уровня #ff0044?
Уменьшить его сочность до минимального уровня #ffffff?







    

Ответы

Ответ 1

Можно обратиться к цветовой схемеhsl

При этом максимальная сочность цвета будет при значении 50% для l компоненты и минимальная
(белый цвет) - при значении 100%.

В SASS есть функция получения l компоненты: lightness($color)

А также функции для изменения этой компоненты:


lighten($color, $amount)
darken($color, $amount)


Таким образом для решения пункта два, нужно дополнить значение компоненты до 100,
а для решения первого пункта в случае если текущее значение больше 50 - уменьшить,
в противном случае - увеличить до 50.

Пример использования: 

.c1{
  color: lighten($color, 100-(lightness($color)));
}

.c2{
  $l : lightness($color);
  color: if($l > 50, darken($color, ($l)-50), lighten($color, 50-($l)));
}


При $color: #ff7fa1 преобразуется в следующее:

.c1 {
  color: white;
}

.c2 {
  color: #ff0044;
}


используется функция if