Renk Tonu Üretici

Bu araç ne işe yarar?

Renk Tonu Üretici, seçtiğiniz tek bir temel renkten otomatik olarak açık tonlar (tint) ve koyu tonlar (shade) üretir. Renk paleti oluşturan tasarımcılar, hover ve disabled durumları için varyasyon arayan geliştiriciler ve marka renklerini ölçeklemek isteyen herkes için idealdir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Nasıl çalışır

Renk seçiciden veya hex kutusundan bir temel renk girin (örn. #3b82f6) ve kaydırma çubuğuyla 3 ile 15 arasında adım sayısını ayarlayın. Araç temel rengi beyaza doğru karıştırarak açık tonları, siyaha doğru karıştırarak koyu tonları hesaplar. Her ton ekranda bir kare olarak gösterilir; üzerine tıkladığınızda hex kodu panoya kopyalanır. Böylece bir butonun normal, hover ve aktif renklerini saniyeler içinde elde edersiniz.

Pratik kullanım örnekleri

Tailwind benzeri 50-900 renk ölçekleri oluşturmak için 9-10 adım seçin. Bir uyarı kutusunun arka planı için temel rengin açık tonunu, metni için koyu tonunu kullanarak yeterli kontrast sağlayın. Tasarım sistemlerinde marka renginin tutarlı varyasyonlarını belgelemek, gölge ve kenarlık renkleri türetmek ya da bir grafiğin veri serilerini aynı renk ailesinden renklendirmek için de pratiktir.

Sıkça sorulan sorular

Tint ile shade arasındaki fark nedir?

Tint, temel rengin beyazla karıştırılmış daha açık halidir; shade ise siyahla karıştırılmış daha koyu halidir. Bu araç ikisini de aynı anda ayrı satırlarda üretir.

Kaç ton üretebilirim?

Her yön için 3 ile 15 arasında ton seçebilirsiniz. Adım sayısını artırdıkça tonlar arasındaki geçiş daha yumuşak olur.

Hangi renk formatını girebilirim?

6 haneli hex kodu (örn. #3b82f6) girin veya renk seçiciyi kullanın. Çıktılar da hex olarak kopyalanır.