Softonic

Renk Tonu Jeneratörü

Adım 1 / 2
Sonraki

Bir ton, bir renk ile beyazın karıştırılması sonucu elde edilen bir renktir ve her aşamada renk daha açık hâle gelir. Jeneratör, temel renkinizi alarak kademeli olarak daha açık tonlardan oluşan bir ton dizisi üretir; bu da tasarım sistemlerindeki palet aralıkları (100 → 400), ince arka plan doldurma efektleri, koyu başlangıç renkler üzerindeki hover durumları ve vurgu renkinin varlığı gereken ancak hafif görünmesi beklenen nişan veya uyarı arka planları için uygundur.

Tintler nasıl oluşturulur?

  1. 1

    Temel renk seçin

    Temel rengi seçmek için renk seçiciyi kullanın. Orta parlaklık seviyesindeki temel renklerle en iyi sonuç verir; neredeyse beyaz temel renklerin aydınlatılması için çok az alan vardır.

  2. 2

    Adım sayısını seçin

    3 ile 20 arasında, varsayılan 10. 10 adım tam bir tasarım sistemi ölçeği verir; hızlı arayüz işleri için daha az adım yeterlidir.

  3. 3

    Artan yüzde oranlarda beyazla karıştırın

    10 adımda ilk ton yaklaşık %9, son ton ise yaklaşık %91 beyaz karıştırır. Enterpolasyon doğrudan RGB uzayında yapıldığından, parlaklık arttıkça doygunluk azalır.

  4. 4

    HEX değerlerini okuyun

    Her renk örneği kendi HEX değerini gösterir. Bu değerleri CSS değişkenlerinizde, Tailwind ölçeğinizde veya Sass haritanızda kullanın.

#3B82F6’dan örnek renk ölçeği

Aşağıdaki tablo, aracın varsayılan 10 adımda ürettiği sonucu gösterir:

Adım Hex Beyaz Tipik Rol
0 #3B82F6 Temel Ana marka (mavi-500)
1 #4C8DF6 %9,1 Koyu arka plan üzerinde açık hover
2 #5E98F7 %18,2 mavi-400 eşdeğer
3 #70A4F8 %27,3
4 #82AFF9 %36,4 mavi-300
5 #94BAFA %45,5
6 #A5C6FA %54,5
7 #B7D1FB %63,6
8 #C9DCFC %72,7 İnce arka plan (mavi-100/200)
9 #DBE8FD %81,8
10 #EDF3FE %90,9 mavi-50

Renk + ton = tasarım sistemi ölçeği

Bir temel üzerine açık tonlar ve koyu tonlar kombinleyerek tam bir ölçek oluşturun:

  • 50, 100, 200, 300, 400: tonlar (temelden en açıktan hafifçe daha açıkta kadar)
  • 500: Temel
  • 600, 700, 800, 900: tonlar (temelden en koyuya doğru hafifçe koyulaşanlar)

Bu, Tailwind, Material, Open Color, Radix UI ve en popüler tasarım sistemlerine uyumludur. 10-11 adımlık ölçekler standarttır.

Açık tonların arayüzde parladığı yerler

  • Uyarı ve etiket arka planları: Error-50 arka planında yer alan error-500 metni, görsel bir uyarı olmadan anında tanınmayı sağlar.
  • Koyu arka planlardaki hover durumları: koyu bir yüzeydeki düğmeler, üzerine fare geçildiğinde daha açık bir tona doğru ayarlanır.
  • Veri görselleştirme için sıralı ölçekler: Değer ile renk arasındaki eşleştirmede yüksek değerler doygun renklere sahipken düşük değerler beyaza doğru soluklaşır.
  • Avatar/grafik kategorisi yer tutucuları: Herhangi bir görüntü veya veri yokken ana renk tonu.
  • Yüzey katmanları: Kart arka yüzü, marka rengiyle hafifçe boyanmış olup nazik bir marka varlığı yaratır.

En açık tonlar neden doygunluk kaybeder?

