Пипетка!

Пост серьёзный, я предупреждаю, а пипетка — служит мне лидогенератором! Я потом по метрике охваты посмотрю)

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

С выбором обычного цвета и прозрачности разобрались быстро — взяли цветовую модель HSB, и я добавил выбор альфа-канала, потому что прозрачность тоже необходимо регулировать. Расскажу чуть базы, а потом про интересное.

Цветовые модели — математические системы для точного описания цветов. По сути, трёхмерные координатные сетки. Цветовых моделей несколько и в них дизайнеру важно разбираться. По мне так не только важно, но и занимательно!

Есть RGB для излучаемого цвета. Все электронные устройства излучают свет по трём каналам — red, green, blue. Смешиваясь в разных пропорциях эти цвета образуют многообразие всех остальных.

CMYK – для отражаемого цвета. Напечатать RGB не получится, потому что там цвет образуется благодаря добавлению света. «Засветить» красками бумагу невозможно. Поэтому принтеры используют cmyk в той или иной версии (cyan, magenta, yellow, black). Печатают мелкими точками, которые на расстоянии оптически смешиваются, образуя новые цвета. На этом же принципе выстроена живопись импрессионистов — например, Моне и Ван Гога.

Казалось бы, вот и всё, но нет. Работать на экранах в RGB неудобно — попробуйте вот так перебором прикидывать, сколько надо «посветить» трёх цветов, чтобы при смешении получить четвёртый. Не все люди художники по призванию. Поэтому придумали HSB, который регулирует оттенок (hue), насыщенность (saturation) и яркость (brightness). И вот это сразу становится интуитивно. Выставили отдельно цвет, затем насколько он насыщенный и светлый — удобно, огонь, можно работать!

База закончена, теперь про интересное.

Есть изъян в этой математической системе HSB — она геометрическая, ровная, аккуратная. А вот человеки — нет. И поэтому идеальная модель не срабатывает для нас. Бадум-тсс!

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

Поэтому когда мы рисуем градиент, например, от красного к синему или от синего к жёлтому, при использовании моделей RGB или HSB — между цветами получается какая-то муть. Математически всё стройно, но выглядит ужасно.

Тогда эксперты в CIE придумали модель LCH, которая учитывает восприятие человеком цветов и делает на него поправку. И если через LCH строить градиенты — получается сразу красота! Красота, у которой пока не супер поддержка в браузерах и приложениях. Ну вот в фигме нельзя в LCH работать, к примеру.

Вернёмся к пипетке и градиентам. В интерфейсе планируем использовать HSB (удобно), на беке пересчитывать в LCH (гуманистично), интерполировать цвет (красиво), пересчитывать обратно в HSB (удобно), в идеале показывая ещё HEX (тоже удобно). А затем софт и драйвера преобразуют это дело в RGB, на который мы смотрим в мониторе.

Круто же, а!

Ну и просто сравните градиент, выстроенный по разным цветовым моделям, насколько LCH выдаёт более приятный и сбалансированный результат.

А пипетку мы задизайним — всем на зависть!