Kolory Tailwind CSS: paleta OKLCH w v4, własne kolory i odcienie

Jak zbudowana jest paleta kolorów Tailwind

Domyślna paleta w Tailwind v4.3 ma 26 nazwanych skal. Siedemnaście jest chromatycznych: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink i rose. Dziewięć to neutralne: slate, gray, zinc, neutral i stone z v3 oraz mauve, olive, mist i taupe dodane w v4. Do tego dochodzą black i white.

Każda skala ma te same 11 stopni: 50, 100, 200 i dalej aż do 900 oraz 950. 50 to prawie biel, 950 to prawie czerń. Klasa to narzędzie plus kolor i stopień: bg-blue-500, text-rose-700, border-zinc-200.

Numer stopnia to pozycja w skali, a nie wartość jasności. Stopień 500 ma od 55,1% jasności OKLCH w gray do 79,5% w yellow, dlatego yellow-500 i blue-500 zachowują się jako kolory tekstu zupełnie inaczej.

Niebieski w Tailwind: każdy odcień z OKLCH, hex i kontrastem

Oto pełna skala blue w definicji Tailwind v4. Kolumna hex to najbliższy kolor sRGB, znaleziony przez obniżanie chromy przy zachowaniu jasności i barwy. Współczynniki kontrastu to wartości WCAG 2 zmierzone dla tego hex.

Blue-600 to pierwszy stopień, który daje 4,5:1 dla tekstu podstawowego na białym. Blue-500 przechodzi na czarnym z wynikiem 5,58:1, ale na białym ma tylko 3,76:1. Żaden stopień niebieskiego nie osiąga 4,5:1 na obu tłach, więc jasny i ciemny motyw potrzebują różnych stopni.

Które odcienie Tailwind przechodzą WCAG AA na białym

Najjaśniejszy stopień, który przechodzi, zależy od barwy. Orange, amber, yellow, lime oraz skale zielone, morskie, cyjanowe i błękitne są na 500 wciąż jasne, więc do tekstu podstawowego potrzebują 700. Red, blue, violet, purple, fuchsia, pink i rose przechodzą od 600, indigo już od 500. Wyjątkiem jest yellow: nawet yellow-600 nie spełnia progu dla dużego tekstu, ma 2,93:1.

Jasność przewiduje wynik lepiej niż numer stopnia. Spośród wszystkich 286 kolorów każdy odcień z jasnością OKLCH poniżej 58% daje 4,5:1 na białym, a każdy powyżej 59,2% nie daje. Odczytaj L z wartości klasy, a odpowiedź znasz jeszcze przed testem.

Wszystkie neutralne oprócz olive przechodzą od 500. Olive-500 ma 58% jasności i żółtawą barwę, osiąga tylko 4,25:1, więc tekst w gray-500 i w olive-500 nie jest wymienny.

Kolory Tailwind v3 a v4

W v3 kolory były wartościami hex w tailwind.config.js pod theme.extend.colors. v4 przenosi konfigurację do CSS: kolory to zmienne motywu wewnątrz @theme, zapisane w OKLCH i udostępnione jako zmienne CSS, więc var(--color-blue-500) działa w zwykłym CSS i w stylach inline.

