Barvy v Tailwind CSS: paleta v4 v OKLCH, vlastní barvy a stupně

Jak je barevná paleta Tailwind uspořádaná

Výchozí paleta v Tailwind v4.3 má 26 pojmenovaných škál. Sedmnáct z nich je barevných: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink a rose. Devět je neutrálních: slate, gray, zinc, neutral a stone z v3 a k nim mauve, olive, mist a taupe přidané během v4. Navíc jsou k dispozici black a white.

Každá škála má stejných 11 stupňů: 50, 100, 200 až 900 a 950. Stupeň 50 je téměř bílý, 950 téměř černý. Třída se skládá z utility, barvy a stupně: bg-blue-500, text-rose-700, border-zinc-200.

Číslo stupně je pozice ve škále, ne hodnota světlosti. Stupeň 500 sahá od světlosti 55,1 % v OKLCH u gray po 79,5 % u yellow, a proto se yellow-500 a blue-500 jako barvy textu chovají úplně jinak.

Modrá v Tailwind: každý stupeň s OKLCH, HEX a kontrastem

Tady je celá modrá škála tak, jak ji definuje Tailwind v4. Sloupec HEX obsahuje nejbližší barvu v sRGB, nalezenou snížením chroma při zachování světlosti a tónu. Kontrastní poměry jsou hodnoty WCAG 2 měřené na tomto HEX.

Blue-600 je první stupeň, který na bílé projde 4,5:1 pro běžný text. Blue-500 projde na černé s 5,58:1, ale na bílé s 3,76:1 neprojde. Žádný modrý stupeň nedosáhne 4,5:1 na obou, takže světlý a tmavý motiv potřebují různé stupně.

Které stupně Tailwind projdou WCAG AA na bílé

Nejsvětlejší vyhovující stupeň závisí na tónu. Orange, amber, yellow, lime a také green, emerald, teal, cyan a sky jsou na stupni 500 ještě světlé, takže pro běžný text potřebují 700. Red, blue, violet, purple, fuchsia, pink a rose projdou na 600, indigo už na 500. Výjimkou je yellow: i yellow-600 s 2,93:1 neprojde ani pro velký text.

Světlost předpovídá výsledek lépe než číslo stupně. Ze všech 286 barev projde 4,5:1 na bílé každý stupeň se světlostí v OKLCH pod 58 % a každý nad 59,2 % neprojde. Stačí přečíst L v hodnotě třídy a výsledek znáte dřív, než ho otestujete.

Všechny neutrální škály kromě olive projdou na 500. Olive-500 má světlost 58 % a nažloutlý tón a dosáhne jen 4,25:1, takže text v gray-500 a text v olive-500 nejsou zaměnitelné.

Barvy v Tailwind v3 vs. v4

Verze 3 definovala barvy jako hodnoty HEX v tailwind.config.js pod theme.extend.colors. Verze 4 přesouvá konfiguraci do CSS: barvy jsou proměnné motivu uvnitř @theme, zapsané v OKLCH a dostupné jako proměnné CSS, takže var(--color-blue-500) funguje v obyčejném CSS i v inline stylech.

