Culori Tailwind CSS: paleta v4 în OKLCH, culori personalizate și trepte

Cum este structurată paleta de culori Tailwind

Paleta implicită din Tailwind v4.3 are 26 de scale cu nume. Șaptesprezece sunt cromatice: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink și rose. Nouă sunt neutre: slate, gray, zinc, neutral și stone din v3, plus mauve, olive, mist și taupe, adăugate pe parcursul v4. Pe deasupra vin black și white.

Fiecare scală are aceleași 11 trepte: 50, 100, 200 până la 900 și 950. 50 este aproape alb, 950 aproape negru. O clasă este formată din utilitar, culoare și treaptă: bg-blue-500, text-rose-700, border-zinc-200.

Numărul treptei este o poziție în scală, nu o valoare de luminozitate. Treapta 500 variază de la 55,1% luminozitate OKLCH la gray până la 79,5% la yellow, de aceea yellow-500 și blue-500 se comportă foarte diferit ca și culori de text.

Albastrul Tailwind: fiecare treaptă cu OKLCH, hex și contrast

Iată scala completă de albastru așa cum o definește Tailwind v4. Coloana hex conține cea mai apropiată culoare sRGB, obținută prin reducerea cromei cu păstrarea luminozității și a nuanței. Rapoartele de contrast sunt valori WCAG 2 măsurate pe acel hex.

Blue-600 este prima treaptă care trece de 4,5:1 pentru textul principal pe alb. Blue-500 trece pe negru cu 5,58:1, dar pică pe alb cu 3,76:1. Nicio treaptă de albastru nu trece de 4,5:1 pe ambele, așa că tema deschisă și cea întunecată au nevoie de trepte diferite.

Ce trepte Tailwind trec WCAG AA pe alb

Cea mai deschisă treaptă care trece depinde de nuanță. Orange, amber, yellow, lime și verzii, teal, cyan și sky sunt încă deschise la 500, așa că au nevoie de 700 pentru textul principal. Red, blue, violet, purple, fuchsia, pink și rose trec la 600, iar indigo deja la 500. Yellow este excepția: chiar și yellow-600 pică pentru textul mare, cu 2,93:1.

Luminozitatea prezice rezultatul mai bine decât numărul treptei. Dintre toate cele 286 de culori, fiecare treaptă cu luminozitatea OKLCH sub 58% trece de 4,5:1 pe alb, iar fiecare peste 59,2% pică. Citește L din valoarea clasei și știi răspunsul înainte să testezi.

Toate neutrele în afară de olive trec la 500. Olive-500 are 58% luminozitate și o nuanță gălbuie și ajunge doar la 4,25:1, așa că textul gray-500 și textul olive-500 nu sunt interschimbabile.

Culorile Tailwind v3 față de v4

v3 definea culorile ca valori hex în tailwind.config.js, sub theme.extend.colors. v4 mută configurarea în CSS: culorile sunt variabile de temă în @theme, scrise în OKLCH și expuse ca variabile CSS, așa că var(--color-blue-500) funcționează în CSS obișnuit și în stilurile inline.

