Цвета и разница между ними в LESS (SASS)

Как понять в чём разница между двумя цветами? Как из одной цветовой схемы сделать 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.

Заключение

В итоге мы узнали, как оживить цветовые схемы в CSS-препроцессорах и возможные пути/сервисы/утилиты для этого. В комментариях предлагаю поделиться, кто как организует переменные и зависимости между ними в своих LESS/SASS/YourCSSHere проектах. Надеюсь, что статья не получилась в стиле «Как нарисовать сову?»

Issue’ы и pull-request’ы приветствуются. Благодарю за внимание.