Цветовая палитра в коде

Цвет в интерфейсе — это не просто эстетика. Это мощный инструмент коммуникации, влияющий на восприятие, поведение пользователя и даже конверсию. В цифровом дизайне и разработке цвета всегда задаются в коде, и выбор правильного формата представления цвета напрямую влияет на гибкость, производительность и доступность продукта. Неправильное использование цветовой палитры может привести к контрастным ошибкам, сложностям в поддержке тем и проблемам с брендированием.

Основные форматы представления цвета в коде

Цвет в вебе можно описать несколькими способами, каждый из которых имеет свои особенности, преимущества и ограничения. Наиболее распространённые — HEX, RGB, HSL и относительно новый — HWB. Выбор формата зависит от задачи: простоты чтения, возможности манипуляций, совместимости или работы с цветовым пространством.
HEX-формат (#RRGGBB или #RGB) — самый старый и универсальный. Он популярен благодаря краткости и широкой поддержке. Например, #ff6b35 легко читается и часто используется в макетах Figma или Sketch. Однако он не позволяет напрямую управлять прозрачностью без добавления альфа-канала (#RGBA), который поддерживается не во всех браузерах одинаково.
RGB (Red-Green-Blue) — функциональная запись, позволяющая задавать цвет как сумму трёх каналов. Формат rgb(255, 107, 53) удобен при динамической генерации цветов через JavaScript. Кроме того, он поддерживает альфа-канал: rgba(255, 107, 53, 0.8). Но его недостаток — низкая семантическая наглядность: сложно понять, какой оттенок получится, просто посмотрев на числа.
Гораздо удобнее для дизайнеров — HSL (Hue, Saturation, Lightness). Запись hsl(14, 100%, 60%) даёт ясное представление: оттенок (в градусах), насыщенность и светлота. Этот формат особенно полезен при создании оттенков одного цвета: достаточно изменить lightness, чтобы получить более тёмную или светлую версию. Современный стандарт также поддерживает альфа: hsla(14, 100%, 60%, 0.9).
Новейший формат — HWB (Hue-Whiteness-Blackness), представленный в спецификации CSS Color Module Level 4. Он позволяет указывать основной оттенок, долю белого и чёрного: hwb(14 20% 10%). Это интуитивно понятнее для некоторых дизайнеров, так как имитирует смешивание красок. Поддержка пока ограничена, но растёт.

CSS-переменные и управление палитрой

Одна из главных ошибок в работе с цветами — «магические строки»: использование цветов прямо в стилях без централизации. Такой подход быстро приводит к дублированию, рассогласованию и невозможности масштабирования. Решение — CSS-переменные (custom properties).
CSS-переменные позволяют определить цвет один раз и переиспользовать его по всему проекту. Они объявляются через --variable-name и вызываются через var(--variable-name). Объявление обычно делается в корневом селекторе:

:root {
 --color-primary: #ff6b35;
 --color-secondary: #2d4059;
 --color-text: #333333;
 --color-bg: #ffffff;
}

Теперь любой компонент может использовать эти значения. Если брендовый цвет изменится — достаточно обновить одну строку. Это база для системного подхода.
Более продвинутая техника — создание шкал. Вместо одного --color-primary можно завести:

• --color-primary-50 — очень светлый
• --color-primary-100, --color-primary-200 — градиент до основного
• --color-primary-500 — базовый оттенок
• --color-primary-700, --color-primary-900 — тёмные варианты

Такие шкалы позволяют гибко строить интерфейсы, создавать карточки, тени, hover-эффекты. Многие дизайн-системы (Material Design, Tailwind CSS) используют именно такую модель.

Для управления темами (светлая/тёмная) переменные особенно полезны. Можно определить две палитры и переключать их через медиа-запрос или класс:

@media (prefers-color-scheme: dark) {
 :root {
 --color-bg: #121212;
 --color-text: #e0e0e0;
 --color-primary: #ff8a65;
 }
}

Или через JavaScript:

document.documentElement.classList.add('theme-dark');

Тогда в CSS будет:

.theme-dark {
 --color-bg: #121212;
 --color-text: #e0e0e0;
}

Цвет и доступность: контраст, WCAG, дашборды

Цвет не должен быть только красивым — он должен быть доступным. По данным W3C, около 8% мужчин и 0.5% женщин имеют формы дальтонизма. Еще 4–5% населения мира — люди с нарушением зрения. Поэтому контраст текста и фона регулируется стандартом WCAG (Web Content Accessibility Guidelines).
WCAG 2.1 требует минимального контрастного соотношения:

• 4.5:1 — для обычного текста до 18px
• 3:1 — для крупного текста (18px и выше или жирный 14px)
• 7:1 — рекомендовано для повышенной доступности

Например, если вы используете серый текст #888888 на белом фоне #ffffff, контраст составляет ~4.4:1 — это почти проходит, но формально не соответствует норме. Лучше использовать #767676 или темнее.
Проверить контраст можно с помощью инструментов:

1. Расширения браузера: WebAIM Contrast Checker, axe DevTools
2. Интеграция в Figma: Stark, Contrast
3. Командная строка: pnpm dlx @axe-core/cli colors

Современные фреймворки и билдеры позволяют автоматизировать проверку. Например, в проектах на Vite или Webpack можно использовать плагины, которые сканируют CSS и предупреждают о низком контрасте.

Для цветовых слепот важно тестировать интерфейсы в режиме симуляции. Chrome DevTools включает режимы:

• Protanopia (дефицит красного)
• Deuteranopia (дефицит зелёного)
• Tritanopia (дефицит синего)

Откройте DevTools → Rendering → Emulate vision deficiencies.
Также существуют онлайн-сервисы: Coblis, Color Oracle. Они показывают, как видит пользователь с тем или иным типом нарушения цветового восприятия.

Цвет в дизайн-системах и компонентных архитектурах

В больших проектах цветовая палитра становится частью дизайн-системы. Здесь она трансформируется из набора значений в иерархию токенов. Дизайн-токены — это абстрактные имена, которые ссылаются на конкретные цвета, но не зависят от платформы.
Например, вместо --color-primary можно использовать --ds-color-brand или --semantic-color-success. Это позволяет отделить смысл от реализации.
Типы токенов:

• Base tokens — исходные цвета: blue-600, red-500
• Semantic tokens — контекстные: button-primary-bg, error-border
• Component tokens — для конкретных компонентов: alert-info-bg

Преимущество такой модели — возможность перенастройки под бренд или тему без изменения кода компонентов. Например, банк и медицинский сервис могут использовать один и тот же компонент Button, но с разными цветовыми токенами.
Инструменты для управления токенами:

• Figma Variables — позволяют создавать токены прямо в макете и экспортировать в JSON
• Style Dictionary — конвертирует токены в CSS, SCSS, Android, iOS
• Theo от Salesforce — генерация токенов из YAML/JSON

Процесс может выглядеть так:

1. Дизайнер создаёт палитру в Figma и назначает токены
2. Токены экспортируются в JSON
3. CI/CD-пайплайн запускает Style Dictionary
4. Генерируются файлы: variables.css, colors.swift, colors.xml
5. Разработчики подключают их в проект

Такой подход обеспечивает единый источник правды (single source of truth) и сокращает расхождения между дизайном и реализацией на 70–80%.

Актуальные тренды: оконтекстленные цвета, P3, переменные темы

Цветовые технологии развиваются. Уже не достаточно просто выбрать HEX — нужно учитывать устройство, освещение, предпочтения пользователя и даже время суток.
Один из трендов — оконтекстленные цвета (contextual colors). Вместо жёстких значений цвета становятся зависимыми от среды. Например, macOS и iOS используют SF Colors — динамические системы, где label меняется в зависимости от темы и условий.
В CSS появляется поддержка color() с указанием пространства:

background: color(display-p3 1 0.5 0);

P3 — широкое цветовое пространство, используемое в современных дисплеях Apple. Оно покрывает на 25% больше оттенков, чем sRGB. Это значит, что на совместимых экранах цвета будут ярче и насыщеннее.
Ещё один тренд — переменные темы на основе данных. Например, сайт погоды может менять палитру в зависимости от прогноза: голубой при ясной погоде, серый при дожде. Или новостной портал — использовать цвет события (красный для ЧП, зелёный для успехов).
Технически это реализуется через JavaScript:

const theme = weather === 'sunny' ? 'warm' : 'cool';
document.documentElement.className = theme;

Или через CSS Custom Media:

@custom-media --weather-sunny (env(weather) = "sunny");
@media (--weather-sunny) {
 :root { --color-sky: #87ceeb; }
}

Такие решения пока экспериментальны, но демонстрируют направление: цвет становится живым, реактивным элементом интерфейса.

Экспертное мнение

По его словам, одна из частых ошибок — попытка «схитрить» и использовать SASS-миксины для генерации оттенков. Да, можно написать lighten($color, 10%), но такие значения не синхронизируются с дизайном. Лучше заранее договориться о шкале и зафиксировать её в токенах.
Ещё один пример — компания Tinkoff, которая внедрила единую систему цветов через дизайн-токены. Это позволило им быстро запускать новые продукты (Tinkoff Invest, Tinkoff Travel) с сохранением бренда и сократило время на согласование с дизайнерами на 40%.

Вопросы и ответы

Заключение

Цветовая палитра в коде — это не просто набор HEX-значений. Это система, требующая продуманной архитектуры, интеграции с дизайн-процессом и соблюдения стандартов доступности. От того, насколько грамотно она организована, зависит скорость разработки, качество продукта и удовлетворённость пользователей.
Современный подход сочетает CSS-переменные, дизайн-токены и автоматизацию. Он позволяет масштабироваться, поддерживать темы, обеспечивать доступность и быстро адаптироваться под бренд. При этом важно помнить: цвет — это не только техника, но и психология. Правильный выбор оттенков может повысить доверие, вовлечённость и конверсию.

• Используйте HSL для динамических палитр и HEX для статических значений
• Централизуйте цвета через CSS-переменные и дизайн-токены
• Обеспечьте контраст не ниже 4.5:1 для текста
• Автоматизируйте проверку цветов в CI/CD
• Учитывайте широкие цветовые пространства (P3) для современных устройств