На одном внутреннем мероприятии Илья Полянский рассказал о градиентах и цветовых моделях, а я записал и отредактировал его рассказ.
В работе над редизайном приложения Почты России мы пробовали разные способы подчеркнуть в визуальной коммуникации нашу уникальность. В том числе думали о градиентах. Под градиентами мы понимаем любые объекты, в которых один цвет переходит в другой. К ним можно отнести и тени. Оказалось, с градиентами связано много вопросов (вроде использования их в тёмной теме), и часть из них мы рассмотрели в этой статье.
Представьте любую из ситуаций:
-
Пришёл продакт-оунер и попросил сделать дизайн помоднее и посочнее, добавить градиентов на кнопки и отдельные экраны;
-
Дизайнер известно где почерпнул вдохновения и решил привнести в продукт чего-то нового;
-
Пришло пожелание от дизайн-директора или художественного руководителя, и дизайнер задумался о градиентах.
Задача кажется простой: открыть Фигму, заменить сплошную заливку линейным градиентом и выбрать два цвета. Дизайнер чувствует себя уверенно, у него всё быстро получается, но он замечает: что-то не то.
Такие градиенты в дизайн-сообществе принято называть грязными. Это ощущение сложно объяснить словами. Если увеличить изображение, то где-то в середине перехода можно увидеть серое пятно. Даже подорожник не спасёт этот градиент.
В Фигме при построении перехода от цвета А к цвету Б почти всегда по умолчанию получается такой результат. Проблема не столько в программе, сколько в дизайнерах, которые не понимают цветовой модели RGB.
Если взять любой градиент, в котором начальный и конечный цвет комплементарны, посередине фигуры всегда будет цвет с нулевой насыщенностью (Saturation) и половинной яркостью (Brightness).
Компьютер работает с цветовой моделью RGB, в которой сложно понять, как строится цвет.
Если представить её в виде куба, в его ядре окажутся оттенки серого, поэтому все градиенты, проходящие через ядро (например, от жёлтого к синему) или где-то рядом, будут довольно грязными. Если градиент пройдёт не точно через центр куба, в середине перехода будет цвет с малой насыщенностью, который в контексте градиента тоже окажется грязным.
При переходе по поверхности куба (например, от жёлтого к зелёному) градиент будет чистым.
Если нужен чистый переход именно от жёлтого к синему, можно добавить промежуточную точку или несколько, чтобы получился радиальный переход (не обязательно в виде кривой, как на картинке, линии могут быть прямыми).
В цветовой модели HSB можно пропускать серые зоны, увеличивая значения Saturation и Brightness на 5−15 единиц. Hue не стоит увеличивать больше чем на 5 единиц, иначе появятся цвета, слабо связанные друг с другом.
Сделать это можно руками или с помощью сервисов, генерирующих радиальные переходы и подбирающих промежуточный цвет.
По умолчанию любой заданный фигуре градиент занимает одинаковым цветом примерно половину фигуры. На картинке 25% занято почти одинаковым красным (Hue 0−15) и ещё 25% — голубым (Hue 160−175). Чтобы это исправить, надо вынести ползунки градиента немного за пределы фигуры.
Возникает вопрос: что если вынос ползунков — это внутренний параметр Фигмы, и его сложно будет реализовать в вёрстке.
В CSS эти параметры указаны вот такими жёлтыми значениями. У начального цвета параметр позиции будет иметь значение −13%, то есть градиент начнётся за границей фигуры. Промежуточный цвет будет ровно посередине (50%), а конечный цвет окажется на 13% за пределами фигуры (113%).
Также можно задать направление градиента — это первый параметр в нашем примере, равный 270 градусам (270deg).
Таким образом проблема с градиентами решена, и город может спать спокойно.
Автор: Grav
