Альтернативы RGB
Tags: design, gradients, russian
Published: 2021-06-30 17:15:43

Люди знают о цветовом кодировании RGB, где через смесь красного (Red), зелёного (Green) и синего (Blue), смешивается нужный цвет и отображается на экране. Печатники и дизайнеры знают о CMYK (Cyan, Magenta, Yellow, Key color), который применяется для печати на белом, а последний из цветов отвечает за чёрный.

Но это не единственные способы закодировать цвет, например можно отойти от смешивания цветов, как это сделано в цветовой системе HSV, где Hue — цветовой тон, Saturation — насыщенность цвета, т.е. чем больше параметр, тем ближе к чистому цвету, а чем меньше, тем к нейтральному серому, а Value — значение, которое отвечает за яркость, чем выше, тем светлее, чем ниже, тем темнее. Также эту систему называют HSB, из-за Brightness.
![RGB vs HSV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcnx5ji1l4qkw5pft6vd.png)
Но сейчас будем говорить о цветовой системе Lab, которая учитывает человеческое восприятие и решает задачи, которые так просто не решаются в RGB. И немного об Lch.

##Проблема грязных градиентов
Если построить градиент от одного цвета к другому в RGB, то с некоторыми цветами получится красиво, а с некоторыми полное уродство. Связано это с самим устройством цветового пространства RGB.
![Красивые и некрасивые градиенты](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndv1ll1djjjfi8moq6sg.png)
Между двумя цветами образуется какой-то странный и неестественный серый. Можно добавить промежуточный цвет, чтобы сделать красоту, но этот цвет сложно подобрать, чтобы он выглядел естественно.
![Попытка подобрать цвет вручную](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0xyojykg3adkuihw87i.png)
Тут и помогает цветовая система Lab, учитывающее цветовое восприятие глазами человека.
![Некрасивый RGB-градиент и красивый Lab-градиент](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zk65hlvpoluyv47m08jx.png)
Для создания такого красивого градиента заходим на [Lch and Lab colour and gradient picker](https://web.archive.org/web/20201112011026/http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker) и выбираем два цвета, между которыми надо сделать переход и нужное количество ступеней, семи обычно хватает.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8d8i4z41w82benzzd2b.png)
Далее копируем цвета рядом с колонкой Lab и переносим в свой редактор, делая линейный градиент из выбранного количества шагов. Получается красота.
![Интерфейс Color Picker в Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6wlap4n2wrip4qelcxc.png)
Сама система Lab устроена довольно сложно, но суть в том, что светлота задаётся через L, а цветовые показатели через координаты a и b. Внутри там страшные формулы, ведь система делалась для людей, а не компьютеров, зато очень кайфовый результат. Главное запомнить, что в Lab всегда получаются крутые градиенты, и грамотно это применять.
Также для красивых градиентов создали [Gradient Generator Tool](https://learnui.design/tools/gradient-generator.html), который не использует Lab или Lch, но избегает грязных цветов в центре RGB-спектра.
![Градиент через дугу на цветовом круге](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eeoc0o0yy6awbap3r82d.png)

##Изменить цвет, не меняя яркость и насыщенность
Очень часто надо сделать элементы разных цветов, но с одинаковой насыщенностью и яркостью, для этого в редакторе цвета дизайнер двигает полоску цветового тона снизу, не трогая положение кружочка вверху.
![Color Picker в Google-поиске](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yxafwxzrca63bj6sjg4.png)
Но как это делать автоматически, ведь в системе RGB меняется значение каждой координаты при перемещении ползунка. Здесь на помощь приходят радиальные системы кодирования цвета, где цвет задаётся одной координатой, а не несколькими, например уже известная HSV, а также HSL. И радиальная версия Lab, которая называется Lch.

##Рассмотрим реальный кейс
_Задача:_ для пользователей одной роли должны генерироваться светлые аватарки с тёмными буквами, а для другой роли тёмные с белыми буквами.
_Решение:_ копируем один из цветов в дизайне, переводим в HSL (Hue, Saturation, Lightness). HSL используем потому, что этот стандарт поддерживается в CSS.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6fymvj1lpx6mafgt5ac.png)
Теперь меняя Hue, мы можем менять цвет, сохраняя светлость и насыщенность. Для светлого фона `HSL: [0°–360°], 100%, 78%`, а для тёмного `HSL: [0°–360°], 100%, 30%`. Параметр Hue можно генерировать из хэш-функции названия, либо из количества символов в названии.

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

##Ссылки по теме
http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker — сайт для создания Lch и Lab градиентов, в данный момент не работает

https://web.archive.org/web/20201112011026/http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker — веб-архив сайта выше

https://learnui.design/tools/gradient-generator.html — Gradient Generator Tool для создания красивых градиентов с экспортом в SVG и CSS
https://jsfiddle.net/vis4/fsvVM/ — инструмент для создания Lch-градиентов

https://bl.ocks.org/mbostock/3014589 — описание цветовых пространств с примером кода

https://youtu.be/kmlb272BAdo?t=81 — видео Ильи Бирмана о применении цветовой модели Lab в дизайне транспортных схем

https://en.wikipedia.org/wiki/HSL_and_HSV — статья о цветовом пространстве HSL на английской Википедии

https://en.wikipedia.org/wiki/CIELAB_color_space — статья о Lab

https://en.wikipedia.org/wiki/CIELUV#Cylindrical_representation_.28CIELCH.29 — статья о Lch

https://en.wikipedia.org/wiki/Hash_function — статья о хэш-функции