Генератор доступной палитры из фирменного цвета

Проще всего осветлить или затемнить цвет, смешав его с белым или чёрным в sRGB или изменив L в HSL. Оба способа дают неровные шкалы. Светлота HSL не перцептивна: жёлтый с L = 50 % выглядит намного ярче синего с теми же 50 %, и «одинаковый» шаг у разных оттенков даёт совсем разный контраст. Смешивание с белым в sRGB сдвигает оттенок: синий уходит в фиолетовый, красный — в розовый.

OKLCH — цилиндрическая форма пространства OKLab, которое Бьёрн Оттоссон опубликовал в 2020 году; сейчас оно входит в CSS Color Level 4. Пространство разделяет три параметра, важных дизайнеру:

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

Как генератор строит шкалу

1. Фирменный цвет переводится в OKLCH и ставится на шаг с ближайшей опорной светлотой (или на выбранный вами шаг). Его HEX сохраняется точно.
2. Светлые шаги равномерно распределяются по L между фирменным цветом и L ≈ 97,5 % (шаг 50), тёмные — между фирменным цветом и L ≈ 25 % (шаг 900).
3. Оттенок не меняется. Хрома убывает к светлому краю — очень светлые тона с полной насыщенностью выглядят кислотно — и снижается максимум на треть к тёмному.
4. Цвет вне охвата sRGB возвращается в него уменьшением хромы при сохранении L и H, как рекомендует CSS Color 4.
5. Каждый HEX округляется до 8 бит на канал, и контраст считается по округлённому значению — тому, что попадёт в код.

Для каждого шага таблица показывает коэффициент контрастности WCAG 2.2 с чисто белым (#fff) и чисто чёрным (#000) текстом:

• AA — не меньше 4,5:1: подходит для основного текста, подписей и ссылок.
• Крупный — от 3:1 до 4,5:1: только для текста от 24 px (18,66 px жирным) и нетекстовых элементов — иконок, рамок, фокусной обводки (WCAG 1.4.11).
• Нет — ниже 3:1: только декоративные элементы, не текст.

Шаги распределены по воспринимаемой светлоте, поэтому у большинства оттенков результат похож: белый текст проходит AA на шагах 600–900, чёрный — на 50–500. С обоими цветами одновременно почти ничего не проходит: 4,5:1 и с белым, и с чёрным возможно только в очень узкой полосе относительной яркости — от 0,175 до 0,183. Поэтому в дизайн-системах основные кнопки с белым текстом делают на 600 или 700, а 400–500 оставляют для заливок, графиков и крупного текста.

Столбец APCA показывает контраст светлоты Lc из черновика WCAG 3 для белого и чёрного текста. Значения выше 75 комфортны для основного текста, выше 60 — для подписей интерфейса, выше 45 — для заголовков. APCA пока не стандарт: используйте его, чтобы выбрать из вариантов, уже прошедших WCAG 2.2.

Пары внутри палитры

В тонированных интерфейсах — информационных плашках, выделенных строках, тегах, подсказках онбординга — тёмный шаг ставят на светлый шаг того же оттенка. Список пар показывает для каждого фона, какие шаги текста дают 4,5:1. Ориентир: шаги, между которыми пять и больше ступеней (50 и 600, 100 и 700), обычно проходят, соседние — никогда.

• Называйте по роли, а не по значению. Выгрузите шкалу как --brand-50 … --brand-900, а поверх назначьте роли: --color-primary: var(--brand-600), --color-primary-text: var(--brand-700), --color-info-bg: var(--brand-50). Если бренд поменяется, правка затронет один список.
• Зафиксируйте разрешённые пары. Запишите, какой шаг текста можно ставить на какой фон, чтобы никто в спешке не поставил текст 400 на фон 100.
• Тёмная тема — отдельное сопоставление. Используйте ту же шкалу в обратную сторону — светлые шаги для текста, тёмные для поверхностей — и снова проверьте пары: тёмные сочетания, проходящие WCAG 2, всё равно могут казаться блёклыми, и APCA показывает это лучше.
• Состояниям тоже нужен контраст. Наведение и нажатие обычно сдвигают цвет на шаг темнее; фокусной обводке нужно 3:1 относительно окружающего фона.
• Семантические цвета — успех, предупреждение, ошибка — строятся так же, из одного базового цвета каждый. Жёлтый и салатовый узнаваемы только на светлых шагах, где белый текст не проходит, — ставьте на них тёмный текст.

Чтобы проверить отдельную пару, в том числе цвета вне палитры или полупрозрачные подложки, воспользуйтесь проверкой контраста цветов.

1. Ottosson B. A perceptual color space for image processing, 2020 — пространства OKLab и OKLCH, матрицы преобразования.
2. W3C. CSS Color Module Level 4 — запись oklch() и приведение к охвату уменьшением хромы.
3. W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — критерии 1.4.3, 1.4.6 и 1.4.11, относительная яркость и коэффициент контрастности.
4. Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 0.0.98G-4g — значения Lc.
5. W3C Design Tokens Community Group. Design Tokens Format Module, черновик — структура $type и $value в экспорте токенов.