Samotná paleta byla doladěna, ne překreslena. Po převodu do OKLCH má blue-500 z v3 (#3b82f6) přesně stejnou světlost i tón jako blue-500 z v4. Vzrostla jen chroma, z 0,188 na 0,214. Zbytek modré škály se chová stejně, s výjimkou blue-400, který navíc ztmavl o 0,7 bodu. Kontrast se téměř nezmění, zatímco barvy působí sytěji.

Vyšší chroma přesahuje sRGB. 94 z 286 barev v4 leží mimo sRGB a uvnitř Display P3, všechny jsou barevné. Škála orange má mimo 9 z 11 stupňů, blue 4 (200 až 500). Na obrazovce s P3 vidíte plnou barvu, na obrazovce se sRGB zobrazí prohlížeč blízkou náhradu. Verze 4 cílí na Safari 16.4, Chrome 111 a Firefox 128 nebo novější, které všechny rozumí oklch().

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

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

Jak přidat vlastní barvy v Tailwind v4

Deklarujte proměnnou ve jmenném prostoru --color- uvnitř @theme. Část za --color- se stane názvem třídy, takže --color-brand vám dá bg-brand, text-brand, border-brand, ring-brand a všechny ostatní barevné utility a k tomu var(--color-brand) v CSS. Přijímá se HEX, rgb(), hsl() i oklch().

Pokud chcete výchozí paletu nahradit, a ne rozšířit, nejdřív jmenný prostor vynulujte pomocí --color-*: initial a pak definujte jen barvy, které chcete. Utility se generují jen pro třídy, které skutečně použijete, takže většina projektů výchozí barvy ponechává.

@import 'tailwindcss';

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

Jedna --color-brand stačí pro jeden akcent. Jakmile potřebujete stavy při najetí myší, tónovaná pozadí nebo tmavý režim, definujte celou škálu s číslovanými stupni.

Jak sestavit vlastní škálu od 50 do 950

Škála níže byla vygenerována z #e4572e. Její světlost 63,7 % odpovídá stupni 500, takže firemní barva zůstane přesně na 500. Ostatní stupně sledují křivku světlosti Tailwind, drží stejný tón, chroma vrcholí na 500 a 600 a k oběma koncům klesá a všechny se vejdou do sRGB, takže hodnoty HEX jsou přesné.

Stejně jako vlastní teplé škály Tailwind potřebuje i tato škála pro běžný text na bílé stupeň 600. Brand-500 dává 3,68:1, což stačí jen pro velký text a ikony.

@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);
}

Při vkládání zachovejte plnou přesnost. Zaokrouhlení světlosti na 0,1 % a chroma na tři desetinná místa posune brand-600 těsně mimo sRGB, což nevadí, ale přestane to přesně odpovídat HEX.

Jak fungují modifikátory průhlednosti jako bg-blue-500/50

Lomítko za barvou nastaví její alfa kanál: bg-blue-500/50 je blue-500 na 50 %. Verze 3 to kompilovala na rgb(59 130 246 / 0.5), což fungovalo jen u barev, které Tailwind uměl rozložit na kanály. Vlastní barvy definované jako proměnné CSS potřebovaly zvláštní formát rgb(var(--brand) / <alpha-value>).

Verze 4 kompiluje modifikátor na color-mix() v Oklab, kde barvu míchá s transparent. To funguje s jakoukoli barvou: s proměnnými motivu, libovolnými hodnotami jako bg-[#e4572e]/50 i s vašimi vlastními proměnnými CSS.

Průhlednost mění kontrast. Na bílé se blue-500/50 vykreslí jako #95bfff a blue-500/10 jako #eaf2ff. Text v blue-600 má 5,25:1, ale text-blue-600/60 klesne na 2,62:1 a neprojde ani pro velký text.

• blue-500#2b7fff
• blue-500/50 na bílé#95bfff
• blue-500/20 na bílé#d5e5ff
• blue-500/10 na bílé#eaf2ff

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

Jak najít nejbližší třídu Tailwind k jakémukoli HEX

Porovnejte HEX se všemi 286 stupni podle vnímané vzdálenosti v Oklab (ΔEOK). Pod hodnotou zhruba 0,02 je rozdíl vedle sebe těžko vidět, takže třída Tailwind může vaši barvu nahradit. Nad zhruba 0,04 raději přidejte vlastní barvu.

Tabulka ukazuje skutečné shody. Staré hodnoty HEX z v3 se vracejí ke stejné třídě ve v4, kdežto typická firemní oranžová jako #ff5733 padne mezi orange-600 a red-400. Stránka Tailwind v PickShade toto vyhledání udělá pro jakoukoli barvu a ukáže tři nejbližší třídy.

Otázky a odpovědi