Farver i Tailwind CSS: v4-paletten i OKLCH, egne farver og nuancer

Sådan er Tailwinds farvepalet bygget op

Standardpaletten i Tailwind v4.3 har 26 navngivne skalaer. Sytten er kulørte: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink og rose. Ni er neutrale: slate, gray, zinc, neutral og stone fra v3 plus mauve, olive, mist og taupe, der kom til i løbet af v4. Dertil kommer black og white.

Alle skalaer har de samme 11 trin: 50, 100, 200 til og med 900 samt 950. 50 er næsten hvid, 950 er næsten sort. En klasse består af utility-klassen plus farven og trinnet: bg-blue-500, text-rose-700, border-zinc-200.

Trinnummeret er en placering i skalaen, ikke en lyshedsværdi. Trin 500 går fra 55,1 % OKLCH-lyshed i gray til 79,5 % i yellow, og derfor opfører yellow-500 og blue-500 sig meget forskelligt som tekstfarver.

Tailwind blue: alle nuancer med OKLCH, HEX og kontrast

Her er hele den blå skala, som Tailwind v4 definerer den. HEX-kolonnen er den nærmeste farve i sRGB, fundet ved at sænke kroma og bevare lyshed og farvetone. Kontrastforholdene er WCAG 2-værdier målt på den HEX-værdi.

Blue-600 er det første trin, der når 4,5:1 for brødtekst på hvid. Blue-500 består på sort med 5,58:1, men dumper på hvid med 3,76:1. Intet blåt trin når 4,5:1 på begge, så lyse og mørke temaer skal bruge forskellige trin.

Hvilke Tailwind-nuancer består WCAG AA på hvid

Det lyseste trin, der består, afhænger af farvetonen. Orange, amber, yellow, lime og de grønne, blågrønne, cyan og himmelblå er stadig lyse ved 500, så de skal bruge 700 til brødtekst. Red, blue, violet, purple, fuchsia, pink og rose består ved 600, indigo allerede ved 500. Yellow skiller sig ud: selv yellow-600 dumper til stor tekst med 2,93:1.

Lysheden forudsiger resultatet bedre end trinnummeret. Blandt alle 286 farver når alle nuancer med en OKLCH-lyshed under 58 % 4,5:1 på hvid, og alle over 59,2 % dumper. Aflæs L i klassens værdi, så kender du svaret, før du tester.

Alle neutrale farver undtagen olive består ved 500. Olive-500 ligger på 58 % lyshed med en gullig farvetone og når kun 4,25:1, så tekst i gray-500 og olive-500 kan ikke bruges i flæng.

Farver i Tailwind v3 og v4

v3 definerede farver som HEX-værdier i tailwind.config.js under theme.extend.colors. v4 flytter konfigurationen ind i CSS: farver er temavariabler i @theme, skrevet i OKLCH og tilgængelige som CSS-variabler, så var(--color-blue-500) virker i almindelig CSS og inline styles.

Selve paletten blev finjusteret, ikke tegnet om. Omregnet til OKLCH har blue-500 fra v3 (#3b82f6) præcis samme lyshed og farvetone som blue-500 i v4. Kun kroma steg, fra 0,188 til 0,214. Resten af den blå skala følger samme mønster, bortset fra blue-400, som også blev 0,7 point mørkere. Kontrasten flytter sig knap, mens farverne ser mere intense ud.

Den ekstra kroma rækker ud over sRGB. 94 af de 286 farver i v4 ligger uden for sRGB og inden for Display P3, og alle er kulørte. Orange har 9 af 11 trin udenfor, blue har 4 (200 til 500). På en P3-skærm ser du hele farven, på en sRGB-skærm viser browseren en farve tæt på. v4 er rettet mod Safari 16.4, Chrome 111 og Firefox 128 eller nyere, som alle forstår oklch().

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

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

Sådan tilføjer du egne farver i Tailwind v4

Erklær en variabel i navnerummet --color- inde i @theme. Delen efter --color- bliver klassenavnet, så --color-brand giver dig bg-brand, text-brand, border-brand, ring-brand og alle andre farve-utilities plus var(--color-brand) i CSS. HEX, rgb(), hsl() og oklch() accepteres alle.

Vil du erstatte standardpaletten i stedet for at udvide den, nulstiller du først navnerummet med --color-*: initial og definerer derefter kun de farver, du vil have. Utilities genereres kun for de klasser, du faktisk bruger, så de fleste projekter beholder standardfarverne.

@import 'tailwindcss';

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

Én --color-brand er fin til en enkelt accentfarve. Så snart du skal bruge hover-tilstande, tonede baggrunde eller mørk tilstand, bør du definere en hel skala med nummererede trin.

Sådan bygger du en hel skala fra 50 til 950

Skalaen nedenfor er genereret ud fra #e4572e. Dens lyshed på 63,7 % svarer til trin 500, så brandfarven bliver liggende præcis på 500. De andre trin følger Tailwinds lyshedskurve og bevarer farvetonen, kroma topper ved 500 og 600 og aftager mod begge ender, og alle trin ligger inden for sRGB, så HEX-værdierne er præcise.

Ligesom Tailwinds egne varme farvetoner kræver denne skala 600 til brødtekst på hvid. Brand-500 giver 3,68:1, nok til stor tekst og ikoner, men ikke mere.

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

Behold den fulde præcision, når du indsætter. Afrunder du lysheden til 0,1 % og kroma til tre decimaler, ryger brand-600 lige uden for sRGB. Det er harmløst, men så passer værdien ikke længere præcist med HEX-koden.

Sådan virker opacitetsmodifikatorer som bg-blue-500/50

En skråstreg efter farven angiver dens alfa: bg-blue-500/50 er blue-500 med 50 %. v3 kompilerede det til rgb(59 130 246 / 0.5), som kun virkede for farver, Tailwind kunne dele op i kanaler. Egne farver defineret som CSS-variabler krævede et særligt format: rgb(var(--brand) / <alpha-value>).

v4 kompilerer modifikatoren til color-mix() i Oklab og blander farven med transparent. Det virker med alle farver: temavariabler, vilkårlige værdier som bg-[#e4572e]/50 og dine egne CSS-variabler.

Opacitet ændrer kontrasten. På hvid bliver blue-500/50 til #95bfff og blue-500/10 til #eaf2ff. Tekst i blue-600 giver 5,25:1, men text-blue-600/60 falder til 2,62:1 og dumper selv til stor tekst.

• blue-500#2b7fff
• blue-500/50 på hvid#95bfff
• blue-500/20 på hvid#d5e5ff
• blue-500/10 på hvid#eaf2ff

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

Sådan finder du den nærmeste Tailwind-klasse til en HEX-farve

Sammenlign HEX-værdien med alle 286 nuancer efter perceptuel afstand i Oklab (ΔEOK). Under omkring 0,02 er forskellen svær at se side om side, så Tailwind-klassen kan erstatte din farve. Over omkring 0,04 bør du i stedet tilføje en egen farve.

Tabellen viser rigtige match. Gamle HEX-værdier fra v3 rammer den samme klasse i v4, mens en typisk orange brandfarve som #ff5733 lander mellem orange-600 og red-400. Tailwind-siden i PickShade laver dette opslag for enhver farve og viser de tre nærmeste klasser.

Spørgsmål og svar