Люди знают о цветовом кодировании RGB, где через смесь красного (Red), зелёного (Green) и синего (Blue), смешивается нужный цвет и отображается на экране. Печатники и дизайнеры знают о CMYK (Cyan, Magenta, Yellow, Key color), который применяется для печати на белом, а последний из цветов отвечает за чёрный.
Кстати, CMYK намного беднее RGB, что надо учитывать, когда готовишь макет к печати, ведь некоторых цветов из RGB нет в CMYK.
Но это не единственные способы закодировать цвет, например можно отойти от смешивания цветов, как это сделано в цветовой системе HSV, где Hue — цветовой тон, Saturation — насыщенность цвета, т.е. чем больше параметр, тем ближе к чистому цвету, а чем меньше, тем к нейтральному серому, а Value — значение, которое отвечает за яркость, чем выше, тем светлее, чем ниже, тем темнее. Также эту систему называют HSB, из-за Brightness.
Но сейчас будем говорить о цветовой системе Lab, которая учитывает человеческое восприятие и решает задачи, которые так просто не решаются в RGB. И немного об Lch.
Проблема грязных градиентов
Если построить градиент от одного цвета к другому в RGB, то с некоторыми цветами получится красиво, а с некоторыми полное уродство.
Между двумя цветами образуется какой-то странный и неестественный серый. Можно добавить промежуточный цвет, чтобы сделать красоту, но этот цвет сложно подобрать, чтобы он выглядел естественно.
Тут и помогает цветовая система Lab, учитывающее цветовое восприятие глазами человека.
Для создания такого красивого градиента заходим на davidjohnstone.net/pages/lch-lab-colour-gradient-picker и выбираем два цвета, между которыми надо сделать переход и нужное количество ступеней, семи обычно хватает.
Далее копируем цвета рядом с колонкой Lab и переносим в свой редактор, делая линейный градиент из выбранного количества шагов. Получается красота.
Сама система Lab устроена довольно сложно, но суть в том, что светлота задаётся через L, а цветовые показатели через координаты a и b. Внутри там страшные формулы, ведь система делалась для людей, а не компьютеров, зато очень кайфовый результат. Главное запомнить, что в Lab всегда получаются крутые градиенты, и грамотно это применять.
Изменить цвет, не меняя яркость и насыщенность
Очень часто надо сделать элементы разных цветов, но с одинаковой насыщенностью и яркостью, для этого в редакторе цвета дизайнер двигает полоску цветового тона снизу, не трогая положение кружочка вверху.
Но как это делать автоматически, ведь в системе RGB меняется значение каждой координаты при перемещении ползунка. Здесь на помощь приходят радиальные системы кодирования цвета, где цвет задаётся одной координатой, а не несколькими, например уже известная HSV, а также HSL. И радиальная версия Lab, которая называется Lch.
Рассмотрим реальный кейс
Задача: для пользователей одной роли должны генерироваться светлые аватарки с тёмными буквами, а для другой роли тёмные с белыми буквами.
Решение: копируем один из цветов в дизайне, переводим в HSL (Hue, Saturation, Lightness). HSL используем потому, что этот стандарт поддерживается в CSS.
Теперь меняя Hue, мы можем менять цвет, сохраняя светлость и насыщенность. Для светлого фона HSL: [0°–360°], 100%, 78%, а для тёмного HSL: [0°–360°], 100%, 30%. Параметр Hue можно генерировать из хэш-функции названия, либо из количества символов в названии.
Вывод
Нужно знать об альтернативных системах цвета и использовать там, где это нужно.
Хорошая статья, особенно круто что рассмотрен реальный кейс.
Для фигмы готовый плагин
Комментарий недоступен
*Cyan. А про градиенты любопытно 👍
Hsb / hsl самая кайфовая система для работы и подбора цвета - для дизайнера.
Cmyk - для печати, rgb - параметры пикселей монитора. Зачем и кому нужен lab - хз. Вроде это какая-то техническая история для перевода из одной системы в другую.
Lab сделан с учётом восприятия цвета человеческим глазом, т.е. там очень важно, чтобы путь от одного цвета к другому проходил максимально естественно для глаза, не через какие-то левые цвета. Именно по этому оно так кайфово работает в градиентах. Градиенты через Lab можно использовать, например, в транспортных схемах, на видео по третьей ссылке об этом рассказано подробнее. Сейчас я практически все градиенты через Lab делаю, так красивее.
Lab используют ретушеры/цветокорректоры в фотографии. Не все, конечно, а самые продвинутые.
Александр, спасибо. Я помню раньше блюрили шум цветных каналов, оставляя lightness. Помню трюк с заменой зелёной машины на красную.
Сейчас шумы в фотоубирают в raw, цвет удобнее сделать gradient map.
Какие операции вам удобно делать в lab?
Комментарий недоступен
Актуально accessibility. Цвета могут быть в общем любые, но помните о людях со слабым зрением и дальтониках.
Она была актуальна в 90-е, когда видеокарты были примитивные и не могли отображать много цветов. Но с тех пор прогресс пошёл сильно дальше, и сейчас это интересно разве что как реликт. Ну, или вы делаете демку для процессора уровня 80386.
Если речь про 216 цветов, то лично я себя ими не ограничиваю. Иногда надо быть осторожным с переходными цветами, например с синеватым фиолетовым, он на одних экранах будет фиолетовым, на других синим. Но с другой стороны, вряд ли это сильно испортит дизайн, если он сделан хорошо.
Статья айтишника, дилетанта в колориметрии. Для градиентов для L*a*b в данной конкретной реализации для противоположных цветов (желтый-синий, аквамарин-красный, зеленый - маджента) просто подбирается окружной путь вокруг точки белого, сохраняя насыщенность, например, или насыщенность/светлоту. Никакой магии. CMYK само по себе как модель цветообразования беднее по охвату не всегда, это не данность, может превосходить RGB-реализации. Ну, для дизайнеров на экране статья годная. Автор прав, что за всеми этими преобразованиями стоит нехилый математический аппарат и десятилетия исследований.
Крутая статья. Спасибо. Прямо магия какая-то
Если ссылка на так и не заработает, то вот аналог https://jsfiddle.net/vis4/fsvVM/
https://web.archive.org/web/20201112011026/http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker#4ccea6,36729e также доступно через веб-архив
А можно поставить в центр градиента дополнительную точку (станет того же цвета) и для неё в режиме HSL покрутить насыщенность с яркостью, не трогая тон: