Работа и манипуляции
с цветом в LESS

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

Я немного отошел от просто небольшого осветления или затемнения цвета и копнул немного глубже. Передо мной стояла задача следующая — получить абсолютно точный цвет с дизайн-макета и менять его на точный аналогичный оттенок, например другого цвета или чуть другой насыщенности.

Окей, на оффсайте LESS есть некий раздел под названием "Color Operation Functions", в нем друг за дружкой идут описания функций для работы с цветом (можете сами в этом убедиться). Весь замес и прелесть заключается в том, что почти все сеи прекрасные операции по умолчанию производятся на основе цветовой модели HSL (что это такое?). На этом моменте, без фундаментального понимания — что это за такая, цветовая модель, и чего все таки делают эти функции, интерес исчезает. В частности начинаются подборы процентов функцией lighten/darken, в ситуациях когда цвет тупо пропадает :)

Подсказываю: любой цвет из фотошопа, да и вообще любой другой в иной цветовой схеме можно мгновенно преобразовать в модель HSL с помощью замечательного сервиса с банальным названием "Конвертер цветов", вот только при преобразовании цвета в модель HSL, для супер точности, необходимо поле "Точность округления (кол-во знаков после запятой)" увеличить до девяти знаков. По факту вытянуть значения для HSL можно и с помощью LESS. Вот так:

@color: #3399ff;
@h: hue(@color);        /* = 210 */
@s: saturation(@color); /* = 100% */
@l: lightness(@color);  /* = 60% */

• Hue (H) — непосредственно сам цвет от 0 до 360;
• Saturation (S) — насыщенность этого цвета от 0 до 100%;
• Lightness (L) — светлота цвета от 0 до 100% (это степень отличия цвета от белого и черного).

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

Я до конца не сформулировал степень важности этой статьи в простеньких проектах, но вот несколько примеров где я использую манипуляции с цветом по модели HSL. Ниже пара примеров из практики:

@defBgColor: #ff0000;
.block {
     .gradient-vertical( @defBgColor, darken( saturate( @defBgColor, 15.606550644% ), 4.31372549% ) );
     color: spin( lighten( saturate( @defBgColor, 14.767114266% ), 5.882352941% ), -4 );
}

Что получается здесь? Параметр @defBgColor в моем проекте меняется на различные цвета на основе цикла, для того чтобы результат меня устроил с разными цветами и сам цвет "не пропадал", а так же смотрелся хорошо и с точки зрения дизайна, я беру основной цвет и отбавляю либо прибавляю насыщенности(S) и светлоты(L) цвета, в некоторых случаях немного меняю и сам цвет(H). В результате, если я меняю цвет(H) — он почти идеально вписывается во весь макет. По факту я меняю только одну строчку с цветом, а градиенты и прочая шелуха меняется сама по себе, а поскольку я настроил супер точность, никаких визуальных неполадок с оттенками цветов я не встречал.

На самом деле это довольно кропотливая работа, во первых я беру параметры первого цвета, а потом беру цвет который нужно получить и на калькуляторе высчитываю сколько и чего мне нужно прибавить/отбавить. Встречал кто-нибудь удобный калькулятор для таких вычислений?

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

@defBgColor: #ff0000;
.block {
     background: hsl( hue(@defBgColor), 100%, 95% );
}

Тут просто берется значение самого цвета(H), а насыщенность и светлота уже заданы по умолчанию. Это позволяет делать определенные оттенки нужного цвета. И цвета перестают иногда "пропадать".

Кто располагает идеями как максимально практично использовать манипуляции с цветом на LESS, прошу в комментарии.