AraçKutusu

Tailwind Renk Paleti Üretici

Bir ana renk (HEX) girin; Tailwind CSS'in 50–950 ton ölçeğine uygun tam bir renk paleti otomatik üretilsin. Tonları önizleyin, HEX kodlarını veya doğrudan tailwind.config uzantısını kopyalayın.

Bir tonu kopyalamak için üzerine tıklayın.

marka: {
  50: "#f4f1fd",
  100: "#e8e3fc",
  200: "#c9bdfa",
  300: "#a08bf9",
  400: "#6e4cfb",
  500: "#4214ff",
  600: "#3104e6",
  700: "#2a07bb",
  800: "#230891",
  900: "#1c086d",
  950: "#130746",
},

Tailwind Renk Paleti Üretici nedir, ne işe yarar?

Tailwind renk paleti üretici, seçtiğiniz tek bir ana renkten Tailwind CSS'in 50–950 ton ölçeğine uygun tam bir renk skalası oluşturur. Ana renginiz ölçekte 500 civarına oturur; açıktan koyuya tüm tonlar otomatik türetilir.

Tonları önizleyip HEX kodlarını tek tıkla kopyalayabilir ya da doğrudan tailwind.config uzantısını alıp projenize yapıştırabilirsiniz. Böylece marka renginizin tutarlı bir tonlar ailesini elde edersiniz.

Tailwind Renk Paleti Üretici nasıl yapılır?

  1. Bir ana renk seçin (HEX kodu girin veya renk seçiciyi kullanın).
  2. 50'den 950'ye kadar tüm tonlar otomatik üretilir.
  3. Tek bir tonun HEX'ini veya doğrudan tailwind.config uzantısını kopyalayın.

Nerelerde kullanılır?

  • Marka renginden tam bir Tailwind renk skalası üretmek
  • Açık/koyu tema için uyumlu tonlar elde etmek
  • Tasarım sisteminde tutarlı renk basamakları kurmak
  • Hazır config kodunu doğrudan projeye eklemek

İpuçları

  • Config kodunu theme.extend.colors altına yapıştırıp bg-marka-500 gibi kullanın.
  • Ana renk olarak ölçeğin ortasına denk gelen (ne çok açık ne çok koyu) bir ton seçin.
  • Sonuç yaklaşık bir üretim olduğundan kritik tonları gözle kontrol edin.

Neden ton ölçeği gerekir?

Bir arayüzde tek bir marka rengi yetmez. Aynı rengin açık tonuna zemin için, orta tonuna düğme için, koyu tonuna metin ve kenarlık için ihtiyaç duyarsınız. Bu tonların birbiriyle tutarlı olması, arayüzün bütünlüklü görünmesini sağlar.

Tonları göz kararı seçmek genellikle tutarsız bir dizi üretir: bazı adımlar birbirine çok yakın, bazıları arasında büyük sıçrama olur. Ölçeği matematiksel olarak türetmek bu sorunu ortadan kaldırır.

50'den 950'ye ne anlama gelir?

Yaygın kullanılan ölçekte 50 en açık, 950 en koyu tondur. 500 genellikle markanın ana rengidir. Bu numaralandırma keyfi değildir; her adım gözle algılanan açıklık farkına göre ayarlanır.

Pratikte 50 ve 100 zemin, 200 ve 300 kenarlık, 500 ve 600 düğme, 700 ve üzeri metin için kullanılır. Bu düzeni takip etmek, karar sayısını azaltır ve ekipler arasında ortak bir dil kurar.

Kontrastı ölçerek doğrulayın

Ton ölçeği güzel görünse de, hangi tonun hangi zeminde metin olarak kullanılabileceği ölçülmelidir. Normal metin için kontrast oranı en az 4,5'e 1 olmalıdır.

Genel kural olarak 600 ve üzeri tonlar açık zeminlerde, 100 ve altı tonlar koyu zeminlerde metin olarak güvenlidir. Aradaki tonlar duruma göre değişir. Palet tarayıcınızda üretilir; hiçbir veri gönderilmez.

Sık sorulan sorular

Tonlar nasıl üretiliyor?

Seçtiğiniz rengin renk tonu (hue) korunarak, Tailwind'in 50–950 ölçeğine uygun açıklık (lightness) değerlerine göre tonlar üretilir. Ana renginiz ölçekte 500 civarına oturur.

Çıktı Tailwind projeme nasıl eklenir?

'Tailwind config kopyala' ile aldığınız kodu tailwind.config.js dosyanızdaki theme.extend.colors altına yapıştırın; ardından bg-marka-500 gibi sınıfları kullanın.

Sonuç resmî Tailwind paletiyle birebir mi?

Hayır, matematiksel bir yaklaşımdır. Resmî paletler elle ince ayarlıdır; bu araç herhangi bir marka rengi için tutarlı ve kullanılabilir bir ölçek üretir.

İlgili araçlar