Jeneratör doğrudan RGB uzayında karıştırır. Beyaz eklendikçe doygunluk, algılanan parlaklıktan daha hızlı düşer; bu yüzden üst adımlar soluk veya gri görünür. Bu, RGB karıştırmanın normal davranışıdır:

  • RGB karıştırma (bu araç): basit ve öngörülebilir. Doygunluk düzenli olarak azalır; çok açık adımlar doygunluğunu yitirmiş görünür.
  • OKLCH veya LAB enterpolasyonu: aydınlatma sırasında kromayı daha dengeli tutmak için tasarım yazılımları tarafından kullanılır. Bu jeneratör bu modelleri sunmaz; renk tonu sabit kalan tonlar gerekiyorsa, bunları OKLCH destekleyen bir tasarım aracında üretin.
  • HSL’de aydınlatma: beyaz karıştırmadan parlaklığı artırır; sonuç boya gibi değil pastel görünebilir.

Kullanılabilir arayüz için açık ton alt sınırı

Çok hafif tonlar (8. adım ve üzeri), saf beyaza yaklaşır ve beyaz bir arka plan üzerinde görsel olarak ayırt edilemez hâle gelir. Aşağıdaki amaçlar için kullanışlıdır:

  • Metnin arkasındaki ince seçim vurguları.
  • Yoğun tablolarda neredeyse görünmez satır şeritleri.

Ancak kullanıcıların belirgin bir renge ihtiyaç duyduğu düğmeler veya etiketler için uygun değildir. Hafif tonları, bunları daha belirgin hale getirmek için koyu renkli unsurlar (sınır, metin) ile birleştirin.

Sık Sorulan Sorular

Jeneratör doğrudan RGB’de karıştırır ve RGB enterpolasyonu parlaklık arttıkça doygunluğu düşürür, bu yüzden üst adımlar beyaza kayar. OKLCH veya LAB enterpolasyonu ise temel rengin görünür bir izini korur; bu önemliyse OKLCH destekleyen bir tasarım aracı kullanın.

Benzer ancak tam olarak aynı değildir. Beyazla karıştırıldığında doygunluk ve açıklık oransal olarak azalır; HSL açıklık ayarlaması ise L değerini bağımsız olarak artırır. Tonlar daha doğal (boya benzeri) görünür; HSL açıklık ayarlaması ise gerçekçi olmayan pastel tonlarına doğru yönlendirilebilir.

Evet, karanlık mod genellikle farklı bir “aydınlık ölçeği” gerektirir çünkü arka planlar zaten koyu renkte olur. Birçok sistem bu ölçeği tersine çevirir (karanlık modun 50 değeri, açık modun 900 değerine karşılık gelen beyaz-koyu tonu ifade eder).

Aynı temelden 5 aşamalı bir ton basamakları (50–500) ve 5 aşamalı bir renk tonu basamakları (500–900) oluşturun. Bu iki ölçeği birleştirerek tam bir 10-11 aşamalı tasarım ölçeği elde edin.

İlgili Araçlar

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

JSON Biçimlendirici

JSON metnini 2 veya 4 boşlukla okunabilir hale getirmek, kompakt çıktıya küçültmek ya da sonucu kopyalamadan önce söz dizimini hızlıca kontrol etmek için yapıştırın.

Renk Paleti Jeneratörü

Temel bir HEX renginden monokromatik, analog, tamamlayıcı, triadik veya tetradik paletler oluşturun ve kopyalamaya hazır CSS değişkenleri alın.

İkiliden Sekizliye Dönüştürücü

Bitleri üçer üçer gruplayarak ikiliyi sekizliye dönüştürün. Unix izinleri, eski sistemler ve kompakt sayısal gösterim için yararlıdır.

HAR Dosyası Görüntüleyici

HAR ağ kayıtlarını yerel olarak açın, istekleri filtreleyin, maskeli üstbilgileri ve zamanlama aşamalarını inceleyip temizlenmiş özetleri yüklemeden dışa aktarın.