Tonlar ve Gölgeler
Tints and Shades Generator, herhangi bir temel rengin daha açık tonlarını (beyazla karıştırılmış) ve daha koyu tonlarını (siyahla karıştırılmış) 5, 10 veya 20 adımda, CSS değişkeni çıktısıyla oluşturur.
Bu araç hakkında
Tints and Shades Generator, herhangi bir temel rengin daha açık tonlarını (beyazla karıştırılmış) ve daha koyu tonlarını (siyahla karıştırılmış) 5, 10 veya 20 adımda, CSS değişkeni çıktısıyla oluşturur.
Nasıl kullanılır
- Bir temel renk seçin.
- 5, 10 veya 20 adım seçin.
- Hex değerini kopyalamak için herhangi bir renk örneğine tıklayın.
- Tüm skalayı dışa aktarmak için Copy as CSS Variables'a tıklayın.
Bilmekte fayda var
- Tint, beyazla karıştırılmış bir renktir; shade ise siyahla karıştırılmış bir renktir.
- Oluşturucu eşit RGB adımlarıyla karıştırır; böylece her adım rengi aynı miktarda değiştirir.
- Tailwind gibi tasarım sistemleri, her marka renginin açık ve koyu tonlarından oluşan 50–900 skalası kullanır.
- Bir skaladan alınan metin renklerinin kontrastını kontrol edin; orta adımlar beyaz üzerinde genellikle WCAG AA'yı geçemez.
Tamamen tarayıcınızda çalışır — girdiğiniz hiçbir şey yüklenmez veya saklanmaz.
Sık sorulan sorular
Tint ile shade arasındaki fark nedir?
Tint bir rengi beyaz ekleyerek açar; shade ise siyah ekleyerek koyulaştırır. Tone ise gri ekler.
Bir tasarım sistemi renginde kaç ton olmalı?
Yaklaşık 10 adım yaygındır; örneğin Tailwind'de 50, 100 … 900. Bu; arka planlar, kenarlıklar, metin ve hover durumları için yeterli aralık sağlar.
Skalayı CSS'te nasıl kullanırım?
Skalayı özel özellikler olarak kopyalayın ve örneğin arka planlarda, kenarlıklarda veya hover durumlarında var(--color-name) ile kullanın.
Bazı açık tonlar neden soluk görünüyor?
Beyazla karıştırmak açıklığı artırırken doygunluğu da düşürür. Daha canlı açık varyantlar için doygunluğu HSL'de ayrıca ayarlayın.