Tailwind CSS Renginden HEX’e Arama
blue-500, #3b82f6, yani rgb(59, 130, 246) değeridir. Tailwind’in renk sistemi, 50’den 950’ye kadar numaralandırılmış tonlarla adlandırılmış renklerden oluşan sabit bir palet kullanır. Her ton, aynı ana sürüm içinde Tailwind sürümleri arasında tutarlı olan belirli bir hex değerine eşlenir.
Renk Ölçeği Yapısı
| Ton | Tipik kullanım |
|---|---|
| 50 | Çok açık arka planlar, fare üstü tonları |
| 100 | Açık arka planlar, seçili durumlar |
| 200 | Kenarlıklar, ayırıcılar |
| 300 | Devre dışı durumlar, yer tutucu metin |
| 400 | İkincil metin, simgeler |
| 500 | Saf ton, etkileşimli öğeler |
| 600 | 500 öğeleri için fare üstü durumları |
| 700 | Açık arka planlarda metin |
| 800 | Başlık metni |
| 900 | Yüksek kontrastlı metin |
| 950 | Siyaha yakın, Tailwind v3.3’te eklendi |
Yaygın Renkler ve HEX Değerleri
| Tailwind adı | HEX | RGB |
|---|---|---|
| blue-500 | #3b82f6 | rgb(59, 130, 246) |
| blue-600 | #2563eb | rgb(37, 99, 235) |
| slate-900 | #0f172a | rgb(15, 23, 42) |
| gray-900 | #111827 | rgb(17, 24, 39) |
| zinc-900 | #18181b | rgb(24, 24, 27) |
| red-500 | #ef4444 | rgb(239, 68, 68) |
| green-500 | #22c55e | rgb(34, 197, 94) |
Gray Aileleri Karşılaştırması
| Ad | 900 değeri | Alt ton |
|---|---|---|
| slate | #0f172a | Güçlü mavi |
| gray | #111827 | Hafif mavi |
| zinc | #18181b | Nötr |
| neutral | #171717 | Gerçek nötr |
| stone | #1c1917 | Sıcak kahverengi |
tailwind.config.js’de Özel Renkler
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a',
},
},
},
},
}Bu, bg-brand-500, text-brand-600 ve diğer tüm yardımcı varyantları otomatik olarak ekler.
Tailwind v4 ve CSS Özel Özellikleri
@import "tailwindcss";
@theme {
--color-brand-50: #eff6ff;
--color-brand-500: #3b82f6;
--color-brand-900: #1e3a8a;
}@theme içindeki her renk otomatik olarak yardımcı sınıflar oluşturur.