Tailwind CSS Renk Paleti ve Tonlar: bg, text, border Renkleri

Varsayılan palet: 26 renk ailesi ve 11 ton

Resmî renk sayfası ve v4.3.5 CLI ile ürettiğimiz tema dosyası aynı listeyi veriyor. Renkli paletler kırmızıdan pembeye doğru sıralanır: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. Bunların ardından gri tonlu aileler gelir: slate, gray, zinc, neutral, stone ve ayrıca mauve, olive, mist, taupe. Elinizdeki eski notlarda ya da kopya kâğıtlarında 22 palet görebilirsiniz; son dört aile o listelerde yoktur ama v4.3.5 tema dosyasında her biri 11 tonla tanımlıdır.

Her palette tonlar 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 ve 950 olarak ilerler. Küçük sayı açık, büyük sayı koyu tondur. Tema dosyasındaki değerlere bakınca bu sıralama oklch değerinin ilk bileşeninde, yani açıklıkta açıkça görülür: --color-gray-50 için açıklık %98.5, --color-gray-500 için %55.1, --color-gray-950 için %13 değerindedir. Bu düzen sayesinde "aynı rengin bir koyu tonu" gerektiğinde numarayı artırmanız yeterlidir; hover için bg-sky-500 yerine bg-sky-600 seçmek bu yüzden çok yaygın bir kalıptır.

Tabloda görüldüğü gibi palet renkleri oklch biçiminde, siyah ve beyaz ise hex biçiminde tanımlanır. Toplam sayıyı kendiniz de doğrulayabilirsiniz: tema dosyasında 288 adet --color-* değişkeni var; bu da 26 palet çarpı 11 ton artı siyah ve beyaz demektir. Resmî sayfada bir renk kutusuna tıklayınca oklch değeri, shift ile tıklayınca en yakın hex değeri kopyalanır; tasarım aracınız oklch desteklemiyorsa bu küçük ipucu işinizi kolaylaştırır.

Renk önekleri: aynı renk, farklı özellikler

Palet ve ton bir rengi seçer, önek ise o rengin nereye uygulanacağını belirler. Aynı sky-500 değerini arka plana, metne, kenarlığa ya da bir SVG dolgusuna verebilirsiniz. Aşağıdaki küçük örneği v4.3.5 ile derledik:

<button class="bg-sky-500 text-white border border-sky-700">Kaydet</button>
<svg class="fill-blue-500 stroke-red-600"></svg>

v4.3.5 ile derlenen CSS (yalnızca utilities katmanı):

@layer utilities {
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-sky-700 {
    border-color: var(--color-sky-700);
  }
  .bg-sky-500 {
    background-color: var(--color-sky-500);
  }
  .fill-blue-500 {
    fill: var(--color-blue-500);
  }
  .stroke-red-600 {
    stroke: var(--color-red-600);
  }
  .text-white {
    color: var(--color-white);
  }
}
/* (kısaltıldı) */

Burada iki ayrıntıya dikkat edin. Birincisi, sınıflar CSS içinde HTML'deki sırayla değil derleyicinin kendi sırasıyla dizilir; bu konu çakışan sınıflar yazısında ayrıntılı anlatılıyor. İkincisi, kuralların hiçbirinde renk değeri doğrudan yazılmaz; hepsi bir tema değişkenine başvurur. Aynı derlemenin @layer theme bölümünde yalnızca kullandığınız renkler tanımlanır: bu örnekte --color-sky-500: oklch(68.5% 0.169 237.323), --color-sky-700: oklch(50% 0.134 242.749), --color-blue-500: oklch(62.3% 0.214 259.815), --color-red-600: oklch(57.7% 0.245 27.325) ve --color-white: #fff çıktıda yer aldı. Kullanmadığınız 280'den fazla renk değişkeni dosyaya hiç girmez.

Aşağıdaki tabloda, v4.3.5 ile tek tek derleyip doğruladığımız renk öneklerini ve gittikleri CSS özelliğini topladık. Gölge ve halka gibi bazı önekler rengi doğrudan bir özelliğe değil, ilgili efektin kullandığı bir ara değişkene yazar; bunların ayrıntısı shadow ve ring yazısında var.

Kenarlık renklerini border ve rounded yazısında, gradyan duraklarındaki renkleri (from-, via-, to-) gradyan yazısında bulabilirsiniz. Form öğelerine özgü accent- ve placeholder: kullanımı ise durum varyantlarıyla birlikte form stilleri yazısında anlatılıyor.

Özel değerler: black, white, transparent, current, inherit

Paletin dışında, ton numarası almayan birkaç anahtar kelime de vardır. bg-black ve bg-white tema değişkenine başvurur; bg-transparent, text-current ve bg-inherit ise CSS anahtar kelimesini doğrudan yazar. Derlemede şu kurallar çıktı:

.bg-black {
  background-color: var(--color-black);
}
.bg-inherit {
  background-color: inherit;
}
.bg-transparent {
  background-color: transparent;
}
.text-current {
  color: currentcolor;
}
.bg-current {
  background-color: currentcolor;
}

