Как делать чистые градиенты

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

В работе над редизайном приложения Почты России мы пробовали разные способы подчеркнуть в визуальной коммуникации нашу уникальность. В том числе думали о градиентах. Под градиентами мы понимаем любые объекты, в которых один цвет переходит в другой. К ним можно отнести и тени. Оказалось, с градиентами связано много вопросов (вроде использования их в тёмной теме), и часть из них мы рассмотрели в этой статье.

Представьте любую из ситуаций:

• Пришёл продакт-оунер и попросил сделать дизайн помоднее и посочнее, добавить градиентов на кнопки и отдельные экраны;

• Дизайнер известно где почерпнул вдохновения и решил привнести в продукт чего-то нового;

• Пришло пожелание от дизайн-директора или художественного руководителя, и дизайнер задумался о градиентах.

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

Такие градиенты в дизайн-сообществе принято называть грязными. Это ощущение сложно объяснить словами. Если увеличить изображение, то где-то в середине перехода можно увидеть серое пятно. Даже подорожник не спасёт этот градиент.

В Фигме при построении перехода от цвета А к цвету Б почти всегда по умолчанию получается такой результат. Проблема не столько в программе, сколько в дизайнерах, которые не понимают цветовой модели RGB.

Если взять любой градиент, в котором начальный и конечный цвет комплементарны, посередине фигуры всегда будет цвет с нулевой насыщенностью (Saturation) и половинной яркостью (Brightness).

Компьютер работает с цветовой моделью RGB, в которой сложно понять, как строится цвет.

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

При переходе по поверхности куба (например, от жёлтого к зелёному) градиент будет чистым.

Если нужен чистый переход именно от жёлтого к синему, можно добавить промежуточную точку или несколько, чтобы получился радиальный переход (не обязательно в виде кривой, как на картинке, линии могут быть прямыми).

В цветовой модели HSB можно пропускать серые зоны, увеличивая значения Saturation и Brightness на 5−15 единиц. Hue не стоит увеличивать больше чем на 5 единиц, иначе появятся цвета, слабо связанные друг с другом.

Сделать это можно руками или с помощью сервисов, генерирующих радиальные переходы ^[3] и подбирающих промежуточный цвет.

По умолчанию любой заданный фигуре градиент занимает одинаковым цветом примерно половину фигуры. На картинке 25% занято почти одинаковым красным (Hue 0−15) и ещё 25% — голубым (Hue 160−175). Чтобы это исправить, надо вынести ползунки градиента немного за пределы фигуры.

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

В CSS эти параметры указаны вот такими жёлтыми значениями. У начального цвета параметр позиции будет иметь значение −13%, то есть градиент начнётся за границей фигуры. Промежуточный цвет будет ровно посередине (50%), а конечный цвет окажется на 13% за пределами фигуры (113%).

Также можно задать направление градиента — это первый параметр в нашем примере, равный 270 градусам (270deg).

Таким образом проблема с градиентами решена, и город может спать спокойно.