Go Toolstack

Tailwind CSS Renk Paleti Oluşturucu

Herhangi bir ana renkten 50-950 arası uyumlu Tailwind CSS renk tonları ve yapılandırma nesnesi üretin.

Tailwind CSS Renk Paleti Oluşturucu

Herhangi bir ana renkten 50-950 arası uyumlu Tailwind CSS renk tonları ve yapılandırma nesnesi üretin.

Nasıl Çalışır?

1
Kriterleri ve Seçenekleri Belirleyin
Oluşturmak istediğiniz veri için uzunluk, tür veya seçenekleri belirleyin.
2
Anında Üretin
Üret butonuna tıklayarak istemci tarafında güvenli ve özel çıktıyı oluşturun.
3
Kopyalayın veya İndirin
Üretilen veriyi veya kodu panonuza kopyalayın ya da dosya olarak kaydedin.

Bu kategorideki diğer istemci taraflı araçları keşfedin

Görseller & Tasarım Araçları Merkezi • İş Akışları ve Karşılaştırma

Tüm görseller & tasarım araçlarını, teknik sınırları ve araç seçim rehberini inceleyin.

Merkezi İncele →
JSON Formatlayıcı, Doğrulayıcı & Güzelleştirici

JSON verilerini biçimlendirin, sıkıştırın; 64-bit hassasiyet ve JSON Schema (Draft-07 / 2020-12) kurallarıyla doğrulayın.
Base64 Kodlayıcı & Çözücü (Encode / Decode)

Metin ve dosyaları Base64 formatına güvenle dönüştürün veya orijinal içeriğe geri çözün.
SQL Biçimlendirici, Sıkıştırıcı & Girintileyici

SQL sorgularını tarayıcıda düzenleyin, anahtar kelimeleri büyük harfe çevirin ve biçimlendirin.

İlgili Uygulama Rehberleri

Bu araçla ilgili adım adım teknik ipuçları ve en iyi pratikler

Kavram ve Bilgi Merkezi

Tailwind CSS Renk Paleti Oluşturucu, 50-950 Ton Ölçeği ve Yapılandırma Dışa Aktarımı

Modern web tasarımında Tailwind CSS, önceden tanımlanmış fonksiyonel stil sınıflarıyla geliştirme hızını devrim niteliğinde artıran en popüler CSS kütüphanesidir. Ancak bir markanın kurumsal ana rengini (brand color) Tailwind'in 50'den 950'ye uzanan 11 basamaklı dengeli ton skalasına (shades) uyarlamak; profesyonel renk teorisi ve algısal kontrast hesaplamaları gerektirir. Bu araç, tek bir temel renk kodundan (HEX, RGB veya HSL) tam uyumlu bir Tailwind renk ailesi sentezler.

Örneğin bir fintech girişimi için #0EA5E9 kurumsal mavi tonunu ele alalım. Araç bu rengi 500 basamağına çıpalayarak en açık arka plan tonu olan 50'den (neredeyse beyaz, çok hafif renkli) en koyu metin ve kenarlık tonu olan 950'ye kadar matematiksel olarak pürüzsüz bir ışık ve doygunluk skalası oluşturur. Kullanıcı önizleme kutucuklarında metin kontrastlarını denetler ve doğrudan tailwind.config.js dosyasına yapıştırılmaya hazır JSON yapılandırma kodunu tek tıkla kopyalar.

Renk armonisi hesaplamaları ve ton üretimi tamamen tarayıcınız bünyesinde matematiksel olarak çalıştırılır. Marka renk paletleriniz veya kurumsal tasarım parametreleriniz hiçbir harici sunucuya iletilmez.

Temel Mimari ve Matematiksel Formüller

Temel Renk → HSL/OKLCH Uzayına Dönüşüm → Algısal Parlaklık Eğrisi (50-950) → HEX Ton Skalası

Referans renk algısal olarak homojen renk uzayına taşınır; 50 (en açık) ile 950 (en koyu) arasındaki 11 basamak için parlaklık ve doygunluk eğrileri hesaplanır.

En İyi Uygulamalar ve Temel Yönergeler

  • 500 Tonunu Markanızın Ana Rengi Olarak Sabitleyin: Tailwind ekosisteminde butonlar ve temel vurgular genellikle 500 veya 600 tonuyla temsil edilir; ana renginizi bu basamağa hizalayın.
  • Koyu ve Açık Mod İçin Zıt Kutupları Eşleştirin: Açık modda arka plan için 50/100, metin için 900/950 kullanırken; karanlık modda bu hiyerarşiyi tam tersine çevirerek tutarlılık sağlayın.
  • tailwind.config.js Dosyasında extend Nesnesi Altına Ekleyin: Tailwind'in varsayılan renklerini kaybetmemek için yeni paletinizi theme.colors yerine theme.extend.colors bloğuna tanımlayın.
  • Metin Okunabilirliğini WCAG Kontrastıyla Denetleyin: Oluşturulan renk tonlarının beyaz veya siyah metinlerle yeterli kontrastı sağladığını araç üzerindeki önizlemeden kontrol edin.

Sıkça Sorulan Sorular (SSS)

Oluşturulan renk paleti tailwind.config.js dosyasına nasıl eklenir?
Kopyaladığınız renk nesnesini yapılandırma dosyanızın 'module.exports = { theme: { extend: { colors: { marka: { ... } } } } }' bölümüne yapıştırmanız yeterlidir.
Oluşturulan renkler Tailwind sınıflarında nasıl kullanılır?
Paletinize 'marka' adını verdiyseniz; bg-marka-500, text-marka-900 veya border-marka-200 gibi tüm standart Tailwind sınıflarında anında kullanabilirsiniz.
50-950 ton basamakları neleri temsil eder?
50 en açık (neredeyse beyazımsı pastel), 100-300 açık zeminler, 500 temel marka rengi, 600-800 vurgular ve 900-950 ise en koyu kontrast tonları ifade eder.
Farklı renk formatları (HEX, RGB, HSL) girilebilir mi?
Evet. İster #3B82F6 gibi HEX, ister rgb(59, 130, 246) gibi RGB, isterseniz HSL değerleri girerek anında tam palet üretebilirsiniz.