Вредоносное ПО (malware) - это назойливые или опасные программы,...
Более 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 %, то в результате получим значение, на которое нужно осветлить цвет, чтобы получить полностью белый:
X = 100% - l
Значение яркости для $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. , на странице каждого из стикеров я продемонстрировал некоторые возможности, которые предоставляет нам подобное смешение цветов. Если мы посмотрим на страницу Олимпии, то ее настроение полностью отличается от домашней страницы, но вся разметка, шрифты и основной макет остаются теми же. Каждый цвет был смешан с желтым светлым тоном или фиолетовым темным, поэтому мы видим страницу (в буквальном смысле ) в новом свете. Фон содержимого приобрел цвет яичной скорлупы, а кнопка "Добавить в корзину " - более естественный живой цвет:
Стикер Линкольна сильно окрашен в полутона и оттенки красного, поэтому я захотел, чтобы это получило отражение во всех элементах страницы. Я выбрал красноватые светлые и темные тона, чтобы дизайн соответствовал иллюстрации:
Если вы посмотрите на страницу для Бартон Спрингс Пул , то увидите, что на ней преобладают тона прохладной воды и зеленых листьев. Разница между оригинальными цветами и новыми довольно тонкая, но различимая. Цвета должны быть объединены единой гаммой, чтобы создать эстетику, которая улучшает дизайн:
Если вам нужна «драма », то вам подойдет страница Грид . Светлые и темные оттенки придают ей вид в стиле фильма "Трон ". Такое яркое изменение достигается всего лишь заменой нескольких констант.
Еще несколько вещей, которые помогут вам в разработке собственных палитр
Почти каждый цвет на этих страницах смешивается со светлыми или темными оттенками, но иногда элементы дизайна могут выглядеть слишком однородными, и поэтому они сливаются. В таких случаях не бойтесь дополнить проекты новым набором цветных смесителей. Это поможет придать вашим страницам выразительности и сделает их более яркими.
Давайте еще раз посмотрим на страницу Линкольна . Помните, я хотел задать для нее красноватый оттенок. Трудно читать текст на ярко-красном фоне, поэтому я по-новому задал светлые тона; почти чисто красные. После этого я установил для фона зеленый цвет. Зеленый в сочетании с красным создает визуальный эффект, при котором светлые тона выглядят более насыщенно красными, сохраняя контрастность. Эти отдельные слои используют разные светлые и темные тона, которые взаимодействуют друг с другом.
При разработке цветовых схем важно обеспечить их четкость и читаемость. Взгляните еще раз на страницу Грид . Если вы считаете, что она не очень читаема, то вы не одиноки в этом. Меню в верхней части страницы имеет низкий коэффициент контрастности. По рекомендациям WCAG , его оптимальное значение 4.5: 1, но не ниже 2.6: 1! Соответствующий коэффициент контраста цвета текста и фона сделает дизайн более приятным.
Прежде чем я завершу, я хотел бы вкратце рассмотреть поддержку браузерами. Вся обработка цветов компилируется в основные объявления цветов CSS , все переводится в статические объявления, которые на сегодняшний день поддерживают все браузеры. Препроцессоры предоставляют нам беспрецедентные возможности для создания оттенков и тонов, которые делают наши палитры более утонченными и позволяют открыть в себе Моне .
Перевод статьи «Mixing Color for the Web with Sass » был подготовлен дружной командой проекта Сайтостроение от А до Я.
Порой при разработке веб-страниц иногда требуется «спрятать» конкретные элементы. Вы, конечно, можете просто удалить эти элементы из HTML-разметки. Но это не выход из положения. Чтобы сохранить элемент, но скрыть его, необходимо использовать CSS или HTML hidden.
Вертикальное выравнивание CSS - не самая простая задача. Осложняет дело и то, что с сегодняшними требованиями к адаптивному дизайну для разных устройств разработчикам приходится создавать элементы с «гибкой» высотой, и вычисление центра по вертикали становится довольно хитрой задачей.
Как понять в чём разница между двумя цветами? Как из одной цветовой схемы сделать 360? Как превратить имеющиеся у нас цвета схемы в переменные, которые зависят от одного базового цвета и использовать это в CSS-препроцессоре? Об этом мы узнаем далее: зачем нам это, какие юскейсы возможны с цветами и схемами в LESS (Sass), а также какие сервисы помогут нам в превращении двух цветов в один и функции над первым. Статья будет интересна тем, кто использует CSS-препроцессоры, переменные в них, а также функции/примеси.
Мотивация
Из готовых цветов создать динамическую схему на основе базового цвета
Начнём с обоснования - зачем нам это? Итак, мы находимся в роли верстальщика и дизайнер скинул нам набор цветов для сайта/системы/элемента/блока, который мы определим, как цветовая схема. На макете мы видим, что цвета поразительно взаимозависят друг от друга. Допустим, что дизайнер скинул нам 5 цветов и скорее всего в HEX-формате: #FF0000, #E82C0C, #FF530D, #E80C7A, #FF0DFF. Что говорят нам эти буквы и цифры? Да ничего - это больше понятно монитору, нежели человеку.Что мы можем сделать?
Самый простой вариант - создать в LESS (далее для упрощения будем использовать его, как один из представителей CSS-препроцессоров ) 5 переменных, установив им эти значения и забыть:
@clr-base: #FF0000;
@clr-header: #E82C0C;
@clr-button: #FF530D;
@clr-link: #E80C7A;
@clr-hover: #FF0DFF;
Второй вариант - представить каждый цвет в HSL (тон, насыщенность, светлота), что является более человеко-ориентированными значениями и оставить их как значения переменных. В Chrome это можно сделать с помощью настройки “Color format” / “HSL”.
@clr-base: hsl(0, 100%, 50%);
@clr-header: hsl(9, 90%, 48%);
@clr-button: hsl(17, 100%, 53%);
@clr-link: hsl(330, 90%, 48%);
@clr-hover: hsl(300, 100%, 53%);
Уже выглядит хорошо, но можно же сделать и лучше? Например, оставить значение только у базового цвета, а прочие вычислить через цветовые функции!
@clr-base: hsl(0, 100%, 50%);
@clr-header: spin(desaturate(darken(@clr-base, 2%), 10%), 8);
@clr-button: spin(lighten(@clr-base, 3%), 17);
@clr-link: spin(desaturate(darken(@clr-base, 2%), 10%), -30);
@clr-hover: spin(lighten(@clr-base, 3%), -60);
Что нам это даёт? Во-первых, всего одну переменную - базовый цвет, при изменении которого будет меняться вся цветовая схема сайта. Во-вторых, большую наглядность во взаимозависимостях цветов, которые выражены максимально человечно. Например, мы сразу понимаем, что цвет кнопки - это повёрнутый на цветовом колесе на 17 градусов и слегка осветлённый базовый цвет.
Сам себе Color Scheme Designer и Adobe Kuler
Другой вариант использования - создать базовую цветовую схему самостоятельно или с помощью сервисов: аналогичную, одноцветную (фиксирован тон), триадную, дополняющую, составную, одноцветную (фиксирован тон и насыщенность). Представить её как набор переменных, которые зависят от базового цвета. А далее уже без необходимости использования сервиса делать её теплее/холоднее, светлее/темнее, насыщеннее/наоборот. И всё это, меняя всего одну переменную.Где это реально может пригодиться? Например, мы делаем потоком сайты и используем некий шаблон дизайна. В него мы можем внедрить подобную схему и уже очередному заказчику выкатить прототип, используя его базовый цвет, буквально за секунды.
Это даст нам возможность создать схему одни раз, а из неё «нагенерить», условно говоря, 360 схем.
Наглядно увидеть, в чём разница между цветами
Даже если нам не надо всё так усложнять, но мы не хотим понять в чём разница между двумя цветами, например, начало грандиента и конец, то нам поможет знание о том, что цвета можно представить, как HSL. Но зачем делать в уме вычисления, если люди изобрели компьютеры?Как узнать разницу?
Как уже выше говорилось - с помощью метода мануальной терапии трансляции цвета из HEX RGB в HSL и вычисления разницы между компонентами. Меня это начало утомлять сразу же и, поигравшись с node.js, я написал небольшую утилиту/сервис, которая помогает это сделать автоматом: garex.github.io/nodejs-colors-to-less-operationsВ первую колонку мы вводим базовый цвет/цвета, а во вторую - зависимые. По нажатию кнопки «Go» мы имеем набор цветовых LESS-функций, которые нужны, чтобы превратить один цвет в другой. Для Sass’а названия функций идентичны, кроме функции поворота цветого колеса: в LESS мы имеем spin , а в Sass более явно названную adjust-hue .
Issue’ы и pull-request’ы приветствуются. Благодарю за внимание.
Приступаем к очередной интересной и обширной теме - как с помощью Sass/Compass облегчить себе жизнь при работе с цветами во время верстки.
Каждый верстальщик хорошо знает, как часто ему приходиться при верстке определять и манипулировать цветами в CSS-коде. Препроцессор Sass и его библиотека Compass обладают богатым набором функций, предназначеных для всевозможных операций с цветом в SCSS-коде.
Эта статья посвящена обзору функций Sass и Compass для работы с цветом. Начнем, как обычно, с самой простой функции и будем плавно продвигаться от простого к сложному.
Первоначальная настройка проекта Compass
Для начала создадим пустойй проект Compass и настроим его. Инициализируем несколько переменных
| 1 | $color |
| 1 | $color1 |
Фунции lighten и darken
Начнем с самых простых функций -
осветляет исходный цвет, а функция . Вторым аргументом является значение в процентах, на которое нужно осветлить или затемнить исходный цвет: .lighten { background-color : lighten ($ color , 10% ); } .darken { background-color : darken ($ color , 10% ); }Функции lighten и darken могут использоваться в любом месте SCSS-кода - везде, где применяется цвет. Например, видоизменим показанный выше пример. Применим функции lighten и darken для изменения цвета шрифта, границы и фона:
.mixin { font-size : .95rem ; background-color : lighten ($ color , 20% ); border : 1px solid darken ($ color , 30% ); color : darken ($ color , 60% ); }
Переходим к функциям обратного преобразования цвета. Первая функция
c заданным в ней цветом. Передадим эту переменную функции . На 180 градусов по отношению к исходному цвету расположен . . Она также производит инвертирование цвета от исходного. Но функция тем, что с помощью нее производится инвертирование цветов (красного, зеленого, синего), но прозрачность - она инвертирует исходный цвет. Но в отличие от последней обладает большей гибкостью. Если функция может управлять градусом расположения “выходного цвета.”Другими словами, можно задать угол, отличный от 180 градусов. Кроме того, значение угла может быть как положительным, так и отрицательным:
.adjusthue_plus { background-color : adjust-hue ($ color , 80deg ); } .adjusthue_minus { background-color : adjust-hue ($ color , -80deg ); }
В препроцессоре Sass имеется пара функций для управления насыщеностью цвета.
: .desaturate { background-color : desaturate ($ color , 80% ); }… наоборот, уменьшает насыщенность цвета от исходного.
| 1 | transparentize |
Значение прозрачности может находиться в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный):
.transparentize { background-color : transparentize ($ color , .2 ); } : .fadeout { background-color : fade-out ($ color , .2 ); }
| 1 | fade-out |
Функция преобразования исходного цвета в оттенки серого чрезвычайно проста в использовании. В принципе, тут и рассказывать особенно нечего:
.grayscale { background-color : grayscale ($ color ); }
Если стоит задача преобразования исходного цвета (заданного в виде переменной, в формате HEX или HSLA) в формат RGBA, в этом случае на помощь придет функция
и имеются два аргумента в виде переменных (два цвета). Последний третий аргумент в виде процентов задает пропорцию, в которой один цвет будет смешан с другим. В нашем случае цвет .
Функция adjust-color
Вот мы и подошли к более сложным функциям препроцессора Sass. Первой из таких функций является
также доступно управление альфа-каналом (прозрачностью) цвета. , - значение от 0 до 359 градусов, обозначающих цвет на HSL-диаграме; значение может быть как положительным, так и отрицательным;Хватит теории, давайте рассмотрим работу функции adjust-color на примерах.
- Изменение цвета от исходного ; вторым аргументом задается изменение цвета через переменную
:1 $hue
- Изменение цвета и светлоты одновременно. Первым аргументом $color задается исходный цвет, вторым аргументом устанавливается цвет $hue, третьим аргументом задается изменение светлоты $lightness:
- Изменение двух каналов цвета одновременно для цветовой модели RGB. Функции , канал зеленого цвета
:1 $green
- Смешивание аргументов цветовых моделей RGB и HSL в функции adjust-color. Передадим функции adjust-color аргументы исходного цвета $color, аргумент красного канала $red модели RGB и аргумент $hue модели HSL:
В результате компиляции данного кода в CSS получим такую ошибку:
Syntax error : Cannot specify HSL and RGB values for a color at the same time for ` adjust-color " on line 38 of .../ sass / style .scss… которая говорит о том, что в функции
производила изменение цвета на основе занчений передаваемых ей аргументов. Функция| 1 | scale-color |
В данном примере функция
. Функция . Значение вычисляет светлоту в оказался светлее, чем результат функции и| 1 | tint |
| 1 | $color |
| 1 | 30% |
Заключение
На этом обзор “цветовых” функций препроцессора Sass и библиотеки Compass можно считать завершенным. В качестве вывода можно сказать, что благодаря подобным функциям упрощается и убыстряется работа при верстке дизайна сайта.
Более того, с помощью данных функций, имея в качестве входного значения всего один цвет, можно создать отличный дизайн в профессиональной цветовой палитре. И не прибегнуть ни к одному из графических инструментов.
Помимо использования рассмотренных выше цветовых функций каждой по отдельности, можно комбинировать их в одном выражении, создавая достаточно сложные конструкции.
Данная статья является вольным переводом главы “Manipulate Color with Ease” замечательной книги “Sass and Compass for Designers” автора Ben Frain.
Цвет очень важен в дизайне - он играет визуальную и психологическую роль. Правильно подобранная палитра, соответствующая замыслу вашего дизайна значительно улучшает эстетическое впечатление от вашего сайта.
Вы (или ваш дизайнер) можете подходить к проекту с готовой палитрой. Если нет, настоятельно рекомендую прочитать теорию цвета для дизайнеров и создание собственных палитр . В идеале, хорошая палитра состоит из двух контрастных “брендовых цветов” или двух похожих цветов (из монохромной схемы) плюс нескольких осветленных или затемненных цветов для гибкости.
Если вы уже определились со своей палитрой, встроенные функции Sass помогут вам манипулировать ее цветами.
Ссылки на цветовую палитру
Переменные SASS ($variables) дают отличный способ упорядоченно и многократно ссылаться на цвета. Они ориентированны на семантические именования цветовых палитр, а не на их названия, исходя из внешнего вида. Переменная типа $color-blue имеет немного смысла (кроме того, что она указывает на синий цвет), а вот $color-primary показывает роль этого цвета. Это также дает нам гибкость при темизации или в случае смены брендовых цветов.
Несмотря на то, что $color-variables это неплохое начало, хорошей идеей будет хранить цвета в виде карты SASS (SASS map). Таким образом, цвета будут упорядочены, на них будет проще ссылаться и проходить по ним циклом.
Ниже показана базовая цветовая палитра Scotch.io:
$scotch-colors: ("primary": #8e3329, "accent": #d98328, "secondary": #5a1321, "foreground": #191919, "background": #e9e9e9);
Каждый цвет имеет семантическое значение, описывающее его роль. Можно использовать функцию Sass map-get() или собственную функцию-утилиту (рекомендуется) для ссылок на отдельные цвета:
@function scotch-color($key: "primary") { @return map-get($scotch-colors, $key); } $button-color: scotch-color("primary"); // #8e3329
Цветовую палитру желательно ограничить определенным количеством цветов (4 -7). Остальные цвета создаются как оттенки и тени цветов из палитры.
Оттенки и тени
Добавление оттенков и теней к вашей палитре даст вам большее количество цветов для проекта при сохранении согласованности вашей оригинальной палитры. Для создания теней и оттенков цвета в SASS есть функция mix() , которая смешивает оригинальный цвет с черным или белым:
$color-primary: scotch-color("primary"); // #8e3329 $color-primary-tinted: mix(white, $color-primary, 10%); // #99473e $color-primary-shaded: mix(black, $color-primary, 10%); // #7f2d24
Если установлен интервал осветления/затемнения, служебная функция может возвращать нужный оттенок соответствующей степени затемнения/осветления требуемого цвета (вместо использования магических чисел):
$color-interval: 10% !global; @function scotch-color-level($color-name: "primary", $level: 0) { $color: scotch-color($color-name); $color-base: if($level < 0, black, white); @return mix($color-base, $color, $level * $color-interval); } // Example: .panel { background-color: scotch-color-level("primary", 2); } @function scotch-color-alpha($name: "primary", $opacity: 0) { $color: scotch-color($name); // Get the named opacity level, if it exists @if map-key-exists($scotch-opacity, $opacity) { $opacity: map-get($scotch-opacity, $opacity); } // Use rgba() to manipulate the color"s alpha level @return rgba($color, $opacity); } // Example usage: $button-transparent-color: scotch-color-alpha("primary", "light"); // => rgba(#8e3329, 0.8)
Базовый (дефолтный) цвет определен в $scotch-color-key . Функция scotch-color() модифицирована для извлечения определенного варианта цвет на основе переданного ключа (‘base’, ‘light’, ‘dark’ и т.д.) и переданной степени прозрачности. Это позволяет извлекать нужный цвет одним аргументом, например $color: scotch-color("primary")
Завершение
Цвета это очень важная часть дизайна проекта. Поэтому лучше сразу организовать цвета проекта в отдельной карте SASS, чтобы затем извлекать их через map-get или кастомную функцию. В SASS есть много встроенных функций для работы с цветом и получения оттенков и теней основных цветов. Если оттенки определены заранее, используйте для их упорядочивания многомерные карты SASS.
Общей целью эстетичного цветного дизайна в SASS является возможность:
- предоставлять и изменять цвета в гармонии с выбранной цветовой палитрой
- избегать использования “магических” чисел
В следующей части нашей серии мы рассмотрим типографику и вертикальный ритм.
Для работы с цветом в вебе есть множество инструментов и приемов. Я считаю, что всегда нужно знать, как устроено то, с чем вы работаете, и цвет - не исключение. Давайте разберемся в технических деталях работы с цветом в вебе.
Смешивание цветов
Очень важно понять, что использовать цвета на компьютере так же, как в детстве, не выйдет из-за смешивания цветов. Когда вы были детьми, у вас была краска. Краска и чернила принтера состоят из пигментов - маленьких частиц, которые смешиваются и образуют видимый цвет. Это субтрактивная схема формирования цвета . Чем больше цвета вы добавите, тем темнее будет цвет. Базовые цвета - это голубой, пурпурный и жёлтый, но при их смешивании по субтрактивной схеме вы получите чёрный.
На компьютере (или любом мониторе) вы работаете со светом , то есть при смешивании всех цветов вы получите белый. До того, как Исаак Ньютон провёл свой знаменитый эксперимент с призмой , люди считали, что цвет находится внутри объектов, а не поглощается ими и отражается от них. Ньютон же использовал призму и доказал, что яркий свет - это всего лишь смесь нескольких цветов, получив радугу. Тем не менее, отдельные цвета радуги уже не разделились, и это показало, что призма не содержала цвет. Такая схема называется аддитивной .
Мониторы - это множество сочетаний маленьких кусочков света, образующих мириады цветов. Разрешение означает количество этих кусочков, - пикселей - находящихся на экране. Что интересно, такой подход использовался художниками и до появления мониторов (пример можно увидеть ниже).
У мониторов есть несколько режимов отображения, которые определяют то, как мы воспринимаем изображение. Обычно это называют глубиной цвета . Именно глубина цвета определяет количество отображаемых цветов. Если глубина равна 1 биту, нам доступны лишь два цвета - чёрный и белый. Глубина, равная двум битам, даёт 4 цвета, и так далее до 32, хотя обычные мониторы поддерживают глубину цвета до 24, что даёт нам 16 777 216 цветов (True Color и альфа-канал).
True Color (истинный цвет) называется так, потому что человеческий глаз способен различать около 10 миллионов цветов, и 24-битной глубины для этого достаточно. Красный, зелёный и синий цвета занимают по 8 битов, а оставшиеся используются для прозрачности (альфа-канал).
Давайте воспользуемся этой информацией и рассмотрим доступные нам свойства цвета.
Цветовые значения
RGB-значения
В конце предыдущего раздела между строк было сказано, что означает rbga(x, x, x, y); , однако, стоит разобраться в этом получше. Если мы работаем с RGB-моделью, то разделяем цвет на три канала со значениями от 0 до 255.
X is a number from 0-255 y is a number from 0.0 to 1.0 rgb(x, x, x); or rgba(x, x, x, y); Example: rbga(150, 150, 150, 0.5);
Hex-значения
Шестнадцатеричные цвета - это немного другой формат отображения цвета, и он наиболее часто используется в вебе.
Как вы знаете, байт - это 8 бит, то есть каждый шестнадцатеричный цвет задаётся 1 байтом. Каждый байт задаётся числом от 00 до FF в шестнадцатеричной системе счисления, или числом от 0 до 255 в десятичной. Таким образом, чёрный цвет задаётся числом #000000 , а белый - #FFFFFF .
Если разряды попарно повторяются, то их можно сократить, например, #00FFFF станет #0FF . Такая система записи весьма удобна для понимания и записи, а также для использования в программировании. Если же вы будете работать с цветом на более глубоком уровне, стоит рассмотреть систему HSL.
HSL-значения
HSL работает примерно так же, как и RGB, но вместо цветов она задаёт тон, насыщенность и светлоту .
3D-модель HSL
Тон вращается на 360 градусов, а насыщенность и светлота принимают значения от 0 до 1.
X is a number from 0 - 360 y is a percentage from 0% to 100% z is a number from 0.0 to 1.0 hsl(x, y, y); or hsla(x, y, y, z); Example: hsla(150, 50%, 50%, 0.5);
Переход между этими двумя системами очень прост, но для человеческого восприятия гораздо лучше подходит HSL. Разобраться получше поможет эта демка и этот инструмент .
HSL также будет рассмотрена в следующей статье.
Именованные цвета
Разработчикам также доступны и именованные цвета. Тем не менее, с ними непросто работать из-за разницы в восприятии и их неточности. Вопиющим примером может служить то, что «dark grey» (тёмно-серый) светлее, чем «grey» (серый). Есть даже игра , в которой нужно угадывать цвета. Раньше, например, кроваво-красный цвет назывался chucknorris (сейчас это поддерживается только в HTML, насколько я знаю). Так или иначе, гораздо удобнее и профессиональнее будет использовать препроцессоры наподобие Sass для хранения цветов в переменных.
Цветовые переменные
Хорошей практикой будет хранить цветовые переменные, но никогда их не использовать, переопределяя их более читаемыми именами. В CSS есть нативные переменные:
:root { --brandColor: red; } body { background: var(--brandColor); }
Но это совсем новая фича, и браузеры от Microsoft на момент написания статьи её не поддерживают .
Препроцессоры CSS также поддерживают переменные, так что вы можете создать переменные наподобие $brandPrimary и использовать их. Или использовать map :
$colors: (mainBrand: #FA6ACC, secondaryBrand: #F02A52, highlight: #09A6E4); @function color($key) { @if map-has-key($colors, $key) { @return map-get($colors, $key); } @warn "Unknown `#{$key}` in $colors."; @return null; } // _component.scss .element { background-color: color(highlight); // #09A6E4 }
Помните, что имена важны. Абстрактные имена порой пригождаются, ведь если вы измените переменную, которая раньше задавала синий цвет, а теперь - оранжевый, вам не придётся переименовывать все другие переменные, или, что хуже, вешать комментарий типа « $blue теперь оранжевый.»
currentColor
currentColor - это очень важное значение. Оно учитывает вложенность, и используется для переноса цвета в тени, границы и даже фоны.
Положим, вы создали div и вложенный в него div. Код ниже создаст оранжевую рамку для внутреннего div:
Div-external { color: orange; } .div-internal { border: 1px solid currentColor; }
Это очень полезно при работе с системами иконок. Вы можете задать currentColor как значение по умолчанию, а затем использовать необходимые CSS-классы для стилизации.
Препроцессоры
Препроцессоры CSS отлично подходят для работы с цветом. Вот несколько ссылок на документацию к различным функциям.
