Renk Gölgesi Oluşturucu
Bir rengi eşit adımlarla siyahla karıştırarak daha koyu tonlarını oluşturun. Herhangi bir CSS biçiminde bir renk girin, 2 ile 20 arasında adım sayısı ve bir karıştırma alanı seçin; özgün renkle başlayan tabloda her ton için HEX, RGB, HSL ve OKLCH değerlerini alın. sRGB karıştırma, klasik gölge araçları ve Sass ile aynı sonucu verirken OKLab, algısal olarak eşit adımlar sunar. UI renk skalaları oluşturmak için idealdir.
Sık sorulan sorular
Gölge nedir?
Gölge, siyahla karıştırılmış renktir. Tonunu koruyup koyulaşır; beyazla karıştırılan açık tondan veya griyle karıştırılan renk tonundan farklıdır.
Adımlar nasıl aralıklanır?
N adım olduğunda k satırında renk, (k - 1) / N oranında siyahla karıştırılır; bu nedenle 10 adımda %0, %10, %20 ve böyle devam ederek %90'a kadar sonuç elde edilir. İlk satır her zaman özgün renginizdir ve saf siyah listeye dahil edilmez.
sRGB ve OKLab karıştırma arasındaki fark nedir?
sRGB karıştırma, gama kodlu kanal değerlerinin ortalamasını alır; Sass mix() siyahla ve çoğu klasik ton oluşturucunun yaptığı da budur. OKLab karıştırma algısal bir uzayda gerçekleşir; bu nedenle adımlar açıklık bakımından daha eşit görünür ve koyu tonlar renklerini daha iyi korur.
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ç gölge 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 siyah oranı, hex kodu, rgb(), hsl() ve modern CSS söz diziminde oklch() gösterilir. RGB kanalları tam sayıdır; HSL yüzdeleri en fazla iki, OKLCH açıklık ve kroma değerleri ise en fazla dört ondalık basamakla gösterilir.
Saydam renklere ne olur?
Her gölgede girdinin alfa değeri korunur; çünkü siyah aynı alfa değeriyle karıştırılır. Bu durumda hex kodları 8 basamaklı olur ve CSS işlevleri eğik çizgiden sonra alfa değeriyle biter.
sRGB dışındaki renklere ne olur?
Karıştırma tam renk değeriyle yapılır; ancak HEX, RGB ve HSL yalnızca sRGB'yi gösterebilir. Bu nedenle gam dışındaki adımlar, bu sütunlarda CSS Color 4 algoritmasıyla sRGB'ye dönüştürülür. OKLCH sütunu ise dönüştürülmemiş değeri korur.
Gölgeleri CSS içinde nasıl kullanırım?
Hex veya oklch() değerlerini --brand-600 ve --brand-700 gibi özel özelliklere kopyalayın. Tarayıcıda karıştırmak için color-mix(in oklab, var(--brand) 80%, black) kullanın; bu, OKLab ayarındaki %20 gölgeyle aynı sonucu verir.
Koyu tonlar otomatik olarak erişilebilir midir?
Hayır. Her tona karşı metnin kontrastını bir kontrast denetleyiciyle kontrol edin; koyu görünen bir ton, başka bir koyu renge veya renkli metne karşı 4.5:1 değerinin altında kalabilir.