Тинты, затемнения и тона: три разных операции

Сначала задайте операционные определения

CSS определяет цвета, пространства интерполяции и алгоритмы смешения, но не назначает словам tint, shade и tone специальной роли в языке. Инструменты и дизайн-команды используют эти названия по-разному. Поэтому Color Atlas считает их проектным словарём и публикует вместе с результатом конечный цвет, пространство, долю и правило округления. Так знакомый термин не скрывает несовместимую формулу.

• Тинт: смешение базового цвета с непрозрачным белым #FFFFFF.
• Затемнение: смешение базы с непрозрачным чёрным #000000.
• Тон: смешение базы с явно названным нейтральным цветом; здесь используется #808080.
• Доля смеси: процент белого, чёрного или серого, а не доля оставшейся базы.
• Результат: непрозрачный шестизначный sRGB HEX после округления каждого канала до ближайшего целого.

Одна база и три воспроизводимые шкалы

Возьмём Индиго Аврора #4F46E5 с кодированными каналами sRGB 79, 70 и 229. Для каждого канала вычисляем result = round(base × (1 − p) + endpoint × p), где p — доля конечного цвета от 0 до 1. При 20% красный канал тинта равен round(79 × 0,8 + 255 × 0,2) = 114, а полный результат — #726BEA. Та же формула с чёрным или #808080 создаёт остальные строки.

Эти числа описывают интерполяцию кодированных каналов sRGB, а не физическое смешение краски, света или модель человеческого восприятия. Узкая область метода — преимущество: импортёр базы, build-скрипт и браузер могут сравнить одни и те же целые каналы без догадок о значении фразы «на 20% светлее».

Запишите тот же контракт через color-mix()

CSS Color 5 определяет color-mix() как функцию, которая смешивает переданные цвета в выбранном пространстве и заданных долях. Пространство стоит указывать явно, хотя текущим значением по умолчанию является Oklab: таблица выше намеренно использует арифметику каналов sRGB, поэтому соответствующий CSS содержит in srgb. Для двух непрозрачных цветов с суммой 100% первая доля относится к базе, вторая — к конечному цвету.

:root {
  --aurora-indigo: #4F46E5;
  --aurora-tint-20: #726BEA;
  --aurora-shade-40: #2F2A89;
  --aurora-tone-40: #635DBD;
}

@supports (color: color-mix(in srgb, black, white)) {
  :root {
    --aurora-tint-20: color-mix(in srgb, var(--aurora-indigo) 80%, white 20%);
    --aurora-shade-40: color-mix(in srgb, var(--aurora-indigo) 60%, black 40%);
    --aurora-tone-40: color-mix(in srgb, var(--aurora-indigo) 60%, #808080 40%);
  }
}

• Пишите обе доли в документируемом токене, даже если CSS способен вывести одну из них.
• Используйте статические HEX custom properties как fallback, а затем заменяйте их внутри @supports при наличии color-mix().
• Не путайте 20% конечного цвета и 20% сохранённой базы: это противоположные позиции шкалы.
• При наличии alpha фиксируйте её явно: интерполяция использует премультиплицированные компоненты, а итоговая непрозрачность может измениться.
• Проверяйте разрешённый цвет, а не ожидайте одинакового HEX от всех пространств интерполяции.

Пространство интерполяции входит в результат

Двух концов и одного процента недостаточно для однозначного смешанного цвета, пока не известно пространство интерполяции. CSS Color 4 объясняет назначение разных вариантов. Кодированный sRGB удобен для совместимой со старыми шкалами арифметики каналов, но не является ни linear-light, ни перцептивно равномерным. Oklab рассчитан на более ровные визуальные шаги. Oklch помогает контролировать chroma и путь тона. srgb-linear интерполирует значения, линейные по интенсивности света.

• Используйте in srgb для совпадения с существующей RGB-формулой или сохранённой legacy-шкалой.
• Рассмотрите in oklab, когда равномерность визуальных шагов важнее старой HEX-арифметики.
• Рассмотрите in oklch, когда метод палитры управляет lightness, chroma и маршрутом hue.
• Выбирайте in srgb-linear только при осознанном контракте linear-light интерполяции.
• Не объясняйте различия между пространствами одной лишь ошибкой округления.

Изменение HSL lightness — другая операция

HSL представляет sRGB-цвет координатами hue, saturation и lightness. Прибавление двадцати процентных пунктов к lightness меняет одну координату, но не смешивает цвет с двадцатью процентами белого в кодированном sRGB. Результаты могут отличаться и численно, и визуально. Уменьшение HSL lightness не обязано совпадать с sRGB-затемнением, а снижение saturation — со смешением с конкретным нейтральным серым.

• Пишите «увеличить HSL lightness», если выполнено именно это преобразование.
• Пишите «смешать 20% белого в sRGB», если интерполировали каналы.
• Не называйте каждый бледный результат тинтом, если он получен прозрачностью над неизвестным фоном.
• Не называйте каждый тёмный результат shade, если применён blend mode, overlay или коррекция экспозиции.
• Не считайте равные шаги HSL lightness равными шагами воспринимаемой светлоты: спецификация CSS прямо отмечает ограничения HSL.
• Когда важна точность между инструментами, преобразуйте и храните итоговый разрешённый цвет.

Правило именования простое: описывайте выполненную операцию, а не только ожидаемый вид. В одной палитре могут жить варианты HSL lightness, смеси Oklab, оверлеи и sRGB-тинты, но метаданные должны различать их методы.

Каждый шаг требует новой проверки контраста

Связанный цвет не получает автоматически ту же роль текста или интерфейса, что и база. Смешение меняет относительную яркость, а контраст рассчитывают для итоговых переднего плана и фона. Примеры с 40% хорошо показывают направление. Коэффициенты получены по неокруглённой формуле яркости sRGB и показаны с двумя знаками; предложенный текст — только более сильный из чёрного и белого для обычного размера.

Публикуйте токены, которые сможет проверить другая команда

• Храните одну проверенную каноническую базу и стабильный идентификатор.
• Называйте операцию, конечный цвет, его долю, пространство интерполяции и поведение alpha.
• Генерируйте значения одной детерминированной реализацией и отклоняйте дубликаты имён токенов.
• Сохраняйте точные каналы или достаточную точность до форматирования HEX для человека.
• Считайте контраст для каждой роли после разрешения итоговых переднего плана и фона.
• Отдельно проверяйте hover, active, focus, selected, disabled, светлую и тёмную темы.
• Фиксируйте исходную спецификацию и версию генератора, чтобы будущая миграция могла объяснить новые результаты.
• Показывайте готовый CSS и метод рядом с образцами вместо публикации необъяснённых цветовых сеток.

Color Atlas сохраняет такой след проверки. PostgreSQL хранит рассмотренные базовые записи и статьи, а SSR-страница рассчитывает связанные цвета из объявленного значения sRGB и показывает методику. Поэтому тинт или затемнение становится воспроизводимым входом дизайн-системы, а не ещё одной почти одинаковой страницей ради ключевого слова.