Renk Tonu Oluşturucu
Bir rengi nötr griyle eşit adımlarla karıştırarak tonlarını oluşturun; bu işlem tonu korurken doygunluğu azaltır. Herhangi bir CSS biçiminde bir renk girin, 2 ile 20 arasında adım ve bir karıştırma alanı seçin; özgün renkten başlayarak her ton için HEX, RGB, HSL ve OKLCH değerlerini içeren bir tablo elde edin. Soluk paletler, devre dışı durumlar, ince yüzeyler ve daha sakin marka varyantları için kullanışlıdır.
Sık sorulan sorular
Ton nedir?
Ton, griyle karıştırılmış bir renktir. Tonunu korur ve daha soluk hale gelir; beyazla karıştırılan renk açıklığından veya siyahla karıştırılan renk koyuluğundan farklıdır.
Hangi gri kullanılır?
sRGB orta grisi #808080, rgb(128 128 128) kullanılır. Bu nedenle açık renkler biraz koyulaşır, koyu renkler ise bu renge yaklaştıkça biraz açılır; başka bir griyle karıştırmak için kendi grinizle Renk Karıştırıcı'yı kullanın.
Adımlar nasıl aralıklanır?
N adımda, k satırı rengi (k - 1) / N oranında griyle karıştırır; dolayısıyla 10 adım %0, %10, %20 ve bu şekilde %90'a kadar gider. İlk satır her zaman özgün renginizdir ve düz gri listeye hiçbir zaman dahil edilmez.
Ton, HSL doygunluğunu azaltmaktan nasıl farklıdır?
HSL doygunluğunu azaltmak, HSL açıklığını korur; griyle karıştırmak ise açıklığı da ortaya doğru çeker. Bu nedenle tonlar, rengi gri filtreden bakıyormuş gibi gösterir; soluk arka planlar ve devre dışı durumlar için uygundur.
sRGB ve OKLab karıştırma arasındaki fark nedir?
sRGB karıştırma, gama kodlu kanal değerlerinin ortalamasını alır; boya benzeri ton tablolarında ve Sass mix() kullanılan klasik yaklaşım budur. OKLab karıştırma algısal bir alanda gerçekleşir; bu nedenle kroma her adımda daha eşit biçimde azalır.
Hangi girdi biçimlerini kullanabilirim?
Hex kodları, # işareti olsun ya da olmasın, CSS renk adları, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() ve cmyk() desteklenir. Her çalıştırmada bir renk girin.
Kaç ton oluşturabilirim?
Her çalıştırmada 2 ile 20 arasında; varsayılan değer 10'dur. Sayıya ilk satırdaki özgün renk de dahildir.
Tabloda hangi değerler gösterilir?
Her adım için gri oranı, hex kodu, rgb(), hsl() ve modern CSS sözdiziminde oklch() gösterilir. RGB kanalları tam sayıdır, HSL yüzdeleri iki ondalık basamağa kadar, OKLCH açıklığı ve kroması ise dört basamağa kadar gösterilir.
Saydam ve geniş renk gamındaki renklere ne olur?
Girdi alfa değeri her ton için korunur; bu nedenle hex kodları 8 basamaklı olur. Gamut dışındaki adımlar, HEX, RGB ve HSL sütunlarında CSS Color 4 algoritmasıyla sRGB'ye eşlenirken OKLCH sütununda eşlenmemiş değer korunur.
CSS içinde bir tonu nasıl yeniden oluşturabilirim?
Hex veya oklch() değerini kopyalayın ya da tarayıcının, OKLab ayarındaki %30 tonu için color-mix(in oklab, var(--brand) 70%, #808080) ile karıştırmasını sağlayın. color-mix() tüm güncel büyük tarayıcılarda çalışır.