Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
Bu araç hakkında
Renk Paleti Çıkarıcı, Tailwind CSS, Material Design ve benzeri frameworklerin kullandığı 50–900 gölge sözleşmelerine uygun olarak herhangi bir temel renkten 10 adımlı bir tasarım sistemi ölçeği oluşturur.
Oluşturulan ölçekteki her palet örneği hex, RGB ve HSL değerlerini gösterir. Her örnekteki metin rengi, luminansa göre otomatik olarak beyaz veya koyu renge ayarlanır.
Nasıl kullanılır
- Renk seçiciyi kullanarak veya hex değeri yazarak bir temel renk seçin.
- 10 adımlı ölçek (50–900) anında oluşturulur; tüm parlaklık aralığını kapsar.
- Tasarım sisteminizde veya CSS değişkenlerinizde hex, RGB veya HSL değerlerini kullanın.
Kullanım senaryoları
Tasarım sistemi ekipleri Tailwind yapılandırma uzantıları veya CSS özel özellikleri olarak kullanmak için tam renk ölçekleri oluşturur. Frontend geliştiriciler erişilebilir UI bileşenleri oluşturur.
Sık sorulan sorular
- Bu ölçek diğer araçlardaki "tonlardan" nasıl farklı? — Bu araç, yaygın tasarım sistemi kurallarına uygun olarak belirli parlaklık değerlerine dayanan sabit 10 adımlı bir ölçek (50, 100, 200, … 900) oluşturur.
- Doygunluğu değiştirmek ölçeği etkiler mi? — Temel renginizin doygunluğu tüm adımlarda korunur — yalnızca parlaklık değişir.
- Bu renkleri doğrudan Tailwind CSS'te kullanabilir miyim? — Evet. Her gölge seviyesinden hex değerlerini kopyalayın ve gölge numaralarını anahtar olarak kullanarak tailwind.config.js'de theme.extend.colors'a ekleyin.