Кольори Tailwind CSS: палітра v4 в OKLCH, власні кольори й відтінки

Як улаштована палітра кольорів Tailwind

Стандартна палітра Tailwind v4.3 має 26 іменованих шкал. Сімнадцять хроматичні: 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.

Кожна шкала має ті самі 11 кроків: 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 і контрастом

Ось уся синя шкала в тому вигляді, як її задає 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, а також зелені, teal, cyan і sky на кроці 500 ще світлі, тому для основного тексту їм потрібен 700. Red, blue, violet, purple, fuchsia, pink і rose проходять на 600, indigo вже на 500. Yellow тут виняток: навіть yellow-600 не проходить для великого тексту, лише 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 та інлайн-стилях.

Саму палітру підлаштували, а не перемалювали. Якщо перевести в OKLCH, blue-500 з v3 (#3b82f6) має точно таку саму світлоту й тон, як blue-500 у v4. Зросла лише хрома, з 0,188 до 0,214. Решта синьої шкали поводиться так само, окрім blue-400, який ще й потемнішав на 0,7 пункту. Контраст майже не змінюється, а кольори виглядають яскравішими.

Ця додаткова хрома виходить за межі sRGB. 94 з 286 кольорів v4 лежать поза sRGB, але в межах Display P3, і всі вони хроматичні. В orange поза sRGB 9 кроків з 11, у blue 4 (від 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 і всі інші колірні утиліти, а також var(--color-brand) у CSS. Підходять 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 робить такий пошук для будь-якого кольору й показує три найближчі класи.

Запитання і відповіді