Как понять в чём разница между двумя цветами? Как из одной цветовой схемы сделать 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. Но зачем делать в уме вычисления, если люди изобрели компьютеры?
Как узнать разницу?
Как уже выше говорилось — с помощью метода мануальной
В первую колонку мы вводим базовый цвет/цвета, а во вторую — зависимые. По нажатию кнопки «Go» мы имеем набор цветовых LESS-функций, которые нужны, чтобы превратить один цвет в другой. Для Sass’а названия функций идентичны, кроме функции поворота цветого колеса: в LESS мы имеем
spin, а в Sass более явно названную adjust-hue.Заключение
В итоге мы узнали, как оживить цветовые схемы в CSS-препроцессорах и возможные пути/сервисы/утилиты для этого. В комментариях предлагаю поделиться, кто как организует переменные и зависимости между ними в своих LESS/SASS/YourCSSHere проектах. Надеюсь, что статья не получилась в стиле «Как нарисовать сову?»
Issue’ы и pull-request’ы приветствуются. Благодарю за внимание.