Вчера я прочитала пост Ромы Бунина про сервис для создания цветовых палитр и спонтанно решила рассказать, как я сама обычно составляю палитры для дизайн-систем, над которыми работаю.
Сразу уточню: это мини-гайд именно для дизайн-систем. Для графиков он подходит не всегда — разве что в случае последовательных палитр.
Обычно, когда мне приносят дизайн, в нём есть несколько цветов: для текста, фона, интерактивных элементов вроде ссылок или кнопок, отдельных акцентных деталей. Чаще всего это 1–2 брендовых цвета плюс нейтральные — светлый, тёмный и оттенки серого. Но редко дизайнеры сразу собирают из этого полноценные палитры, а создать непротиворечивую систему всё равно нужно.
Первое, что я делаю, — выписываю все цвета из макета и по возможности сокращаю их количество. Шаг суперважный! Однажды мне достался дизайн с шестнадцатью (!) разными оттенками серого, которые практически не различались визуально.
Моё основное правило: полная палитра каждого цвета должна содержать не больше 11–13 шагов. И это при том, что первый шаг — белый, а последний — чёрный. Этой схемы придерживаются многие CSS-фреймворки, например Tailwind или Material UI.
Для этого я чаще всего использую Palette App. Там я создаю 11 шагов будущей палитры, расставляю имеющиеся цвета от самого тёмного к самому светлому, стараясь сохранить равномерный шаг, и затем заполняю пустые промежутки, экстраполируя значения hue, saturation и lightness соседних цветов.
В итоге получается что-то вроде такого:
lava: {
900: "#821C0C",
800: "#A11E0B",
700: "#CC2402",
600: "#FF3800",
500: "#FF530A",
400: "#FF7832",
300: "#FFA86D",
200: "#FFCCA5",
100: "#FFE8D3",
},
Это моя база для конкретного цвета. В саму дизайн-систему он попадает уже трансформированным. Здесь я позаимствовала подход из Material UI: я использую не физические названия, а семантические. Так понятнее и нагляднее при последующем использовании.
Например, цвет lava в конфиге Tailwind у меня превращается в:
"primary": {
DEFAULT: palettes.lava[600],
hover: palettes.lava[500],
high: palettes.lava[200],
},
"on-primary": {
DEFAULT: palettes.white,
high: palettes.lava[600],
},
Я оставляю только реально используемые цвета, даю палитрам осмысленные имена, а оттенки именую по акценту (этот принцип называется emphasis-based naming).
Когда-нибудь я сделаю из этого полноценный гайд по созданию дизайн-систем, а пока просто оставлю полезную ссылку на принципы именования цветов в Material Design.
