Цветовая палитра для сайта из одного фирменного цвета

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

Роль снимает вопрос: у каждого места в интерфейсе одна переменная и одно правило. Набор, который выдаёт этот инструмент:

Нейтральные тона не чисто серые: в них подмешана доля оттенка фирменного цвета — около 1–2 % хромы в OKLCH. Разницу трудно назвать, но интерфейс перестаёт выглядеть так, будто серую сетку сверстали отдельно от бренда.

Чем это отличается от шкалы 50–900

Шкала — материал, тема — изделие. Если нужна именно шкала, чтобы потом назначать роли руками, возьмите генератор палитры 50–900: он строит десять шагов в OKLCH и показывает контраст каждого с белым и чёрным. Здесь шкала считается внутри и сразу превращается в роли — с состояниями, фокусом, статусами и тёмной темой.

Для каждой пары «что на чём» считается коэффициент контрастности WCAG 2.2:

Пороги разные, и это не придирка: 4,5:1 нужен основному тексту (критерий 1.4.3), 3:1 — крупному тексту, границам полей, иконкам и кольцу фокуса (1.4.11). Кольцо фокуса проверяется дважды: против фона страницы и против поверхности карточки, потому что поля ввода живут и там, и там.

Если пара не проходит, цвет сдвигается по светлоте OKLCH — шагами по 0,5 %, пока не наберёт нужное значение. Оттенок и насыщенность остаются, меняется только светлота, поэтому цвет продолжает читаться как фирменный.

Чаще всего сдвиг случается с кнопкой. Средне-светлый фирменный цвет — голубой, бирюзовый, салатовый, жёлтый — не держит белый текст: на #2f6fed белый даёт около 4,9:1 и проходит, а на #22c55e всего 2,1:1. Инструмент затемняет заливку до первого значения, которое проходит, и честно пишет об этом в выводе. Исходный оттенок при этом никуда не девается: он остаётся в тонированных плашках, границах и акцентных иконках.

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

Тёмная тема, полученная фильтром invert() или простой заменой чёрного на белый, выглядит неопрятно: чистый белый текст на чистом чёрном даёт 21:1 и режет глаза, а тени и полупрозрачные слои превращаются в грязь.

Здесь тёмная тема строится отдельно, по тем же правилам:

• Фон не чёрный. Светлота около 19 % в OKLCH: на нём видно карточку, вложенную поверхность и границу — три уровня, которые на чистом чёрном сливаются.
• Текст не белый. Светлота около 95 % даёт примерно 15:1 вместо 21:1 — запас есть, ореола вокруг букв нет.
• Акцент светлее, чем в светлой теме. Тёмно-синяя ссылка на тёмном фоне не читается, поэтому для ссылок берётся шаг из верхней половины шкалы, а заливка кнопки остаётся насыщенной, чтобы белый текст на ней по-прежнему проходил.
• Статусные плашки — тёмные, текст — светлый. Светло-зелёный фон, перенесённый из светлой темы, в тёмной выглядит как дыра в экране.

Экспорт кладёт тёмные значения и в @media (prefers-color-scheme: dark), и в :root[data-theme="dark"]. Первое включает тему по системной настройке, второе даёт переключатель; селектор :root:not([data-theme="light"]) в медиазапросе следит за тем, чтобы ручной выбор светлой темы не был перебит системным.

• Один источник значений. Переменные объявляются в :root один раз. В компонентах нет ни одного HEX: background: var(--ui-surface), color: var(--ui-text).
• Фокус не отключают. outline: 2px solid var(--ui-focus); outline-offset: 2px на :focus-visible — этого достаточно, чтобы клавиатура работала во всём интерфейсе.
• Состояния — из палитры, а не из opacity. Полупрозрачная кнопка под курсором меняет контраст с текстом непредсказуемо; --ui-accent-hover просчитан.
• Тонированные блоки — парой. Фон --ui-accent-soft живёт только вместе с текстом --ui-on-accent-soft. Это единственная пара, где акцентный цвет можно ставить на акцентный фон.
• Графики и иллюстрации — отдельная история. Категориальным цветам на диаграмме нужен контраст друг с другом, а не с фоном, и роли из этой палитры для них не годятся.

Если интерфейс уже сверстан и вопрос в том, куда попадают подсказки и туры онбординга, посмотрите как их добавляют без разработчика: они наследуют те же переменные и поэтому выглядят частью продукта.

1. W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — критерии 1.4.3, 1.4.6, 1.4.11; определения относительной яркости и коэффициента контрастности.
2. W3C. CSS Color Module Level 4 — запись oklch() и приведение к охвату sRGB уменьшением хромы.
3. Ottosson B. A perceptual color space for image processing, 2020 — пространства OKLab и OKLCH.
4. W3C. CSS Color Adjustment Module Level 1 — свойство color-scheme и медиазапрос prefers-color-scheme.