current değeri, elemanın o anki metin rengini başka bir özellikte yeniden kullanmanızı sağlar. Örneğin bir simgeyi fill-current ile boyarsanız, simge kendini saran bağlantının metin rengini alır; bağlantının rengini hover: ile değiştirdiğinizde simge de onunla birlikte değişir. Ayrı bir hover kuralı yazmanız gerekmez. transparent ise özellikle bir kenarlığın yerini korumak ama görünmez yapmak istediğinizde işe yarar: border border-transparent yazdığınızda kenarlık kalınlığı düzende yer kaplamaya devam eder, böylece hover anında renk verdiğinizde öğe yerinden kaymaz.

Palet dışı renk: keyfi değer ve CSS değişkeni

Tek seferlik bir renk için temaya dokunmadan köşeli parantez kullanabilirsiniz: bg-[#1da1f2] veya text-[oklch(60%_0.2_30)]. Köşeli parantez içinde boşluk yerine alt çizgi yazılır. Rengi bir CSS değişkeninden almak istiyorsanız normal parantezli kısa yazım vardır: bg-(--kart-zemin), derleyici sizin yerinize var() ekler. Resmî sayfa bunu bg-[var(...)] yazımının kısaltması olarak tanımlıyor. Söz dizimi kurallarının tamamı arbitrary values yazısında anlatılıyor.

.bg-\(--kart-zemin\) {
  background-color: var(--kart-zemin);
}
.bg-\[\#1da1f2\] {
  background-color: #1da1f2;
}
.text-\[oklch\(60\%_0\.2_30\)\] {
  color: oklch(60% 0.2 30);
}

Keyfi değerleri ara sıra kullanmak sorun değildir; ancak aynı hex kodunu on farklı dosyada tekrar ediyorsanız, o renk artık bir tema rengi olmayı hak ediyor demektir. Temaya eklediğiniz renk hem tek bir yerden değiştirilebilir hem de tüm öneklerle (bg-, text-, border- ve diğerleri) otomatik olarak çalışır.

@theme ile marka rengi eklemek, ezmek ve kapatmak

Tailwind v4 renk sistemini CSS dosyanızdaki @theme bloğundan yönetir. --color- ile başlayan her değişken yeni bir renk adı demektir: --color-marka tanımlarsanız bg-marka, text-marka, border-marka gibi sınıfların hepsi kullanılabilir hale gelir. Aynı adı taşıyan varsayılan bir değişkeni yeniden tanımlarsanız varsayılanı ezmiş olursunuz. Bir paletin tamamını kapatmak için yıldızlı ad alanını initial yaparsınız. Aşağıdaki giriş dosyası üçünü birden gösteriyor:

@import "tailwindcss" source(none);
@source inline("bg-marka text-marka-koyu bg-lime-500 bg-sky-500 bg-red-1000");
@theme {
  --color-marka: oklch(55% 0.2 290);
  --color-marka-koyu: #3b0764;
  --color-lime-*: initial;
}

v4.3.5 ile derlenen CSS:

@layer theme {
  :root, :host {
    /* (kısaltıldı) */
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-marka: oklch(55% 0.2 290);
    --color-marka-koyu: #3b0764;
  }
}
@layer utilities {
  .bg-marka {
    background-color: var(--color-marka);
  }
  .bg-sky-500 {
    background-color: var(--color-sky-500);
  }
  .text-marka-koyu {
    color: var(--color-marka-koyu);
  }
}

Çıktıda bg-lime-500 ve bg-red-1000 için hiçbir kural yok. İlki, lime paletini kapattığımız için artık bilinmeyen bir sınıftır; ikincisi ise palette 1000 diye bir ton olmadığı için hiç tanınmaz. Önemli olan şu: derleyici HTML içinde bilinmeyen bir sınıfla karşılaştığında hata vermez, sınıfı sessizce yok sayar. Bu yüzden yanlış yazılmış bir ton numarası tarayıcıda "renk neden gelmedi" sorusuna dönüşür. Aynı sınıfı CSS içinde @apply ile kullanırsanız durum değişir ve derleme durur:

@import "tailwindcss" source(none);
@theme { --color-lime-*: initial; }
.etiket { @apply bg-lime-500; }

Error: Cannot apply unknown utility class `bg-lime-500`

Paletin tamamını boşaltıp yalnızca kendi renklerinizi kullanmak isterseniz resmî sayfanın önerdiği yol --color-*: initial; yazıp ardından kendi --color- değişkenlerinizi tanımlamaktır. Bu durumda bg-white bile tanımsız kalır; ihtiyaç duyduğunuz siyah ve beyazı da kendiniz eklemelisiniz. Tema ad alanlarının genel kuralları (genişletme, ezme, @theme inline) @theme direktifi yazısında anlatılıyor.

Tema rengini kendi CSS'inizde kullanmak

Tema renkleri sıradan CSS değişkenleri olarak yayımlandığı için kendi yazdığınız kurallarda da var(--color-...) ile kullanabilirsiniz. Yaptığımız denemede yalnızca CSS içinde var(--color-rose-500) geçen ve HTML'de hiçbir rose sınıfı bulunmayan bir dosyayı derledik; çıktının tema bölümünde --color-rose-500: oklch(64.5% 0.246 16.439) yine üretildi. Yani derleyici, CSS'inizde başvurduğunuz tema değişkenlerini de fark ediyor.

.uyari {
  color: var(--color-marka);
  border-color: var(--color-sky-500);
}

Bu yöntem, Tailwind sınıflarıyla ifade etmesi zor bir bileşen stilini (örneğin bir üçüncü taraf kütüphanenin ürettiği HTML) markanızın renkleriyle uyumlu tutmak için kullanışlıdır. Kendi CSS'inizi hangi katmana yazmanız gerektiği katmanlar yazısında anlatılıyor. Saydam bir tema rengi gerektiğinde --alpha() fonksiyonunu kullanabilirsiniz; ayrıntısı opaklık yazısında ve fonksiyonlar yazısında.

Ton seçerken pratik bir düzen

Belgeler size hangi tonu seçmeniz gerektiğini söylemez; bu bir tasarım kararıdır. Yine de palet yapısından yola çıkarak kendinize bir düzen kurabilirsiniz. Örneğin açık temada zemin için 50 veya 100, kenarlık için 200 veya 300, ikincil metin için 500 veya 600, ana metin için 800 ile 950 arası tonları ayırabilir, koyu temada bu sırayı ters çevirebilirsiniz. bg-red-600 hover:bg-red-700 çiftinde olduğu gibi "hover anında bir adım koyulaştır" kuralı da bileşen kodunu okunur kılar. Bu sayıların erişilebilirlik açısından yeterli kontrast verip vermediğini ise her zaman kendi renk çiftiniz için ayrıca ölçmeniz gerekir; ton numarası kontrast garantisi değildir.

Gri ailesi seçimi de tutarlılık açısından önemlidir. slate, gray, zinc, neutral ve stone birbirine çok yakın açıklık basamaklarına sahip ama farklı ton açılarında griler sunar. Tema dosyasında 500 tonlarına bakın: --color-gray-500 oklch(55.1% 0.027 264.364), --color-stone-500 oklch(55.3% 0.013 58.071), --color-neutral-500 ise oklch(55.6% 0 none) değerindedir. Açıklıklar neredeyse aynıdır; fark son sayıdaki ton açısında ve ortadaki kroma değerindedir. Neutral ailesinde kroma 0 olduğu için bu gri hiçbir renge yaslanmaz. Bir projede tek bir gri ailesine bağlı kalmak, kenarlıklar ve metinler arasında hafif renk kaymalarını önler. Kullanmadığınız aileleri initial ile kapatmak da ekip içinde yanlış griyi seçme ihtimalini azaltır.

Sık yapılan hatalar

• Var olmayan ton: bg-blue-450 veya bg-red-1000 yazmak. Palette yalnızca 50, 100 ile 900 arası yüzlükler ve 950 vardır; diğerleri sessizce yok sayılır.
• Sınıf adını birleştirerek üretmek: "bg-" + renk + "-500" gibi bir ifadeyle sınıf oluşturmak. Derleyici kaynak dosyalarda tam sınıf adını arar; parça parça yazılan ad bulunamaz. Ayrıntı sınıf tarama yazısında.
• Kapatılan paleti kullanmak: --color-*: initial sonrası bg-white veya text-black beklemek. Bunları da yeniden tanımlamanız gerekir.
• Ad alanını yanlış yazmak: --colour-marka ya da --brand-color gibi bir ad, renk sınıfı üretmez; ad mutlaka --color- ile başlamalıdır.
• Eski saydamlık sınıfları: bg-opacity-50 v4.3.5 ile bilinmeyen bir sınıftır; yerine bg-black/50 gibi modifier yazılır.

Sık Sorulan Sorular

Tailwind'de kaç renk var?

v4.3.5 tema dosyasında 26 renk ailesi, her birinde 11 ton ve ayrıca siyah ile beyaz olmak üzere 288 renk değişkeni tanımlı. Resmî renk sayfası da aynı 26 aileyi listeliyor.

Renkler neden hex değil de oklch?

Varsayılan palet resmî sayfada oklch biçiminde verilir ve CLI çıktısı da bu değerleri yazar. Kendi renklerinizi tanımlarken hex dahil istediğiniz CSS renk biçimini kullanabilirsiniz; örnekte #3b0764 olduğu gibi çıktıya geçti.

Kendi rengime ton ölçeği nasıl eklerim?

Her tonu ayrı bir değişken olarak tanımlarsınız: --color-marka-50, --color-marka-500, --color-marka-900 gibi. Tailwind tonları sizin yerinize hesaplamaz; yalnızca tanımladığınız adları sınıfa dönüştürür.

Kullanmadığım renkler CSS dosyasını büyütür mü?

Hayır. Derlemelerimizde tema bölümüne yalnızca kullanılan sınıfların ve CSS içinde başvurulan değişkenlerin renkleri girdi. Bu davranışın genel mantığı utility class mantığı yazısında anlatılıyor.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind öğrenme rehberi · Renk opaklığı · Dark mode · @theme direktifi · Gradyanlar · CSS renk değerleri