Softonic

Koyu Ton Üreteci

Adım 1 / 2
Sonuçlar

Koyu ton, bir rengin siyahla karıştırılmasıyla elde edilir; her kademede biraz daha koyulaşır. Üreteç bir HEX temel renk alır ve giderek koyulaşan 3–20 kademe (varsayılan 10) koyu ton oluşturur; ayrıca aynı temel rengin daha açık tonlarını da gösterir. Tasarım sistemi palet merdivenleri (500 → 900), düğmelerin basılı/etkin durumları, okunaklı kalan metin renkleri ve gölge katmanları için kullanışlıdır. Her kademe, kopyalamaya hazır hex değeriyle bir renk örneği olarak gösterilir.

Koyu ton üretimi nasıl çalışır

  1. 1

    Bir temel renk seçin

    Renk seçiciyi kullanın ya da adımlı modda sayfa URL’sinden bir hex değeri iletin. Temel renk, açık ton aralığı ile koyu ton aralığı arasında yer alır.

  2. 2

    Kademe sayısını seçin

    3–20 kademe, varsayılan 10. Daha çok kademe daha yumuşak bir merdiven verir; daha az kademe ise daha güçlü sıçramalar verir.

  3. 3

    Siyahla eşit kademelerde karıştırın

    Her kademe kırmızı, yeşil ve mavi kanalları aynı çarpanla ölçekler; bu, siyahla (açık tonlar için beyazla) eşit kademelerde karıştırmakla aynıdır. 10 kademede her biri yaklaşık %9 daha koyu ya da daha açık olur. Renk tonu temelle birebir aynı kalır.

  4. 4

    Ölçeği okuyun

    Her renk örneği kendi hex değerini gösterir. Metni seçerek CSS’e, bir Tailwind temasına veya design tokens dosyasına kopyalayın.

Koyu ton, açık ton ve kırık ton

  • Koyu ton (shade): renk + siyah → daha koyu.
  • Açık ton (tint): renk + beyaz → daha açık.
  • Kırık ton (tone): renk + gri → daha az doygun.

Bu üreteç, aynı temel renkten hem koyu hem de açık tonlar üretir. Açık ton ile koyu ton ikilisi genellikle bir tasarım sistemi paleti oluşturur (örneğin 500’ün temel olduğu brand-100’den brand-900’e kadar).

Örnek ölçek: #3B82F6 (Tailwind blue-500)

Kademe HEX Karışım Tasarım sistemindeki rol
0 #3B82F6 Temel Ana marka (örneğin blue-500)
1 #316CCD %17 siyah Üzerine gelme durumu
2 #2756A4 %33 siyah Basılı/etkin durum (blue-600)
3 #1D417B %50 siyah blue-700
4 #132B52 %67 siyah blue-800
5 #091528 %83 siyah blue-900

Tablo 5 kademeli bir ölçeği gösterir: her kademe siyaha giden yolun altıda birini kat eder.

Kademeler nasıl hesaplanır

Araç, temel rengin kırmızı, yeşil ve mavi kanallarını her kademede aynı çarpanla ölçekler. Bu, koyu ton aralığında siyahla, açık ton aralığında beyazla eşit kademelerde karıştırmaya eşdeğerdir. 10 kademede her biri bir öncekinden yaklaşık %9 daha koyu ya da daha açıktır.

Tüm kanallar eşit ölçeklendiği için temel rengin tonu aynen korunur: mavi bir temel mavi kalır, yeşil bir temel yeşil kalır. Siyahla karıştırmak doygunluğu da açıklıkla birlikte düşürür, böylece koyu kademeler parlayan değil doğal görünür. Doygunluğa dokunmadan yalnızca açıklığı düşürmek, koyu renkleri aşırı doygun bırakır.

Arayüzde koyu tonların kullanımı

  • Düğme: durağan durum için temel renk, üzerine gelme için 1–2 kademe koyu, etkin/basılı durum için 2–3 kademe koyu.
  • Gövde metni: beyaz üzerinde okunaklılık için temelden 2–3 kademe koyu; ikincil metin için daha açık.
  • Kenarlık/ayraç: arka plandan 1–2 kademe koyu; aşırıya kaçmadan ayrımı sağlayacak kadar.
  • Gölgeler: yeni bir gri yerine, alfası düşürülmüş en koyu kademe (veya daha koyusu).
  • Veri görselleştirme: ardışık bir ölçek (değer büyüklükleri) için tek bir renk tonunun koyu tonlarını kullanın ya da ıraksayan ölçekler (pozitif ve negatif) için iki renk tonunun koyu tonlarını eşleştirin.

Sık yapılan hatalar

  • Çok fazla kademe, ayırt edilemeyen bantlara sıkışır. 10 kademeli ölçekler iyi çalışır çünkü her kademe yaklaşık %9 daha koyudur; 20 kademede farklar ince olur. Güçlü kontrastlar için 3–5 kademe tercih edin.
  • Burada ton kayması mümkün değildir: her kademe tüm kanalları eşit ölçekler, kırmızı kırmızı kalır, yeşil yeşil kalır. Ton kayması iki farklı renk arasında interpolasyon yapıldığında ortaya çıkar; bu araç bunu yapmaz.
  • Erişilebilirliği göz ardı etmek: uyumlu görünen tonlar arka plana karşı WCAG kontrastını sağlayamayabilir. Her kademede kontrastı mutlaka doğrulayın.
  • Yalnızca koyu tonlardan oluşan ölçekler koyu arka planlarda boğucu hisseder. Kullanışlı bir koyu mod için bir açık ton ölçeğiyle eşleştirin.

Sık Sorulan Sorular

Bir tasarım sistemi için 5 kademe koyu ton + 5 kademe açık ton (temel çevresinde toplam 10) yaygın kuraldır. UI durum renkleri için (üzerine gelme, etkin) 3 kademe yeterlidir.

Burada kullanılan eşit karıştırma, her kademeyi temel ile siyah arasındaki düz bir çizgi üzerinde tutar; bu yüzden orta kademeler temiz kalır. Bulanık bir orta genellikle iki farklı renk arasında interpolasyon yapan ya da doygunluğu düşürmeden yalnızca açıklığı azaltan bir araçtan gelir.

Koyu renkler siyaha dönmeden önce koyulaşacak çok az yer bırakır; koyu mor bir temel, ölçek çökmeden yalnızca 2-3 belirgin kademe üretir. Daha zengin ölçekler için orta açıklıkta bir temel seçin.

Amaç olarak benzerdir, ancak siyahla karıştırmak açıklıkla birlikte doygunluğu da düşürür ve bu genellikle daha doğal görünür. Yalnızca açıklığı azaltmak doygunluğu yüksek tutar ve aşırı doygun koyu renklere yol açabilir.

İ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.