Samą paletę dostrojono, a nie narysowano od nowa. Po konwersji do OKLCH blue-500 z v3 (#3b82f6) ma dokładnie tę samą jasność i barwę co blue-500 z v4. Wzrosła tylko chroma, z 0,188 do 0,214. Reszta skali blue wygląda tak samo, z wyjątkiem blue-400, który dodatkowo ściemniał o 0,7 punktu. Kontrast prawie się nie zmienia, a kolory wyglądają żywiej.

Ta dodatkowa chroma wychodzi poza sRGB. 94 z 286 kolorów v4 leży poza sRGB, a wewnątrz Display P3, i wszystkie są chromatyczne. Orange ma poza sRGB 9 z 11 stopni, blue ma 4 (od 200 do 500). Na ekranie P3 widzisz pełny kolor, na ekranie sRGB przeglądarka pokazuje najbliższy. v4 celuje w Safari 16.4, Chrome 111 i Firefox 128 lub nowsze, a wszystkie rozumieją oklch().

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

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

Jak dodać własne kolory w Tailwind v4

Zadeklaruj zmienną w przestrzeni nazw --color- wewnątrz @theme. Część po --color- staje się nazwą klasy, więc --color-brand daje bg-brand, text-brand, border-brand, ring-brand i każde inne narzędzie koloru, a do tego var(--color-brand) w CSS. Akceptowane są hex, rgb(), hsl() i oklch().

Żeby zastąpić domyślną paletę zamiast ją rozszerzać, najpierw wyzeruj przestrzeń nazw przez --color-*: initial, a potem zdefiniuj tylko potrzebne kolory. Narzędzia powstają wyłącznie dla klas, których faktycznie używasz, więc większość projektów zostawia domyślne.

@import 'tailwindcss';

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

Jedno --color-brand wystarczy na pojedynczy akcent. Gdy tylko potrzebujesz stanów hover, przyciemnionych teł albo ciemnego motywu, zdefiniuj pełną skalę z numerowanymi stopniami.

Jak zbudować pełną własną skalę od 50 do 950

Poniższą skalę wygenerowano z #e4572e. Jej jasność 63,7% odpowiada stopniowi 500, więc kolor marki zostaje dokładnie na 500. Pozostałe stopnie idą za krzywą jasności Tailwinda i zachowują tę samą barwę, chroma osiąga szczyt na 500 i 600 i maleje ku obu końcom, a wszystkie stopnie mieszczą się w sRGB, więc wartości hex są dokładne.

Tak jak ciepłe barwy samego Tailwinda, ta skala potrzebuje 600 do tekstu podstawowego na białym. Brand-500 daje 3,68:1, co wystarcza tylko do dużego tekstu i ikon.

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

Przy wklejaniu zachowaj pełną precyzję. Zaokrąglenie jasności do 0,1% i chromy do trzech miejsc po przecinku wypycha brand-600 tuż poza sRGB, co nie szkodzi, ale kolor przestaje dokładnie odpowiadać wartości hex.

Jak działają modyfikatory przezroczystości, np. bg-blue-500/50

Ukośnik po kolorze ustawia jego kanał alfa: bg-blue-500/50 to blue-500 przy 50%. v3 kompilował to do rgb(59 130 246 / 0.5), co działało tylko dla kolorów, które Tailwind potrafił rozbić na kanały. Własne kolory zdefiniowane jako zmienne CSS wymagały specjalnego formatu rgb(var(--brand) / <alpha-value>).

v4 kompiluje modyfikator do color-mix() w Oklab, mieszając kolor z transparent. To działa z każdym kolorem: zmiennymi motywu, dowolnymi wartościami, np. bg-[#e4572e]/50, i twoimi własnymi zmiennymi CSS.

Przezroczystość zmienia kontrast. Na białym blue-500/50 wyświetla się jako #95bfff, a blue-500/10 jako #eaf2ff. Tekst w blue-600 ma 5,25:1, ale text-blue-600/60 spada do 2,62:1 i nie przechodzi nawet dla dużego tekstu.

• blue-500#2b7fff
• blue-500/50 na białym#95bfff
• blue-500/20 na białym#d5e5ff
• blue-500/10 na białym#eaf2ff

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

Jak znaleźć najbliższą klasę Tailwind dla dowolnego hex

Porównaj hex ze wszystkimi 286 odcieniami według odległości percepcyjnej w Oklab (ΔEOK). Poniżej około 0,02 różnicę trudno zauważyć przy zestawieniu obok siebie, więc klasa Tailwind może zastąpić twój kolor. Powyżej około 0,04 lepiej dodać własny kolor.

Tabela pokazuje prawdziwe dopasowania. Stare wartości hex z v3 trafiają do tej samej klasy w v4, a typowy pomarańczowy marki, np. #ff5733, wypada między orange-600 a red-400. Strona Tailwind w PickShade robi to wyszukiwanie dla dowolnego koloru i pokazuje trzy najbliższe klasy.

Pytania i odpowiedzi