Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

resourcesАвтор: Пуск‑Медиа (импорт)Просмотры: 3

Цветовые системы: генераторы палитр, контраст и передача в код

Как собрать палитру, которая выдержит тёмную тему и требования доступности без ручных «угаданий».

Изображение статьи: Цветовые системы: генераторы палитр, контраст и передача в код

Рабочая палитра больше, чем три «фирменных» цвета: нейтрали для фона и границ, семантика 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.

#цвет#a11y#дизайн‑система

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.