Sass функцию lighten. Функции работы с цветом в Sass и Compass. Фунции lighten и darken

Более 125 лет назад великий художник-импрессионист Клод Моне изменил наше представление о цвете, рассмотрев такой его элемент, как свет. До сих пор эти его исследования были неприменимы для веб-дизайна. Но такие препроцессоры, как Sass , позволяют по-новому посмотреть на цветовые палитры:

Клод Моне, Стога сена: Влияние снега (1891). Шотландская национальная галерея; изображение для всеобщего обозрения.

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

К счастью, новые инструменты дают нам больше возможностей для работы с цветом. Но CSS все еще остается довольно негибким. Вот где нам могут весьма пригодиться препроцессоры. Давайте рассмотрим некоторые из их возможностей, которые могут существенно улучшить наши стили:

Псевдонимы помогают лучше понять, какие цвета мы используем;
Освещение, затемнение и масштабирование позволяют задать гибкость палитр при довольно высоких разрешениях;
Смешение цветов позволяет открыть новый мир тонких оттенков и полутонов.

Шестизначные коды

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

Давайте приступим к работе, чтобы вам стало понятно, что я имею в виду.

Мы создадим новый бренд и выберем два цвета для его отображения. Первое, что я собираюсь сделать, это назвать цвета: $toolbox и $ol-blue :

Теперь я использую их, чтобы создать сайт для компании Gullfoss Travel Supply Co . Идея дизайна для этого сайта заключается в ассоциации с багажными бирками. В разных местах сайта встречаются различные варианты (более светлые ) и оттенки (более темные ) этих цветов:

Гипотетический сайт для Gullfoss Travel Supply Co.

Рассмотрим, к примеру, эту кнопку:

Я хотел, чтобы эта кнопка выглядела, как кликабельный элемент, чего можно легко добиться с помощью простого градиента. Основой кнопки является цвет $toolbox . А ее изюминкой стали его более светлые и темные тона.

Традиционно мне бы нужно было задать их в CSS следующим образом:

