Манипуляции с цветами

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

Препроцессор Less предоставляет широкий спектр функций, позволяющих работать с цветами настолько тесно, насколько это вообще возможно.

Функции определения цвета

При определении цветов Less заменяет некоторые стандартные объявления, принятые в CSS. Так, например, работает функция rgb(), возвращающая вместо традиционной записи цвет в формате HEX.

Если функции rgb() и rgba() в особых комментариях не нуждаются, то прочие требуют к себе особого внимания и понимания. Однако, сначала посмотрим на синтаксис для первых двух:

rgb(red, green, blue)
rgba(red, green, blue, alpha)

Параметры функции полностью совместимы с синтаксисом, принятым в CSS. Разница лишь в том, что функция rgb() преобразует RGB-формат записи цвета в HEX-формат. Также можно использовать не только стандартные значения из диапазона 0..255, но и процентную запись (0..100%).

Замечание

Функция rgba() не производит никаких манипуляций, так как HEX-формат не поддерживает альфа-канал, задающий прозрачность.

Еще одним представителем семейства RGB является функция argb(), которая преобразует RGB-формат записи цвета в модифицированный HEX-формат, используемый в браузерах Internet Explorer и некоторых платформах (.NET, Android). Эта функция принимает на вход цвет в формате RGBA:

argb(rgba(red, green, blue, alpha))

Важно отметить, что после компиляции HEX-код цвета имеет формат #AARRGGBB, а не привычный для нас #RRGGBBAA.

Семейство HSL

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Синтаксис функции имеет вид:

hsl(hue, saturation, lightness)

Оттенок задаётся с помощью градусной меры и может иметь значение от 0 до 359. Эти значения соответствуют градусам на цветовом круге.

Второе и третье числа в скобках означают насыщенность и светлоту соответственно и задаётся в процентах. Чем ниже значение насыщенности, тем более приглушённым становится цвет. Значение saturation, равное нулю, приведёт к серому цвету, при этом неважно, какое значение имеет hue. Третье значение позволяет указать яркость цвета. Чем значение ниже, тем более тёмный получается оттенок цвета, чем выше, тем светлее. При значении 100% у lightness получается белый цвет, соответственно, если 0% – чёрный.

HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer ниже 8 версии. Однако, нам не нужно заботиться о поддержке браузерами, так как препроцессор Less преобразует запись функций hsl() и hsla(), соответственно в HEX и RGBA форматы.

hsl(60, 100%, 50%)      // #ffff00
hsla(60, 100%, 50%, .5) // rgba(255, 255, 0, 0.5)

Замечание

Помимо процентного определения значения насыщенности и светлоты можно использовать значение в диапазоне от 0 до 1.

Семейство HSV (HSB)

Аббревиатура HSV расшифровывается как: Hue (тон), Saturation (насыщенность), Value (значение). Иногда эту модель называют HSB, где последняя буква означает Brightness (яркость). Следует отметить, что HSV и HSL — две разные цветовые модели (Lightness — светлота, что отличается от яркости, которую задаёт параметр value).

Синтаксис данных функций имеет вид:

hsv(hue, saturation, value)
hsva(hue, saturation, value, alpha)

Также как и в случае с HSL препроцессор преобразует получаемые значения в hex и RGBA:

hsv(60, 100%, 50%)      // #808000
hsva(60, 100%, 50%, .5) // rgba(128, 128, 0, 0.3)

Замечание

Помимо процентного определения значения насыщенности и яркости можно использовать значение в диапазоне от 0 до 1.

Функции цветового канала

Как уже отмечалось выше, в Less используются функции для работы с форматами RGB, HSL и HSV, а также их аналогами с возможностью указания альфа-канала, задающего прозрачность. Чтобы получить значения каналов этих форматов, можно использовать встроенные функции.

Для RGB:

• red()
• green()
• blue()

Для HSL:

• hue()
• saturation()
• lightness()

Для HSV:

• hsvhue()
• hsvsaturation()
• hsvvalue()

Общие функции для RGB, HSL и HSV:

• aplha()
• luma()
• luminance()

Функции luma() и luminance() вычисляют, соответственно, яркость (яркость по восприятию или свечение) и яркость по восприятию (свечение) без коррекции гаммы.

Замечание

Функция liminance() устарела и, начиная с версии 1.7.0, функция luma() вычисляет яркость по восприятию без коррекции гаммы.

Функции операций с цветами

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

Манипулирование насыщенностью цвета (Saturate и Desaturate)

Функция saturate() позволяет увеличить насыщенность цвета, заданного в формате HSL. Так, например, чтобы увеличить насыщенность цвета, параметры которого имеют значения 60, 40%, 50% на 20%, нужно:

@hsl: hsl(60, 40%, 50%) // #b2b34d
saturate(@hsl, 20%)     // #cccc33

Функция desaturate() является обратной функцией saturate() и уменьшает значение насыщенности цвета. Например, вручную увеличим насыщенность цвета, который использовался ранее и проверим работу функции saturate():

@hsl: hsl(60, 60%, 50%) // #cccc33
desaturate(@hsl, 20%)   // #b3b34c

Обратите внимание на то, что значение полученное в ходе выполнения функции desaturate() отличается от того, что было задано в первом примере.

Осветление и затемнение цвета (Lighten и Darken)

Функция lighten() (осветление) увеличивает значение параметра светлоты (Lightness) на указанное значение, тогда как функция darken(), обратная ей, уменьшает его.

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

Работа с прозрачностью (Fade, Fadein, Fadeout)

