Tailwind CSS renkleri: v4 OKLCH paleti, özel renkler ve kademeler

Tailwind renk paleti nasıl yapılandırılmıştır

Tailwind v4.3’teki varsayılan palette 26 adlandırılmış skala var. On yedisi kromatik: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink ve rose. Dokuzu nötr: v3’ten gelen slate, gray, zinc, neutral ve stone ile v4 sürecinde eklenen mauve, olive, mist ve taupe. Bunlara siyah ve beyaz da eklenir.

Her skalada aynı 11 kademe bulunur: 50, 100, 200’den 900’e kadar ve 950. 50 neredeyse beyaz, 950 neredeyse siyahtır. Bir sınıf utility, renk ve kademeden oluşur: bg-blue-500, text-rose-700, border-zinc-200.

Kademe numarası bir açıklık değeri değil, skaladaki bir konumdur. 500 kademesi gray’de %55,1 OKLCH açıklığından yellow’da %79,5’e kadar değişir; bu yüzden yellow-500 ve blue-500 metin rengi olarak çok farklı davranır.

Tailwind mavisi: OKLCH, hex ve kontrastla her kademe

Aşağıda Tailwind v4’ün tanımladığı haliyle tam mavi skala var. Hex sütunu, açıklık ve ton korunup kroma düşürülerek bulunan en yakın sRGB rengidir. Kontrast oranları bu hex üzerinden ölçülmüş WCAG 2 değerleridir.

Blue-600, beyaz üzerinde gövde metni için 4,5:1’i geçen ilk kademedir. Blue-500 siyah üzerinde 5,58:1 ile geçer, ama beyaz üzerinde 3,76:1 ile kalır. Hiçbir mavi kademe ikisinde birden 4,5:1’i geçmez, bu yüzden açık ve koyu temalar farklı kademeler ister.

Hangi Tailwind kademeleri beyaz üzerinde WCAG AA’yı geçer

Geçen en açık kademe tona bağlıdır. Orange, amber, yellow, lime ile green, emerald, teal, cyan ve sky tonları 500’de hâlâ açıktır, bu yüzden gövde metni için 700 gerekir. Red, blue, violet, purple, fuchsia, pink ve rose 600’de, indigo ise daha 500’de geçer. Yellow istisnadır: yellow-600 bile 2,93:1 ile büyük metinde kalır.

Açıklık, sonucu kademe numarasından daha iyi tahmin eder. 286 rengin tamamında OKLCH açıklığı %58’in altındaki her kademe beyaz üzerinde 4,5:1’i geçer, %59,2’nin üzerindeki her kademe kalır. Sınıf değerindeki L’yi okuyun, test etmeden cevabı bilirsiniz.

Olive dışındaki tüm nötrler 500’de geçer. Olive-500 sarımsı bir tonla %58 açıklıktadır ve yalnızca 4,25:1’e ulaşır, bu yüzden gray-500 ve olive-500 metinler birbirinin yerine kullanılamaz.

Tailwind v3 ile v4 renkleri

v3, renkleri tailwind.config.js içinde theme.extend.colors altında hex değerleri olarak tanımlıyordu. v4 yapılandırmayı CSS’e taşır: renkler @theme içinde OKLCH ile yazılmış tema değişkenleridir ve CSS değişkenleri olarak sunulur, böylece var(--color-blue-500) düz CSS’te ve satır içi stillerde çalışır.

