Цветовые системы: генераторы палитр, контраст и передача в код
Рабочая палитра больше, чем три «фирменных» цвета: нейтрали для фона и границ, семантика success/warning/error, отдельные состояния наведения. Проверяйте контраст не только для основного текста, но и для вторичных подписей и иконок на кнопках.
---
## Чек‑лист перед передачей в разработку
□ Зафиксированы токены в формате JSON/Figma Variables. □ Для каждого текста на цветном фоне есть замер контраста. □ Тёмная тема использует не инверсию, а отдельные примитивы. □ Семантические токены (text.primary) отделены от примитивов (gray.700).
Инструменты ниже ускоряют проверку, но финальное решение за дизайн‑ревью и продуктом.
- [Coolors](https://coolors.co) — Быстрые палитры и экспорт.
- [Realtime Colors](https://realtimecolors.com) — Превью палитры на макете интерфейса.
- [Color Review](https://color.review) — Проверка контраста WCAG.
- [APCA Calculator](https://apcacontrast.com) — Альтернативная модель контраста для крупных шрифтов.
- [Leonardo Color](https://leonardocolor.io) — Генерация градиентов с учётом восприятия.
---
## Юридический и бренд‑контекст
Если цвета — часть зарегистрированного брендбука, приложите PDF с допусками по отклонению Delta E — меньше споров при печати и на экранах.
Нужна команда, которая сведёт контент, дизайн и вёрстку в один предсказуемый релиз — напишите в форму контактов на сайте Пуск‑Медиа: разберём задачу и предложим следующий шаг без обещаний «в ТОП за неделю».
---
## Токены против «инлайна»
Когда цвет задают прямыми HEX в макете без семантики, разработчик вынужден угадывать, где фон страницы, а где surface карточки. Переносите палитру в переменные с понятными именами уже на этапе UI‑кита — так быстрее согласовать светлую и тёмную темы.
При передаче в Пуск‑Медиа удобно приложить JSON из Figma Tokens Style Dictionary или экспорт из нативных Variables.
