Дизайн
Alex Karoza

Альтернативы RGB

Люди знают о цветовом кодировании 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 всегда получаются крутые градиенты, и грамотно это применять.

Изменить цвет, не меняя яркость и насыщенность

Очень часто надо сделать элементы разных цветов, но с одинаковой насыщенностью и яркостью, для этого в редакторе цвета дизайнер двигает полоску цветового тона снизу, не трогая положение кружочка вверху.

Запрос в Гугле: color picker

Но как это делать автоматически, ведь в системе RGB меняется значение каждой координаты при перемещении ползунка. Здесь на помощь приходят радиальные системы кодирования цвета, где цвет задаётся одной координатой, а не несколькими, например уже известная HSV, а также HSL. И радиальная версия Lab, которая называется Lch.

Рассмотрим реальный кейс

Задача: для пользователей одной роли должны генерироваться светлые аватарки с тёмными буквами, а для другой роли тёмные с белыми буквами.

Решение: копируем один из цветов в дизайне, переводим в HSL (Hue, Saturation, Lightness). HSL используем потому, что этот стандарт поддерживается в CSS.

Скрин из дизайнерского макета

Теперь меняя Hue, мы можем менять цвет, сохраняя светлость и насыщенность. Для светлого фона HSL: [0°–360°], 100%, 78%, а для тёмного HSL: [0°–360°], 100%, 30%. Параметр Hue можно генерировать из хэш-функции названия, либо из количества символов в названии.

Вывод

Нужно знать об альтернативных системах цвета и использовать там, где это нужно.

Ссылки по теме:

0
17 комментариев
Написать комментарий...
Игорь Криволь

Хорошая статья, особенно круто что рассмотрен реальный кейс.

Ответить
Развернуть ветку
Kamil Kashaev

Для фигмы готовый плагин

Ответить
Развернуть ветку
Roman Trifonov

Для градиентов полезный сервис, спасибо.

Ответить
Развернуть ветку
El Urbik

*Cyan. А про градиенты любопытно 👍

Ответить
Развернуть ветку
Арсений Петрович

Hsb / hsl самая кайфовая система для работы и подбора цвета - для дизайнера. 
Cmyk - для печати, rgb - параметры пикселей монитора. Зачем и кому нужен lab - хз. Вроде это какая-то техническая история для перевода из одной системы в другую. 

Ответить
Развернуть ветку
Alex Karoza
Автор

Lab сделан с учётом восприятия цвета человеческим глазом, т.е. там очень важно, чтобы путь от одного цвета к другому проходил максимально естественно для глаза, не через какие-то левые цвета. Именно по этому оно так кайфово работает в градиентах. Градиенты через Lab можно использовать, например, в транспортных схемах, на видео по третьей ссылке об этом рассказано подробнее. Сейчас я практически все градиенты через Lab делаю, так красивее.

Ответить
Развернуть ветку
Александр Крофт

Lab используют ретушеры/цветокорректоры в фотографии. Не все, конечно, а самые продвинутые.

Ответить
Развернуть ветку
Арсений Петрович

Александр, спасибо. Я помню раньше блюрили шум цветных каналов, оставляя lightness. Помню трюк с заменой зелёной машины на красную. 
Сейчас шумы в фотоубирают в raw, цвет удобнее сделать gradient map. 
Какие операции вам удобно делать в lab?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Yury S

Актуально accessibility. Цвета могут быть в общем любые, но помните о людях со слабым зрением и дальтониках. 

Ответить
Развернуть ветку
Gre Li

Она была актуальна в 90-е, когда видеокарты были примитивные и не могли отображать много цветов. Но с тех пор прогресс пошёл сильно дальше, и сейчас это интересно разве что как реликт. Ну, или вы делаете демку для процессора уровня 80386.

Ответить
Развернуть ветку
Alex Karoza
Автор

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

Ответить
Развернуть ветку
Daice Hawk

Статья айтишника, дилетанта в колориметрии. Для градиентов для L*a*b в данной конкретной реализации для противоположных цветов (желтый-синий, аквамарин-красный, зеленый - маджента) просто подбирается окружной путь вокруг точки белого, сохраняя насыщенность, например, или насыщенность/светлоту. Никакой магии. CMYK само по себе как модель цветообразования беднее по охвату не всегда, это не данность, может превосходить RGB-реализации. Ну, для дизайнеров на экране статья годная. Автор прав, что за всеми этими преобразованиями стоит нехилый математический аппарат и десятилетия исследований. 

Ответить
Развернуть ветку
Paul Zheleznyak

Крутая статья. Спасибо. Прямо магия какая-то

Ответить
Развернуть ветку
Alex Karoza
Автор

Если ссылка на так и не заработает, то вот аналог https://jsfiddle.net/vis4/fsvVM/

Ответить
Развернуть ветку
Alex Karoza
Автор
Ответить
Развернуть ветку
Aleksei Novikov

А можно поставить в центр градиента дополнительную точку (станет того же цвета) и для неё в режиме HSL покрутить насыщенность с яркостью, не трогая тон:

Ответить
Развернуть ветку
Читать все 17 комментариев
null