Paletin kendisi yeniden çizilmedi, yalnızca ince ayar yapıldı. OKLCH’ye çevrildiğinde v3 blue-500 (#3b82f6), v4 blue-500 ile tam olarak aynı açıklık ve tona sahiptir. Yalnızca kroma 0,188’den 0,214’e yükseldi. Mavi skalanın geri kalanı da aynı düzeni izler; tek istisna 0,7 puan daha koyulaşan blue-400’dür. Renkler daha canlı görünürken kontrast neredeyse hiç değişmez.

Bu ek kroma sRGB’nin ötesine uzanır. v4’ün 286 renginden 94’ü sRGB dışında ve Display P3 içindedir, hepsi de kromatiktir. Orange’ın 11 kademesinden 9’u dışarıda, blue’nun 4’ü (200’den 500’e). P3 ekranda rengin tamamını görürsünüz, sRGB ekranda ise tarayıcı yakın bir renk gösterir. v4, Safari 16.4, Chrome 111 ve Firefox 128 veya daha yenisini hedefler; hepsi oklch() anlar.

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

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

Tailwind v4’te özel renkler nasıl eklenir

@theme içinde --color- ad alanında bir değişken tanımlayın. --color- sonrasındaki kısım sınıf adı olur; --color-brand size bg-brand, text-brand, border-brand, ring-brand ve diğer tüm renk utility’lerini, ayrıca CSS’te var(--color-brand) değerini verir. Hex, rgb(), hsl() ve oklch() değerlerinin hepsi kabul edilir.

Varsayılan paleti genişletmek yerine değiştirmek için önce ad alanını --color-*: initial ile sıfırlayın, sonra yalnızca istediğiniz renkleri tanımlayın. Utility’ler yalnızca gerçekten kullandığınız sınıflar için üretilir, bu yüzden çoğu proje varsayılanları korur.

@import 'tailwindcss';

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

Tek bir vurgu rengi için tek bir --color-brand yeterlidir. Hover durumlarına, renklendirilmiş arka planlara ya da koyu moda ihtiyaç duyduğunuz anda numaralı kademelerle tam bir skala tanımlayın.

50’den 950’ye tam bir özel skala nasıl oluşturulur

Aşağıdaki skala #e4572e’den üretildi. Bu rengin %63,7’lik açıklığı 500 kademesine denk geldiği için marka rengi tam olarak 500’de kalır. Diğer kademeler Tailwind’in açıklık eğrisini izler ve aynı tonu korur; kroma 500 ve 600’de zirve yapıp iki uca doğru azalır. Hepsi sRGB içine sığdığı için hex değerleri kesindir.

Tailwind’in kendi sıcak tonları gibi bu skala da beyaz üzerinde gövde metni için 600 ister. Brand-500 3,68:1 verir; bu yalnızca büyük metin ve ikonlar için yeterlidir.

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

Yapıştırırken tam hassasiyeti koruyun. Açıklığı %0,1’e ve kromayı üç ondalığa yuvarlamak brand-600’ü sRGB’nin hemen dışına iter; bu zararsızdır ama artık hex ile birebir eşleşmez.

bg-blue-500/50 gibi opaklık değiştiricileri nasıl çalışır

Renkten sonra gelen eğik çizgi alfasını belirler: bg-blue-500/50, %50 opaklıktaki blue-500’dür. v3 bunu rgb(59 130 246 / 0.5) olarak derliyordu ve bu yalnızca Tailwind’in kanallara ayırabildiği renklerde çalışıyordu. CSS değişkeni olarak tanımlanan özel renkler için özel bir rgb(var(--brand) / <alpha-value>) biçimi gerekiyordu.

v4, değiştiriciyi Oklab’da color-mix() olarak derler ve rengi transparent ile karıştırır. Bu her renkle çalışır: tema değişkenleri, bg-[#e4572e]/50 gibi keyfi değerler ve kendi CSS değişkenleriniz.

Opaklık kontrastı değiştirir. Beyaz üzerinde blue-500/50 #95bfff, blue-500/10 ise #eaf2ff olarak görünür. blue-600 metin 5,25:1 ile okunur, ama text-blue-600/60 2,62:1’e düşer ve büyük metinde bile kalır.

• blue-500#2b7fff
• Beyaz üzerinde blue-500/50#95bfff
• Beyaz üzerinde blue-500/20#d5e5ff
• Beyaz üzerinde blue-500/10#eaf2ff

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

Herhangi bir hex için en yakın Tailwind sınıfı nasıl bulunur

Hex değerini 286 kademenin hepsiyle Oklab’daki algısal mesafeye (ΔEOK) göre karşılaştırın. Yaklaşık 0,02’nin altında fark yan yana bile zor görülür, bu yüzden Tailwind sınıfı renginizin yerini alabilir. Yaklaşık 0,04’ün üzerinde ise özel bir renk ekleyin.

Tablo gerçek eşleşmeleri gösteriyor. Eski v3 hex değerleri aynı v4 sınıfına geri eşlenirken, #ff5733 gibi tipik bir marka turuncusu orange-600 ile red-400 arasına düşer. PickShade Tailwind sayfası bu aramayı her renk için yapar ve en yakın üç sınıfı gösterir.

Sorular ve yanıtlar