Tailwind Renk Oluşturucu
1 Hex koddan Tailwind CSS 50–950 arası 11 tonlamalı paletini ve yapılandırma kodunu oluşturun
Özellikler
1 Renkten 11 Tonlamayı Otomatik Oluştur
Girilen rengi 500 olarak ayarla, 50–950 tonlamasını hesapla
v3 ve v4 Her İki Biçime Uyumlu
config ve @theme yazım şeklini sekmeler arasında değiştir
Tonlama Başına Hex Kopyala
Renk örneği düğmeleriyle renk kodlarını tek tek kopyala
Giriş Sırasında Palet Güncelle
Çalıştır düğmesine gerek yok, renk deneyin ve karşılaştırın
Nasıl Kullanılır
Temel Rengin Hex Kodunu Girin
Hex kodu girin veya soldaki renk örneğini tıklayarak renk seçiciyle seçin
Gerekirse Renk Adını Girin
Kod içinde kullanılacak renk adını küçük harfle girin. Boş bırakılırsa primary kullanılır
11 Tonlamalı Renk Örneklerini Doğrula
50–950 arası renk örnekleri ve Hex kodlarını doğrula, örnek kopyala düğmeleriyle tek tek kopyala
Çıktı Biçimini Seçip Kopyala
v3 veya v4 seçin, tailwind.config.js veya CSS dosyasına yapıştırmak için "Kodu Kopyala"yı tıklayın
Kullanım Senaryoları
Marka Renginin Tonlamalarını Oluştur
Düğme hover durumu ve arka planı için tonlamaları marka renginden bir renkle eşleştir
Standart Palete Olmayan Renk Ekle
Tailwind standart renginde olmayan projeye özgü rengi 11 tonlamayla yapılandırma dosyasına ekle
v4 @theme Yapılandırmasını Oluştur
Sitenin ana renginden Tailwind v4 CSS değişkenlerini toplu olarak yazıyla yazıl
Tasarım Şablonun Uygulanması Hazırlığı
Şablonun belirtilen renginden uygulama için 11 tonlamalı kodu hazırla, tasarım aracına da aktar
Temel Bilgiler
Tailwind 50–950 Ne Anlama Gelir
Tailwind CSS renkleri 50'nin en açık, 950'nin en koyu olduğu 11 aşamalı sayılarla parlaklığı temsil eder, 500 ise bu rengin temelini oluşturur. Sayılar "bg-primary-500" veya "text-primary-700" gibi sınıf adlarının sonuna eklenerek kullanılır.
- 50–300 Aşaması：50–300 aşaması, arka plan renkleri veya açık dolgularda sıkça kullanılan açık renklerdir, üzerine koyu metin yerleştirilse de okunur.
- 600–950 Aşaması：600–950 aşaması, düğme hover durumlarında veya başlık metin renginde sıkça kullanılan koyu renklerdir, beyaz arka plan üzerinde net görülür.
v3 ve v4 Renk Tanımlama Yönteminin Farkları
Tailwind CSS v3'te renkler tailwind.config.js dosyasında JavaScript'te tanımlanır, v4'te CSS dosyasında @theme içinde CSS değişkenleri olarak tanımlanır. Her iki yazım şeklinde de tanımlanan renkler "bg-primary-500" gibi aynı sınıf adıyla kullanılır.
- v3 Yazım Şekli：v3 yazım şekli, theme.extend.colors içinde "primary: { 500: '#3B82F6' }" biçiminde renk adı ve aşamayı iç içe geçmiş biçimde yazılan formdur.
- v4 Yazım Şekli：v4 yazım şekli, @theme içinde "--color-primary-500: #3B82F6;" biçiminde renk adı ve aşamayı tirelerle bağlanan değişken adıyla yazılan formdur.
Güvenlik ve Gizlilik
Tarayıcıda tamamlanır
Girilen veriler yalnızca tarayıcınızda işlenir ve dışarıya gönderilmez.
Yalnızca tarayıcı içinde işlenir
Palet hesaplaması ve kod oluşturma tamamen tarayıcınızda gerçekleştirilir, giriş verileri sunucuya gönderilmez.
İletişim HTTPS ile şifrelenir
Sayfa yüklemesi de TLS ile şifrelenir, üçüncü taraflar içeriği göremez.
Üçüncü taraflara gönderilmez
Giriş içeriği reklam ağları veya izleyiciler gibi harici hizmetlere gönderilmez.
Sonuçlar otomatik olarak kaydedilmez
Girilen renk ve renk adı veya giriş önerileri sunucuda saklanmaz.
Google Arama'da RAKKOTOOLS'u Takip Edin
186 kullanışlı araç, Google Arama ve AI Arama'dan daha kolay bulunabilir hale gelir!
- Aramada bulunur
- AI Arama'da da görüntülenir
- Yeni araçları keşfet
Güncelleme bilgisi
- update #318
Tailwind renk üreteci eklendi, 1 renkten 11 tonluk renk paleti ve yapılandırma kodu oluştur