Color Token Generator

Почему каждая дизайн-система нуждается в цветовой шкале

Цветовая шкала — это основа последовательного визуального языка. Без неё дизайнеры и разработчики принимают ситуативные решения — «немного темнее синий для состояния наведения» или «очень светлая версия для фона карточки» — что порождает десятки почти идентичных hex-значений без какой-либо системной связи. Со временем кодовая база заполняется одноразовыми цветовыми значениями, которые невозможно обновить за один раз.

Правильно построенная 11-уровневая шкала решает эту проблему: светлые уровни (50–200) служат для тонированных поверхностей и фонов, средние уровни (300–600) несут интерактивные элементы — кнопки, ссылки, кольца фокуса, а тёмные уровни (700–950) обрабатывают текст и границы с высоким контрастом. Каждое решение восходит к шкале, и изменение фирменного цвета означает обновление одного базового значения, а не поиск сотен hex-кодов в таблице стилей.

Соглашение об именовании в Tailwind

Tailwind CSS популяризировал 11-уровневое числовое соглашение об именовании — 50, 100, 200 до 900, 950 — которое с тех пор принято как стандарт в Radix UI, shadcn/ui, Material Design 3 и большинстве современных экосистем библиотек компонентов. Преимущество — предсказуемость: разработчик, использовавший любую из этих систем, сразу знает, что токен 500-го уровня — это базовый цвет среднего диапазона, 100-й — очень светлый оттенок, а 800-й — тёмный оттенок для использования на светлых фонах.

Этот инструмент генерирует шкалы, визуально совместимые со встроенными палитрами Tailwind (синий, красный, зелёный и т.д.), что упрощает добавление пользовательского фирменного цвета, который органично вписывается рядом с дефолтными значениями Tailwind. Формат экспорта Tailwind точно совпадает с тем, что ожидает theme.extend.colors в tailwind.config.js, а экспорт CSS-переменных отформатирован для блока @theme в Tailwind v4.

Понимание коэффициентов контрастности WCAG

Коэффициент контрастности между цветом текста и фоном вычисляется из их относительной яркости — меры того, насколько ярким кажется каждый цвет человеческому глазу. Формула WCAG: (L1 + 0.05) / (L2 + 0.05), где L1 — яркость более светлого цвета, L2 — более тёмного. Результат варьируется от 1:1 (одинаковые цвета, нет контраста) до 21:1 (чёрный текст на белом фоне, максимальный контраст).

WCAG AA требует 4.5:1 для обычного текста и 3:1 для крупного текста (от 18pt). В этом инструменте коэффициенты контрастности белого и чёрного текста для каждого образца вычисляются и отображаются в виде значков W✓ и B✓. Средние уровни шкалы (400–600) обычно не проходят оба порога — они предназначены для декоративных заливок и интерактивных акцентов, а не для фонов под текстом.

Цветовые пространства: HSL, OKLCH и почему это важно

Традиционные генераторы палитр работают в HSL — тон, насыщенность, светлота. HSL интуитивен и хорошо поддерживается, но перцептивно неравномерен: один и тот же числовой шаг светлоты выглядит кардинально по-разному в зависимости от оттенка. Шаг с 50% до 60% светлоты выглядит большим скачком для синего, но маленьким шагом для жёлтого, потому что человеческий глаз воспринимает цвета по-разному в разных частях спектра.

OKLCH — перцептивно равномерное цветовое пространство, в котором равные числовые шаги светлоты выглядят одинаково для человеческого глаза вне зависимости от оттенка. Tailwind CSS v4 перешёл на OKLCH внутренне по этой причине. Для генератора палитр OKLCH создаёт шкалы, в которых каждый уровень действительно выглядит как равномерный шаг к более светлому или более тёмному — особенно ценно для доступного дизайна палитр.

Экспорт в CSS, Tailwind, SCSS, JSON и DTCG

Экспорт CSS-переменных использует шаблон именования --color-N внутри :root { }. Экспорт Tailwind вставляется прямо в theme.extend.colors в tailwind.config.js — переименуйте 'color' в название вашего токена (например, 'primary' или 'brand'). Экспорт SCSS использует синтаксис переменной $color-N, совместимый с Sass и Less. Экспорт JSON следует формату токена W3C DTCG и совместим с Style Dictionary, Theo, Supernova и любым инструментом в современной экосистеме конвейера токенов.

Все четыре формата выводят одинаковые 11 hex-значений, поэтому переключение между ними после генерации не требует никаких изменений. Нажмите на любой отдельный образец, чтобы скопировать его hex-значение непосредственно в буфер обмена — удобно, когда нужен конкретный оттенок для файла дизайна Figma, одноразового инлайн-стиля или быстрой цветовой справки.

Сравнение с Coolors, Adobe Color и Material Design Color Tool

Coolors.co — инструмент обнаружения палитр для генерации случайных комбинаций из 5 цветов. Отлично подходит для вдохновения, но не создаёт токен-шкалы, не выводит конфиги Tailwind и не показывает значки контрастности WCAG для каждого образца.

Adobe Color предлагает генерацию цветовых гармоний из цветового круга и некоторые варианты экспорта, но для сохранения и экспорта палитр требуется учётная запись Adobe. Он не генерирует совместимую с Tailwind цветовую шкалу или DTCG JSON и не отображает коэффициент контрастности для каждого уровня.

Material Design Color Tool от Google создаёт 10-уровневую шкалу (без уровня 50) и разработан специально для темизации Material Design — вывод не очень чисто соответствует Tailwind или другим экосистемам.

Этот инструмент генерирует полную 11-уровневую шкалу, показывает значки WCAG W✓/B✓ на каждом образце, экспортирует в четыре формата и не требует входа в систему. Всё работает в вашем браузере — никакие данные о цветах не загружаются на сервер.