Renkleri CSS Değişkenlerine Dönüştürme Aracı Bir dizi rengi CSS özel özelliklerine (değişkenlere) dönüştürün.
Renkleri CSS Değişkenlerine Dönüştür
Bir dizi rengi CSS özel özelliklerine (değişkenlere) dönüştürün.
Renkleri Ekle
Özel değişken adları kullanarak renk seçicileriyle renkler ekleyin.
Biçim Seçin
Çıkış formatını seçin: HEX, RGB veya HSL.
CSS'yi Kopyalayın
Oluşturulan :root CSS özel özelliklerini kopyalayın.
What Is Renkleri CSS Değişkenlerine Dönüştür?
Renkten CSS Değişkenlerine dönüştürücü, adlandırılmış renk koleksiyonunu stillerinizde yapıştırmanıza hazır CSS özel özelliklerine (:root değişkenleri) dönüştürür. İstediğiniz sayıda rengi ekleyebilir, her birine anlamlı bir değişken adı verebilir (örneğin "primary", "secondary", "accent") ve çıktı formatını seçebilirsiniz: Basitlik için HEX, rgba() esnekliği için virgülle ayrılmış RGB veya kolay çalışma zamanı manipülasyonu için virgülle ayrılmış HSL. CSS özel özellikleri modern temalar sisteminin temelidir ve karanlık modu, marka temasını ve dinamik renk güncellemelerini sağlar. Bu araç, hızlı bir şekilde renk sistemi kurmanıza olanak tanıyan boilerplate :root { --değişken: değer; } bloğunu oluşturur. Canlı önizleme, tüm renklerinizi birlikte bir palet şeridi olarak gösterir.
Why Use Renkleri CSS Değişkenlerine Dönüştür?
Common Use Cases
CSS Tema Oluşturma
Aydın/karanlık moda uygun tema oluşturmak için CSS özel özelliklerini ayarlayın.
Tasarım Tokenları
Tasarım sistemi tokenlarını CSS değişkenlerine dönüştürün.
Marka Renkleri
Marka renkleri için yeniden kullanılabilir bir CSS değişken kümesi oluşturun.
Bileşen Kütüphaneleri
CSS bileşen kütüphaneleri için özelleştirilebilir renk değişkenlerini tanımlayın.
Technical Guide
CSS özel özellikleri (var(--ad)) global kapsam için :root seçici içinde tanımlanır. HEX formatı tam renk değerini depolar: --primary: #3B82F6. Virgülle ayrılmış RGB formatı kanalları depolar: --primary: 59, 130, 246, bu da rgb(var(--primary)) veya rgba(var(--primary), 0.5) olarak esnek opaklık için kullanılabilir. HSL formatı depolar: --primary: 217, 91%, 60%, hsl(var(--primary)) olarak kullanılabilir. RGB ve HSL biçimleri daha esnektir çünkü bunlar, değişkeni yeniden tanımlamadan kullanım noktasında opaklık eklemeye izin verir. CSS özel özellikleri tüm alt öğeler tarafından miras alınır ve tema geçişi için medya sorgularında veya sınıf seçicilerinde geçersiz kılınabilir. Tüm modern tarayıcılarda desteklenir ve normal CSS özelliklerine benzer bir şekilde aktarırlar.
Tips & Best Practices
-
1Esneklik için --primary, --secondary gibi anlamlı adlar yerine --blue, --red kullanın
-
2RGB formatı en esnektir: rgba(var(--primary), 0.5) saydamlık kontrolü sağlar
-
3HSL formatı renk varyasyonlarını türetilmesine olanak tanır: hsl(var(--primary-h), var(--primary-s), 90%)
-
4Karanlık moda geçmek için değişkenleri medya sorgularında geçersiz kılın: @media (prefers-color-scheme: dark) { :root { ... } }
-
5Değişken sayınızı yönetilebilir tutun - çoğu sistem 5-10 renk değişkenine ihtiyaç duyar
Related Tools
HEX'ten RGB'ye Dönüştürücü
HEX renk kodlarını anında RGB değerlerine dönüştürün ve canlı önizleme swatch'i ile birlikte kullanın.
🎨 Color Tools
HEX'ten HSL'ye Dönüştürücü
HEX renk kodlarını HSL (Ton, Doymuşluk, Parlaklık) değerlerine dönüştürün.
🎨 Color Tools
Renk Seçici
HEX, RGB, HSL ve CMYK çıktıları ile etkileşimli renk seçici.
🎨 Color Tools
Tailwind Renk Bulucu
Herhangi bir HEX koduna en yakın Tailwind CSS renk sınıfını bulun.
🎨 Color Tools
CSS Filtre Oluşturucu
Görsel kontroller ile bulanıklaştırma, parlaklık, kontrast ve daha fazlası gibi CSS filtre efektlerini uygulayın.
🎨 CSS & DesignFrequently Asked Questions
Q Hangi formatı seçmeliyim?
Q CSS özel özelliklerinin her yerde desteği var mı?
Q Karanlık moda için değişkenleri kullanabilir miyim?
About This Tool
Renkleri CSS Değişkenlerine Dönüştür is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.