button{ background-color: $toolbox; // основной background-image: gradient(hsl(0, 33%, 52%), // светлый $toolbox, hsl(0, 41%, 39%); // темный) }

Основной цвет кнопки — это один из цветов бренда, два других (светлый и темный ) не являются константами Sass . Мне нужно было бы задавать их. Открыть палитру цветов и вручную выбрать образец. Но если я захочу добавить кнопку на этот основе цвета $ol-blue , то мне нужно было бы еще раз возвращаться к палитре и подбирать новые значения.

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

Но Sass может сделать это за меня. Он содержит встроенные функции для обработки этих цветов без необходимости вручную задавать их различные варианты.

Упаковка палитры цветов для Sass

Один из способов сделать цвет светлее — это использовать функцию lighten :

lighten($toolbox, 20%);

А чтобы затемнить цвет, мы можем использовать функцию darken :

darken($ol-blue, 30%);

Рассмотрим следующий случай: если мы осветлим $toolbox на 50 %, мы получим очень светлую версию этого цвета. Но если мы осветлим $ol-blue на 50 %, то получим полностью белый цвет. Потому что $ol-blue гораздо светлее, чем $toolbox .

Чтобы знать, как сильно мы можем осветлить цвет, чтобы он не стал полностью белым, нам нужно заранее знать значение яркости этого цвета. Эта информация удобно закодирована в значениях HSL . Если мы вычтем яркость цвета из 100 %, то в результате получим значение, на которое нужно осветлить цвет, чтобы получить полностью белый:

Значение яркости для $ol-blue составляет 60 %, и мы можем осветлять его до 40%, чтобы он не стал полностью белым. Яркость для $toolbox составляет 40%, так что мы можем осветлить его на 60%:

Когда мы осветляем цвета, $ol-blue станет белым быстрее, чем $toolbox, потому что у него более высокое значение базовой яркости.

Когда мы затемняем цвета, $toolbox быстрее станет полностью черным, чем $ol-blue, потому что он имеет более низкое значение базовой яркости.

Для того чтобы освоить эту новую цветовую палитру, нам нужно запомнить значения яркости для каждого из цветов.

Пропорциональные палитры со смещением цветов

Sass включает в себя функцию цветов scale-color() , которая позволяет сдвигать составляющие цветов пропорционально. scale-color() работает с RGB , а также с каналами насыщенности и яркости HSL . Чтобы аналогично настроить оттенок, вам нужно использовать одноименную функцию adjust-hue() .

Как я отмечал ранее, если бы мы осветлили $ol-blue на 50 %, он превратился бы в чистый белый, но если бы мы пропорционально увеличили яркость на 50 % с помощью функции scale-color() :

scale-color($ol-blue, lightness, 50%);

— то получили бы цвет с яркостью средней между оригинальным цветом и чистым белым.

Теперь я точно знаю, насколько нужно сдвинуть любой из моих цветов, чтобы получить чистый белый: это всегда 100 %. Если я пропорционально увеличу яркость $ol-blue на 99 %, это все равно будет на 1 процент $ol-blue. Точно так же вы можете обработать $toolbox или любой другой цвет. За исключением цветов, которые и так уже слишком светлые, и которые могут превращаться в чисто белый намного раньше. Для них начальная яркость будет составлять 100 %.

Вы можете легко понять, что я имею в виду, рассмотрев приведенную ниже таблицу цветов:

При смещении яркости цветов они становятся светлее и более предсказуемыми.

Более темные варианты цветов тоже задаются пропорционально.

С помощью функции scale-color() вы можете задавать в цветовых палитрах ограниченное количество базовых констант, но при этом сохранить гибкость при обработке полутонов и оттенков. Теперь наше объявление градиента можно задать следующим образом:

button{ background-color: $toolbox; // основной background-image: gradient(scale-color($toolbox, lightness: 50%), $toolbox, scale-color($toolbox, lightness: -30%);) } button: hover, button: focus{ background-color: scale-color($toolbox, lightness: 50%); // основной background-image: gradient(scale-color($toolbox, lightness: 60%), $toolbox scale-color($toolbox, lightness: -20%);) } button.secondary{ background-color: $ol-blue; // основной background-image: gradient(scale-color($ol-blue, lightness: 50%), $ol-blue, scale-color($ol-blue, lightness: -30%);) } button.secondary:hover, button.secondary:focus{ background-color: scale-color($ol-blue, lightness: 50%), // fallback background-image: gradient(scale-color($ol-blue, lightness: 60%), $ol-blue, scale-color($ol-blue, lightness: -20%);) }

В этом примере я использовал только две константы и сместил их по своему желанию. На самом деле они могут использоваться на всей странице. В содержимом домашней страницы Gullfoss Travel Supply Co. используются только два цвета бренда, смещаемые до различных значений яркости. Несмотря на такую простоту палитры, мы можем гибко ее настроить.

Прописываем цвета с помощью примесей

Существует еще один способ, с помощью которого можно создавать подобные пропорциональные палитры — функция mix() .
Если мы хотим осветлить $ol-blue на 60 процентов, мы напишем:

mix(white, $ol-blue, 60%)

Вы можете представить себе это, как если бы мы смешали тюбик с белой краской с тюбиком краски цвета $ol-blue. Если мы хотим затемнить $ol-blue, мы напишем:

mix(black, $toolbox, 30%)

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

Рассмотрим рисунки стогов сена Моне . На них замечательно передана игра света. Но с точки зрения дизайна мы можем вынести из них полезный урок. По словам другого французского импрессиониста Пьера Боннара , «Цвет не создает приятное впечатление от картины — он усиливает его «. Вспомните, как цвет света влиял на внешний вид стогов Моне . Что, если бы мы могли взять базовые цвета и легко менять их в проектах, как сделал он в 1890 году?

Функция Sass mix() дает нам такую возможность. Снова возьмем нашу цветовую палитру и добавим в нее всего пару дополнительных цветов: свет и тень. Теперь давайте смешаем наши цвета бренда еще раз, но вместо того, чтобы смешивать их с черным и белым, давайте используем наши новые цвета:

Сразу вся палитра становится теплой и мягкой, а более темные цвета — насыщенными и яркими.

Осветление желтым цветом придает всей палитре солнечные оттенки.

Затемнение с помощью цвета тени делает палитру более естественной.

Если мне не нравится эта схема, я могу выбрать новые значения для этих двух констант, и в следующий раз Sass скомпилирует их в CSS , а дизайн автоматически будет отражать внесенные изменения.

В этой новой схеме я снова начинаю с той же палитры бренда, но теперь для светлых тонов я выбираю цвет ярко-розовый, а для темных темно-зеленый:

Это полностью меняет внешний вид палитры, но в ее основе все также лежат два наших основных цвета бренда.

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

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

Возвращаясь к сайту Gullfoss Travel Supply Co. , на странице каждого из стикеров я продемонстрировал некоторые возможности, которые предоставляет нам подобное смешение цветов. Если мы посмотрим на страницу Олимпии, то ее настроение полностью отличается от домашней страницы, но вся разметка, шрифты и основной макет остаются теми же. Каждый цвет был смешан с желтым светлым тоном или фиолетовым темным, поэтому мы видим страницу (в буквальном смысле ) в новом свете. Фон содержимого приобрел цвет яичной скорлупы, а кнопка «Добавить в корзину » — более естественный живой цвет:

Стикер Линкольна сильно окрашен в полутона и оттенки красного, поэтому я захотел, чтобы это получило отражение во всех элементах страницы. Я выбрал красноватые светлые и темные тона, чтобы дизайн соответствовал иллюстрации:

Если вы посмотрите на страницу для Бартон Спрингс Пул , то увидите, что на ней преобладают тона прохладной воды и зеленых листьев. Разница между оригинальными цветами и новыми довольно тонкая, но различимая. Цвета должны быть объединены единой гаммой, чтобы создать эстетику, которая улучшает дизайн:

Если вам нужна «драма », то вам подойдет страница Грид . Светлые и темные оттенки придают ей вид в стиле фильма «Трон «. Такое яркое изменение достигается всего лишь заменой нескольких констант.

Еще несколько вещей, которые помогут вам в разработке собственных палитр

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