Страницы

Поиск по вопросам

понедельник, 19 ноября 2018 г.

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

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



Ответ

Можно обратиться к цветовой схеме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

Комментариев нет:

Отправить комментарий