Renk Tonu Jeneratörü Ayarlabilir adım sayısı ile herhangi bir rengin daha koyu tonlarını oluşturun.

🎨

Renk Tonu Jeneratörü

Ayarlabilir adım sayısı ile herhangi bir rengin daha koyu tonlarını oluşturun.

Temel Rengi Seç

Başlangıç noktası olarak herhangi bir rengi seçin.

Adım Sayısını Ayarla

Kaç adet ilerleyici daha koyu ton üreteceğinizi belirleyin.

Tonları Kopyala

Bireysel tonları veya tüm seti kopyalayın.

Loading tool...

What Is Renk Tonu Jeneratörü?

Bir renk tonu üreticisi, herhangi bir temel rengin sistemli olarak ışık değerini azaltarak progressif olarak daha koyu versiyonlarını oluşturur. Tonlar orijinal hue ve doygunluğu korurken siyaha doğru ilerler ve bu da tutarlı bir şekilde daha koyu varyantlar oluşturur. Bu, bir marka renginin birden fazla yoğunluğuna ihtiyacınız olan tasarım sistemleri için önemlidir - primerye düğmeler için orijinalden metin, sınırlar ve hover durumları için derin versiyonlara kadar. RGB'de (ki bu algılanan hue'yi değiştirebilir) simplemente siyah eklemekten farklı olarak, HSL tabanlı yaklaşım tüm ton aralığında renk kimliğini korur. Ayarlabilir adım sayısı size basit bir üç-ton setinden kapsamlı bir on beş adımlık ölçeğe kadar her şeyi oluşturma imkanı tanır.

Why Use Renk Tonu Jeneratörü?

HSL tabanlı koyulaştırma, tüm tonlarda renk tutarlılığını korur
Ayarlabilir adım sayısı (3 ila 15) her kullanım durumu için
Her ton, referans olarak lightness yüzdesini gösterir
Tasarım sistemi renk ölçekleri oluşturmak için idealdir
Bireysel tonlar veya tam set için tek tıkla kopyalama

Common Use Cases

Tasarım Tokenları

Tasarım sistemleri için numaralı ton ölçekleri (600, 700, 800, 900) oluşturun.

Hover Durumları

Temel rengin tutarlı olduğu daha koyu buton hover durumları oluşturun.

Metin Renkleri

Başlık ve metin için marka renklerinin daha koyu tonlarını bulun.

Sınır ve Gölgeler

Sınır, kontur ve gölge renkleri için daha koyu varyantlar alın.

Technical Guide

Ton üreticisi temel rengi HSL'ye dönüştürür ve N tonlarını temel değerden neredeyse sıfıra kadar ışık değerini azaltarak oluşturur. Her bir ton için formül: L = baseLightness × (1 - i/(N-1)), burada i 0'dan N-1'e gider. Bu, orijinal renkten几乎 siyaha kadar eşit bir dağılım oluşturur. Hue ve doygunluk sabit kalır, bu da tüm tonların farklı koyuluk seviyelerinde algılanan aynı renk olduğunu garantiler. Renk teorisi açısından, bir ton özellikle siyah ile karıştırılmış bir renktir, bu da beyazla karıştırılan bir ton (tint) veya griyle karıştırılan bir ton (tone) ile zıttır. HSL yaklaşımı, tüm üç kanalı orantılı olarak ayarlayarak gerektireceği RGB koyulaştırmaya kıyasla daha algılanabilir şekilde üniformdur.

Tips & Best Practices

1
Standart bir tasarım sistemi ölçeği oluşturmak için 9 adımı kullanın (100-900)
2
En koyu ton, açık arka planlarda metin için iyi çalışır
3
Tam bir renk ölçeği için ton ve tint jeneratörlerini birleştirin
4
Sıcak renklerin (kırmızılar, turuncular) daha koyu tonları mükemmel koyu arka planlar oluşturur
5
Amacınız olan arka plana karşı yeterli kontrastı sağlamak için koyu tonları test edin

Related Tools

Renk Seçici

HEX, RGB, HSL ve CMYK çıktıları ile etkileşimli renk seçici.

🎨 Color Tools

Tek Tonlu Palet Oluşturucu

Herhangi bir temel rengiden tek tonlu bir renk paleti oluşturun.

🎨 Color Tools

Renk Tonu Jeneratörü

Ayarlabilir adım sayısı ile herhangi bir rengin daha açık tonlarını üretin.

🎨 Color Tools

Renk Karıştırıcı

Ayarlabilir oran ile iki rengi birleştirin ve tam gradientı görün.

🎨 Color Tools

Contrast Oranı Kontrolü

Ön plan ve arka plan renkleri arasındaki WCAG kontrast oranlarını kontrol edin.

🎨 Color Tools

Frequently Asked Questions

Q Ton ve tint arasındaki fark nedir?

Bir ton, siyah eklenerek (lightness azaltarak) koyulaştırılmış bir renktir. Bir tint, beyaz eklenerek (lightness artırarak) açılan bir renktir. Bir ton ise gri eklenerek (doygunluğu azaltarak) köreltilmiş bir renktir.

Q Neden RGB'de koyulaştırmayı kullanmıyorsunuz?

RGB koyulaştırması (tüm kanalları azaltma) algılanan rengi değiştirebilir. HSL tabanlı koyulaştırma, rengin tutarlılığını korur ve tüm tonların aynı renk gibi görünmesini sağlar.

Q Kaç adım kullanmalıyım?

Tasarım sistemleri için 9-10 adım (Tailwind CSS ölçekleri gibi). Basit ihtiyaçlar için, temel, daha koyu ve en koyu varyantları kapsayan 3-5 adım.

About This Tool

Renk Tonu Jeneratö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.