Почему работа с цветом в дизайн-системах — это не про творчество

Привет, меня зовут Владимир Белов, продуктовый дизайнер.

Когда я начинал новый проект (личные, фриланс или найм), то чаще всего выбирал на основе каких-то определенных цветов: выбрал синенький для акцента, серый для фона, чёрный для текста и погнал. Поэтому всё, что связано со скоростью и с небольшими размерами проекта, то всё строится вокруг UI-kit. Новый проект — новый круг по цветам. Кто-то делает себе шаблоны, готовые решения.

Далее, знакомство начинается с дизайн-системой: будь то проект вырастает, подход меняется или ты уже пришёл в проект, в котором есть дизайн-система. Я сталкивался, когда нужно было проводить аудит, обновление, так и с нуля всё делать. Но в любом случае, цвет перестаёт быть просто цветом, а частью системы и обычным рандомом тут не получится. Почему? Каждый цвет, каждый оттенок имеет свою функцию, роль, а использование, в дальнейшем изменение затрагивать n-количество компонентов. И что мы получаем? Нет системного подхода — дизайн-система превращается в хаос.

Я специально разделил, когда работа начинается над проектом или размер небольшой проекта и дизайн-система. Хотя если включить системный подход, то это помогает всегда структурно, аргументировано подходить к разным задачам, тем самым не будет сильно отличаться работа.

Как обычно решают

Ничего нового, самое обычное решение — цветовые шкалы. Внутри градация одного цвета по оттенкам. Нейминг может разный: от 1 до 10, от 50 до 950. В большинстве в своём строится от самого светлого оттенка до самого оттенка. Бывает до середины (чаще всего 500 шаг) оттенки от светлого до насыщенного с мягким переходом, а после резкий переход в тёмные оттенки.

После построение одной цветовой палитры, тут начинается какую роль исполняет каждый шаг, пример:

Светлые оттенки (50–200) — фон, поверхности, состояния разных элементов
Насыщенные (300–600) — фон (в кнопках), текст, состояния
Тёмные оттенки (700–950) — фон для тёмной темы, текст на светлом фоне.

На каждый оттенок находится применение под определенную роль, состояние, темы.

Это стандартизация помогает сразу ответить на все вопросы:

Предсказуемость. Изменение одного цвета затрагивает везде, где используется
Контрастность. Проверка цвета: светлый текст на светлом фоне — ненадотак.
Удобство. Резюмируя тем, что оттенок = роль, удобно этим управлять.

Дополнительно:

Во многих цветовых палитрах, в разных дизайн-системах можно наблюдать сплошные hex-коды, но при этом дополнительно можно создавать полупрозрачные оттенки одного из шага. Помогает избавляться от «грязи» в интерфейсе. Когда на двух поверхностях используется разные оттенки: серый и красный, то получается некая грязное восприятие. Происходит, когда компонент с определённый цветом (красный, синий, желтый и т.д.) вставляется на разном фоне. Берём 500–600 шаг и строим полупрозрачные оттенки с n-шагом. Я чаще всего строю от 4% до 56%.
P.S. Это не всем и не всегда нужно

Отдай в разработку

Независимо от размера вашего проекта: будь то UI-kit или дизайн-система, вас затронет процесс передачи вашей работы в разработку. Начинается самое веселое, чуток рутины, споры и разговоры. Я передавал в ручную HEX-коды, делал документацию, сам писал в ручную файлы JSON и TypeScript, благо появлялись более менее плагины, которые способны всё это экспортировать.

Есть один минус в любом случае, даже два:

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

Поэтому в любом случае требуется какая-то работа для того, чтобы настроить взаимодействие с разработкой.

Инструменты

Список разных инструментов для генерации цветовой палитры, которые по своему хорошие, выполняют свою основную функцию: Coolors, uicolors, color magic, huemint, pixilied, muzli color generator, oklch.fyi, kigen и многие другие, сайтов действительно много. Figma-плагинов также много: colorinspo, palette flow, tailwind color palettes, tone curve

Отдельно хочу отметить сайт-инструмент от Алексея Ардова — Huetone. Инструмент, который позволяет кастомно настроить каждый цвет, каждый оттенок, всё это получить в JSON-формате и закинуть в Figma.

Почему я сделал свой инструмент

Я использовал ранее инструмент, указанные выше, но многие не выполняли множество функций или просили за это n-баксов. Поэтому в моём инструменте я собрал множество функций в одной месте, бесплатно — Norn Kroma. Возможность добавить сгенерированный цвет, по которому построится шкалу, максимально просто, но при этом кастомизировать цвет, добавить полупрозрачные оттенки, выгрузить в удобный мне формат — ВСË. Но инструмент начал чуть расширяться для удобной настройки цветов, хранения, импорта, экспорта.

Список функций:

Генерируется цвет при добавлении и по нему строится цветовая палитра. Помогает сразу получить X-цвет для вдохновения и\или работы с ним.
Работать в трёх режимах: RGB, OKLCH, HSL двигать ползунками для настройки цвета
Изменение контраста: позволяет от -1.00 (темнее) до 1.00 (светлее) регулировать оттенки в цветовой палитре
Количество шагов: по умолчанию установлено 11, но вы можете выбрать от 2 до 20, как вам удобно.
Включать полупрозрачные оттенки: позволяет в этой же цветовой палитре включить полупрозрачные оттенки, выбрать по какому шагу, количество шагов, настроить каждый шаг процент прозрачности.
SVG: Каждую цветовую палитру можно как скопировать в SVG (вставить в Figma), так и скачать в SVG.
Экспорт: После генерации, настройки цветовой палитры, вы можете экспортировать в любой удобный формат CSS, SCSS, TS, JSON, SVG
Импорт: Импортировать файл с вашей цветовой палитры для удобной переработки или настройки определенной палитры, далее экспортировать в любой формат. Отмечу, что парсер универсальный, но не идеален, буду благодарен за фидбек в личку, если ошибка.
Готовые палитры: список дизайн-систем, в которых вы можете ознакомиться с цветовыми палитрами. Не все команды добавляют, поэтому можете заметить группы семантических токенов. Список постепенно пополняется.
Мои палитры: По аналогии «Добавить в избранные». Вы можете как из Генератора, так из Готовых палитр добавлять, экспортировать, работать с SVG. Чем отличается авторизованный и неавторизованный пользователь? Хранением — у неавторизованного в локалке, у авторизованного БД.

Этот инструмент создаётся как мост между дизайнерами и разработчиками (конечно в большинстве для дизов), чтобы бы вы максимально снизили рутину, работали с генерацией. Инструмент бесплатный по всем функциям.

Есть пул разных идей, функций, которые постепенно будут внедряться в инструмент. Среди которых будет Figma-плагин для быстрого перевода в переменные.

Сайт: https://kroma.thenorn.ru/

—

Если кому интересно про меня, то буду рад подписке на Telegram-канал или хотите посетить мой сайт, посмотреть кейсы и прочее.