Функция fade() устанавливает значение альфа-канала, задающего прозрачность, в формате HSL, тем самым преобразуя формат из HSL в HSLA.

Соответственно, функция fadein() увеличивает значение альфа-канала, а функция fadeout(), обратная ей, уменьшает его.

Управление тоном (Spin)

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

Функция spin() позволяет задавать значение, на которое отклоняется угол тона (Hue) на цветовом круге. На вход, как и другие функции, она принимает цвет в удобном для вас формате и положительное или отрицательное значение, на которое будет отклоняться угол тона. Например, если значение угла тона соответствует 245 и передать в функцию значение -45, то новое значение будет 200:

spin(hsl(245, 50%, 50%), -45) // #4095bf
hsl(200, 50%, 50%) // #4095bf

Обратите внимание, что если вы передаёте в функцию spin() значение в формате RGB, то оно преобразуется в формат HSL и не сохраняет оттенок серого, так как оттенок не имеет смысла, если нет никакого насыщения.

Таким образом, если в функцию передать оттенок серого, то результат будет равен исходному, за исключением того, что Less может преобразовать короткую запись цвета в полную:

spin(#ccc, 40%)    // #cccccc
spin(#aaaaaa, 10%) // #aaaaaa

Смешивание цветов в пропорциях (Mix)

Функция позволяет смешивать цвета в заданной пропорции, при этом учитывая значения альфа-канала. Попытаемся смешать два белых цвета с указанной прозрачностью и пропорциями:

mix(rgba(255, 255, 255, 1), rgba(255, 255, 255, .5), 50%)
// rgba(255, 255, 255, 0.75)
mix(rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), 60%)
// rgba(255, 255, 255, 0.56)

Если не углубляться в вычисление значений красного, зелёного и синего, то показать правильность работы этой функции можно на основе расчёта значения прозрачности:

1 * 50 / 100 + 0.5 * (1 - 50 / 100)
// 0.75
0.8 * 60 / 100 + 0.2 * (1 - 60 / 100)
// 0.56

Обесцвечивание цвета (Grayscale)

Функция grayscale() позволяет обесцветить цвет, что соответствует удалению его насыщенности. По сути своей, представляет собой обёртку над функцией desaturate().

Нахождение контрастного цвета (Contrast)

Функция contrast() находит цвет, контрастный на фоне другого. Позволяет автоматизировать подбор контрастного цвета, в зависимости от цвета на входе. Так, например, контрастный цвет для белого — чёрный:

contrast(#fff) // #000

Функция принимает на вход до четырёх параметров:

• color — основной цвет для сравнения
• dark — тёмный цвет (опционально, изначально чёрный).
• ligth — светлый цвет (опционально, изначально белый).
• threshold — порог, позволяющий задать преобладание тёмного или светлого цвета при определении контрастного цвета (опционально, изначально 43%).

Посмотрим на работу порогового значения на примере:

contrast(green, black, white, 30%) // #000
contrast(green, black, white, 43%) // #fff
contrast(green, black, white, 80%) // #fff

Функции смешивания цветов

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

Режим наложения цветов (Multiply и Screen)

Функция Multiply (Умножение) накладывает один цвет на другой. При этом происходит перемножение значений каналов RGB. В результате цвет становится темнее.

Функция Screen (Экран) является противоположной для первой функции и при вычислениях использует инвертированные значения каналов RGB. Эта функция осветляет цвет.

Управление контрастностью (Overlay, Soft light и Hard light)

Все эти функции входят в группу функций контрастности, которые увеличивают контрастность цвета.

Функция Overlay (Перекрытие) основана на работе функций Multiply и Screen, которые были рассмотрены ранее. Эта функция равномерно смешивает два цвета и делает их светлее или темнее, в зависимости от определяющего цвета, передаваемого как первый параметр.

Функция Soft light (Мягкий свет) делает результирующий цвет более тёмным или светлым в зависимости от совмещенного цвета. Если вносимый цвет (второй параметр) светлее 50-процентного серого, исходный цвет становится светлее. Иначе, если вносимый цвет темнее 50-процентного серого, исходный цвет затемняется.

Функция Hard light (Жёсткий свет) работает так же, как и функция Overlay. Разница лишь в том, что передаваемые параметры меняются местами при вызове функции Overlay.

Функции разницы и исключения (Difference и Exlusion)

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

Функция Exlusion (Исключение) аналогична работе функции Difference, но применяется для цветов с низкой контрастностью.

Функция среднего и отрицания (Average и Negation)

Все предыдущие функции смешивания цветов основывались на рекомендациях консорциума всемирной сети (W3C). Функции Average и Negation были разработаны для удобства создателями препроцессора.

Функция Average (Среднее) находит среднее между двумя цветами. Работа этой функции основана на принципах школьной математики, где слагаемыми выступают числа. Так как мы работаем с RGB-форматом, то здесь происходит нахождение среднего для каждого канала между двумя цветами.

Функция Negation (Отрицания) основана на работе функции Difference с той лишь разницей, что результат вычитается из 1. В результате получается цвет, который ярче исходного.

Выводы и мысли

Если сайт имеет различные цветовые палитры для тем, то возможно автоматически манипулировать цветами. При этом, если изменить одну единственную переменную, в которой указан основной цвет темы, может полностью смениться палитра сайта, причём без ручного изменения значения цвета у каждой переменной. Удобный и логичный функционал, но на деле он используется крайне редко, так как быстрее и проще определить цвет по предоставленному дизайнером изображению, нежели чем строить конструкции из функций для манипуляции цветом.