Цвета Tailwind CSS: палитра v4 в OKLCH, свои цвета и оттенки

Как устроена палитра Tailwind

В стандартной палитре Tailwind v4.3 двадцать шесть именованных шкал. Семнадцать из них хроматические: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink и rose. Ещё девять нейтральные: slate, gray, zinc, neutral и stone остались с v3, а mauve, olive, mist и taupe появились уже в v4. Сверху идут black и white.

У каждой шкалы одни и те же ступени: 50, 100, 200 и так далее до 900, плюс 950. Ступень 50 почти белая, 950 почти чёрная. Класс складывается из утилиты, названия цвета и ступени: bg-blue-500, text-rose-700, border-zinc-200.

Номер ступени задаёт место в шкале, а не светлоту. У ступени 500 светлота OKLCH колеблется от 55.1% у gray до 79.5% у yellow, поэтому yellow-500 и blue-500 ведут себя в тексте совсем по-разному.

Синий Tailwind: все оттенки с OKLCH, HEX и контрастом

Ниже вся шкала blue в том виде, в каком её задаёт Tailwind v4. HEX в таблице это ближайший цвет sRGB, найденный снижением насыщенности при сохранении светлоты и тона. Контраст посчитан по WCAG 2 именно для этого HEX.

Blue-600 это первая ступень, которая даёт 4.5:1 для основного текста на белом. Blue-500 на чёрном проходит с 5.58:1, а на белом нет, там всего 3.76:1. Ни одна ступень синего не проходит 4.5:1 сразу на белом и на чёрном, так что светлой и тёмной теме нужны разные ступени.

Какие оттенки Tailwind проходят WCAG AA на белом

Самая светлая подходящая ступень зависит от тона. Orange, amber, yellow, lime, а также зелёные, бирюзовые и голубые шкалы на ступени 500 ещё светлые, для основного текста им нужна 700. Red, blue, violet, purple, fuchsia, pink и rose проходят с 600, indigo уже с 500. Особняком стоит жёлтый: даже yellow-600 не дотягивает до 3:1 для крупного текста, у него 2.93:1.

Светлота предсказывает результат лучше номера ступени. Среди всех 286 цветов любой оттенок со светлотой OKLCH ниже 58% проходит 4.5:1 на белом, а любой светлее 59.2% не проходит. Посмотрите на L в значении класса, и ответ известен ещё до проверки.

Все нейтральные шкалы, кроме olive, проходят уже на 500. У olive-500 светлота 58% и желтоватый тон, контраст всего 4.25:1, поэтому текст gray-500 и olive-500 нельзя менять один на другой без проверки.

Цвета Tailwind v3 и v4: в чём разница

В v3 цвета задавались HEX-значениями в tailwind.config.js, в разделе theme.extend.colors. В v4 настройка переехала в CSS: цвета стали переменными темы внутри @theme, записаны в OKLCH и доступны как CSS-переменные, так что var(--color-blue-500) работает в обычном CSS и в inline-стилях.

Саму палитру не перерисовали, а подкрутили. Если перевести blue-500 из v3 (#3b82f6) в OKLCH, светлота и тон совпадут с blue-500 из v4 до третьего знака. Выросла только насыщенность: с 0.188 до 0.214. Так же устроена вся шкала синего, кроме blue-400, который вдобавок стал темнее на 0.7 пункта. Контраст почти не изменился, а цвета стали сочнее.

Добавленная насыщенность выходит за пределы sRGB. Из 286 цветов v4 ровно 94 лежат вне sRGB, но внутри Display P3, и все они хроматические. У orange за охват sRGB выходят 9 ступеней из 11, у blue четыре, с 200 по 500. На экране с P3 виден полный цвет, на экране sRGB браузер показывает близкий к нему. v4 рассчитан на Safari 16.4, Chrome 111 и Firefox 128 и новее, и все они понимают oklch().

@theme {
    --color-blue-500: oklch(62.3% 0.214 259.815);
}

.card {
    border-color: var(--color-blue-500);
}

Как добавить свой цвет в Tailwind v4

Объявите переменную в пространстве --color- внутри @theme. Всё, что стоит после --color-, становится именем в классе: --color-brand даёт bg-brand, text-brand, border-brand, ring-brand и остальные цветовые утилиты, а в CSS доступен var(--color-brand). Подходят HEX, rgb(), hsl() и oklch().

Чтобы заменить стандартную палитру целиком, а не дополнить её, сначала сбросьте пространство строкой --color-*: initial и затем объявите только нужные цвета. Утилиты генерируются только для классов, которые вы используете, поэтому стандартную палитру обычно оставляют.

@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}

Одного --color-brand хватает для единственного акцента. Как только нужны hover-состояния, подложки и тёмная тема, заведите полную шкалу с номерами ступеней.

Как собрать свою шкалу от 50 до 950

Шкала ниже построена из #e4572e. Его светлота 63.7% соответствует ступени 500, поэтому фирменный цвет остаётся ровно на 500. Остальные ступени идут по кривой светлоты Tailwind, сохраняют тон, насыщенность максимальна на 500 и 600 и плавно убывает к краям, и все значения помещаются в sRGB, так что HEX точный.

Как и тёплым цветам самого Tailwind, этой шкале для основного текста на белом нужна ступень 600. У brand-500 контраст 3.68:1, этого хватает только для крупного текста и иконок.

@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}

Копируйте значения с полной точностью. Если округлить светлоту до 0.1%, а насыщенность до трёх знаков, brand-600 чуть выйдет за охват sRGB: ничего не сломается, но цвет перестанет точно совпадать с HEX.

Как работает прозрачность вида bg-blue-500/50

Число после косой черты задаёт альфу: bg-blue-500/50 это blue-500 с прозрачностью 50%. В v3 это компилировалось в rgb(59 130 246 / 0.5) и работало только для цветов, которые Tailwind мог разложить на каналы. Для своих цветов в CSS-переменных приходилось писать особый формат rgb(var(--brand) / <alpha-value>).

В v4 модификатор превращается в color-mix() в пространстве Oklab: цвет смешивается с transparent. Так работает любой цвет: переменные темы, произвольные значения вроде bg-[#e4572e]/50 и ваши собственные CSS-переменные.

Прозрачность меняет контраст. На белом blue-500/50 выглядит как #95bfff, а blue-500/10 как #eaf2ff. Текст blue-600 даёт 5.25:1, а text-blue-600/60 падает до 2.62:1 и не проходит даже для крупного текста.

• blue-500#2b7fff
• blue-500/50 на белом#95bfff
• blue-500/20 на белом#d5e5ff
• blue-500/10 на белом#eaf2ff

.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

Как найти ближайший класс Tailwind для любого HEX

Сравните HEX со всеми 286 оттенками по воспринимаемому расстоянию в Oklab (ΔEOK). Ниже примерно 0.02 разницу трудно заметить даже рядом, и класс Tailwind может заменить ваш цвет. Выше примерно 0.04 лучше добавить свой цвет.

В таблице настоящие совпадения. Старые HEX из v3 возвращаются к тому же классу v4, а типичный фирменный оранжевый вроде #ff5733 попадает между orange-600 и red-400. Страница Tailwind в PickShade делает такой поиск для любого цвета и показывает три ближайших класса.

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