Универсальная система формирования цветовой палитры
Сложно сосчитать, сколько подходов к подбору цветовой палитры для проектов мы перепробовали. А самое главное, что с годами, появились новые знания и технические возможности. В итоге в 2020 году мы сформировали и обкатали на реальных проектах следующую систему, которой спешу поделиться.
Решение представляет собой следующую матрицу:
При первом взгляде может показаться, что тут все очень сложно, и возникнуть недоумение «зачем столько цветов?!». Но на самом деле все очень просто и для дизайна, и для разработки.
Давай, разбираться.
Почему так устроено?
Кратко (подробнее ниже): мы разложили цвета по функциям, теперь однозначно понятно в какой ситуации, какой цвет употребляется, при этом не возникает дефицита цветов.
Какие проблемы это решает?
- Налаживается понимание между разработчиками и дизайнерами.
- Больше не стоит ломать голову использовать в данной ситуации цвет Red-300 или Red-400?
- Не смотря на огромную матрицу, в большинстве проектов не используются все оттенки, но она позволяет четко понимать, как организовать имеющиеся.
Почему же этим удобно пользоваться?
- Можно независимо перекрашивать тексты, фоны, иконки и пр.
- Система универсальна и подходит для любого проекта: в самом простом можно обойтись строчкой Root (но мы так не делаем, даже в самом простом проекте, система у нас внедрена на уровне ДНК), а также ее можно масштабировать до неограниченного количества сущностей (ну ограничивается только здравым смыслом).
Принципы организации
По смыслу
Мы разбили цвета на следующие группы:
Base и Faint
Базовые условно-ахроматические цвета, цвета для технической информации. Base — более контрастный, Faint — второстепенный, с меньшей контрастностью.
Условно — потому что стараемся не использовать «чистых» черного (#000000) и белого (#FFFFFF) из-за возможной ненатуральности и резких контрастов, а также градации серого из-за оптически грязного цвета особенно в сочетании с другими ахроматическими цветами.
Accent и Complement
Фирменная палитра бренда. Акцент — это основной цвет — им будут обозначены активные элементы. А цвет Complement может вообще отсутствовать или их может быть несколько штук.
Critic, Warning и Success
Сервисные цвета, для вывода ошибок, предупреждений и удачных действий пользователя.
По назначению
Каждый из этих цветов имеет свои вариации:
Root
Изначальный цвет — первоисточник — используется для плашек, кнопок и остальных элементов с солидной заливкой. Им можно красить и заголовки в крупном размере и при достаточной толщине штриха.
Back
Фоновые полупрозрачные цвета — хорошо подходят для бейджей, плашек, текстовых выделений и пр.
Text
Тексты имеют сильно меньшую площадь заливки по сравнению с плашками, поэтому при наборе Root цветом, они будут казаться светлее и бледнее, что снизит контрастность и может негативно сыграть на возможности чтения.
Icon
Небольшие иконки тоже, как правило, имеют меньший цветовой объем и поэтому, как правило, требуют отдельного цвета. Если иконки линейные с толщиной линий 1 px, то к ним стоит применять цвет для текста.
Line
Для линий, как ты понимаешь уже, тоже есть свой стиль. Просто иногда требует отличить линию от текста по насыщенности, например.
Fancy
Различные градиенты: простые и сложные, линейные, радиальные или даже ангулярные.
В свою очередь, каждый из этих цветов может иметь цвета-спутники — сдвиг оттенка в осветление или затемнение. Например, для затемнения интерактивного объекта при наведении или может потребуется сделать какой-то объект чуть светлее.
По условиям
Один и тот же цвет смотрится по-разному при размещении на темных и светлых фонах. Поэтому мы делаем дубль для каждого из цветов, описанных выше, которые будут отлично выглядеть на темных фонах.
Главное не путать это с темной темой — для нее нужно создавать отдельную матрицу.
Подбор оттенков
Отличная система, но с ума сойдешь подбирать все оттенки. Мы раньше тратили кучу времени, подбирая каждый раз все оттенки вручную. Но однажды Валя заметил закономерность и придумал как автоматизировать процесс и сделать его более предсказуемым.
Он разложил HSL палитру на отдельные цветовые ячейки и разбросал на них созданные нами ранее разные цветовые оттенки, и оказалось, что не смотря на ручной труд, мы каждый раз очень близко подбирали цвета на глаз по данной схеме. И оказалось более эффективным — разложить автоматически все цвета, а если что-то уже не так будет, то точечно выровнять оптические искажения.
Заменяешь Root Target Color на свой цвет и матрица выдает предпочтительные варианты оттенков для цветов в системе (Base, Faint и Accent). Таким же образом подбираются оттенки и для комплементарных и сервисных цветов, причём Base и Faint можно построить за счет них. Цветовые ячейки расположены уже таким образом, чтобы образовывался нужный контраст. При этом данные положения — это лишь рекомендация — можешь выбрать свои оттенки из соседних, например.
Температура оттенков Base и Faint (теплый/холодный) исходит от температуры выбранного для селекции цвета.
Сервисные цвета изначально можно подобрать таким путем:
Варианты построения сервисных цветов на основе Accent и Complement.
Выводы
Данная система дает универсальный структурированный подход к созданию цветовых палитр, обеспечивая логичное деление цветов на все случаи жизни. Принцип обеспечивает предсказуемые и гармоничные цветовые комбинации, применимые к разным проектам. Автоматизация подбора оттенков помогает достигать стабильных результатов и исключает ошибки. При этом цвета при необходимости можно скорректировать вручную.
Подход понятен, логичен, универсален, гибок и может использоваться в различных условиях отображения, что делает его незаменимым инструментом для дизайнеров и разработчиков.