Paleta în sine a fost reglată, nu redesenată. Convertit în OKLCH, blue-500 din v3 (#3b82f6) are exact aceeași luminozitate și nuanță ca blue-500 din v4. A crescut doar croma, de la 0,188 la 0,214. Restul scalei de albastru urmează același tipar, cu excepția lui blue-400, care s-a și închis cu 0,7 puncte. Contrastul aproape nu se schimbă, iar culorile arată mai vii.

Această cromă în plus trece dincolo de sRGB. 94 dintre cele 286 de culori v4 sunt în afara sRGB și în interiorul Display P3, toate cromatice. Orange are 9 din 11 trepte în afară, blue are 4 (de la 200 la 500). Pe un ecran P3 vezi culoarea completă, pe un ecran sRGB browserul afișează una apropiată. v4 țintește Safari 16.4, Chrome 111 și Firefox 128 sau mai noi, care înțeleg toate oklch().

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

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

Cum adaugi culori personalizate în Tailwind v4

Declară o variabilă în spațiul de nume --color- din @theme. Partea de după --color- devine numele clasei, așa că --color-brand îți dă bg-brand, text-brand, border-brand, ring-brand și toate celelalte utilitare de culoare, plus var(--color-brand) în CSS. Sunt acceptate hex, rgb(), hsl() și oklch().

Ca să înlocuiești paleta implicită în loc să o extinzi, resetează mai întâi spațiul de nume cu --color-*: initial, apoi definește doar culorile pe care le vrei. Utilitarele se generează doar pentru clasele pe care le folosești efectiv, așa că majoritatea proiectelor păstrează culorile implicite.

@import 'tailwindcss';

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

Un singur --color-brand este suficient pentru o culoare de accent. De îndată ce ai nevoie de stări hover, fundaluri nuanțate sau mod întunecat, definește o scală completă cu trepte numerotate.

Cum construiești o scală proprie completă de la 50 la 950

Scala de mai jos a fost generată din #e4572e. Luminozitatea ei de 63,7% corespunde treptei 500, așa că culoarea brandului rămâne exact la 500. Celelalte trepte urmează curba de luminozitate a lui Tailwind, păstrează aceeași nuanță, croma atinge maximul la 500 și 600 și scade spre ambele capete, iar toate încap în sRGB, așa că valorile hex sunt exacte.

La fel ca nuanțele calde ale lui Tailwind, această scală are nevoie de 600 pentru textul principal pe alb. Brand-500 dă 3,68:1, suficient doar pentru text mare și pictograme.

@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ăstrează precizia completă când lipești valorile. Rotunjirea luminozității la 0,1% și a cromei la trei zecimale împinge brand-600 puțin în afara sRGB, ceea ce nu strică nimic, dar nu mai corespunde exact cu hex-ul.

Cum funcționează modificatorii de opacitate ca bg-blue-500/50

O bară oblică după culoare îi setează canalul alfa: bg-blue-500/50 este blue-500 la 50%. v3 compila asta în rgb(59 130 246 / 0.5), ceea ce funcționa doar pentru culorile pe care Tailwind le putea descompune în canale. Culorile personalizate definite ca variabile CSS aveau nevoie de un format special rgb(var(--brand) / <alpha-value>).

v4 compilează modificatorul în color-mix() în Oklab, amestecând culoarea cu transparent. Asta funcționează cu orice culoare: variabile de temă, valori arbitrare ca bg-[#e4572e]/50 și propriile tale variabile CSS.

Opacitatea schimbă contrastul. Peste alb, blue-500/50 se afișează ca #95bfff, iar blue-500/10 ca #eaf2ff. Textul blue-600 are 5,25:1, dar text-blue-600/60 scade la 2,62:1 și pică chiar și pentru textul mare.

• blue-500#2b7fff
• blue-500/50 pe alb#95bfff
• blue-500/20 pe alb#d5e5ff
• blue-500/10 pe alb#eaf2ff

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

Cum găsești cea mai apropiată clasă Tailwind pentru orice hex

Compară hex-ul cu toate cele 286 de trepte după distanța perceptuală în Oklab (ΔEOK). Sub aproximativ 0,02 diferența se vede greu când culorile stau una lângă alta, așa că clasa Tailwind îți poate înlocui culoarea. Peste aproximativ 0,04 adaugă mai bine o culoare personalizată.

Tabelul arată potriviri reale. Valorile hex vechi din v3 revin la aceeași clasă din v4, în timp ce un portocaliu tipic de brand ca #ff5733 cade între orange-600 și red-400. Pagina Tailwind din PickShade face această căutare pentru orice culoare și arată cele mai apropiate trei clase.

Întrebări și răspunsuri