İçeriğe atla
%100 yerel

CSS renk değişkeni çıkarıcı

CSS'nizin her rengini çıkartın ve yeniden kullanılabilir custom özelliklerine dönüştürün.

Giriş
0
Çıkış

CSS renk değişkeni çıkarıcı

Stil sayfanızı yapıştırın ve bu araç her bildirimde hex, rgb()/rgba() veya hsl()/hsla() olarak yazılmış renk değerlerini tarar, ardından kuralları aynı değeri tekrarlamak yerine özel özelliklerin başvurularıyla yeniden yazar. Bu organik olarak büyüyen stil sayfalarını temizlemek için tasarlanmıştır — bir tasarımdan başlayarak, bileşen kitaplığı birleşimi veya tasarım aracından alınan CSS, aynı mavi tucatın biraz farklı şekillerde yazıldığı yer.

Adlandırma seçeneği, her değişkenin nasıl adlandırılacağını kontrol eder: ilk görünüş sırasına göre (--color-1, --color-2…), yaklaşık ton ve açıklık (--color-dark-blue, --color-light-gray) veya ilk görünüş CSS özelliğine göre (--color-background, --color-border). "Farklı yazılan eşit renkleri birleştir" seçeneğini etkinleştirin #ff0000, rgb(255, 0, 0) ve hsl(0, 100%, 50%) değerlerini kaynak metin farklı olsa bile tek bir değişkene katlamak için; özdeş değerler her zaman birleştirilir. Benzerlik kaydırıcısı daha da ileri gider ve yakından birbirine benzeyen ancak özdeş olmayan tonları birleştirir — palettinizin hiç kimsenin oluşturmayı amaçlamadığı yakın-kopyası gri tonları veya mavileri biriktirdiği durumlarda yararlıdır. Oluşturulan bloğun :root veya özel bir seçici altında olup olmayacağını seçin, değişkenlerin yazdırıldığı gösterimi seçin veya sadece denetime ihtiyacınız olduğunda yeniden yazmak yerine renk ve oluşum sayıları listesine geçin.

Tarayıcı yalnızca gerçek bildirim değerleri içinde görünür, bu nedenle #abcabc gibi bir kimlik seçiciyi hiçbir zaman bir renkle karıştırmaz ve yorumlar, tırnak içinde yazılan dizeler ve url() içeriğini tamamen dokunmadan bırakır. Hem Windows hem de Unix satır sonu işleri, ve araç iç içe işlevler tarafından satranç oynarmı, örneğin gradyan listesi içindeki bir renk.

Her şey tarayıcınızda yerel olarak çalışır — stil sayfanız hiçbir yere yüklenmez, bu nedenle özel bir projeden kod yapıştırmak güvenlidir. Sonucu kopyalayın, .txt dosyası olarak indirin veya başka bir geçişle hassaslaştırmak için çıktıyı girdiye geri gönderin.

FAQ

Hangi renk biçimlerini tanır?
Hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba() ve hsl()/hsla(), hem virgül hem de boşluk sözdizimi. "kırmızı" gibi adlandırılmış renkler eşleştirilmez.
Birleştirme için "aynı renk" olarak sayılan nedir?
Bayt-özdeş değerler her zaman birleştirilir. Eşdeğerlik seçeneğini etkinleştirmek, aynı renği farklı bir gösterimde birleştirir (hex vs rgb vs hsl). Benzerlik kaydırıcısı daha da ileri gider ve yalnızca yakın tonları birleştirir, kontrol ettiğiniz ortalama kanal farkıyla.
Yeni değişken adları nasıl seçilir?
İlk görünüş sırasına, yaklaşık ton ve açıklık adına veya ilk bulunan CSS özelliğine göre — seçiminiz. Çarpışma sayısal bir sonek alır.
Yorum, dize veya url() içindeki renklere dokunur mu?
Hayır. Yalnızca gerçek bildirim değerleri içindeki renkler eşleştirilir — yorumlardaki, alıntılı dizelerdeki ve url(...) içindeki metinler tamamen yazıldığı gibi kalır.
CSS'im bir yere yükleniyor mu?
Hayır. Çıkarma tamamen tarayıcınızda çalışır — stil sayfası hiçbir zaman cihazınızı terk etmez.