Renk Karıştırıcı
CSS color-mix() gibi, seçtiğiniz renk alanında iki rengi istediğiniz oranda karıştırın. Herhangi bir CSS biçiminde iki renk girin, ikinci rengin payını %0 ile 100 arasında belirleyin ve OKLab, OKLCH, Lab, LCH, sRGB, linear sRGB, Display P3, HSL, HWB veya XYZ'yi seçin. Sonuç HEX, RGB, HSL ve OKLCH değerlerinin yanı sıra stil sayfanıza ekleyebileceğiniz hazır bir color-mix() ifadesi olarak sunulur.
Sık sorulan sorular
Miktar nasıl çalışır?
Miktar, karışımdaki Renk 2'nin payıdır. %0, Renk 1'i; 100%, Renk 2'yi verir; %50 ise seçilen alanda ikisinin tam ortasına denk gelir. color-mix(in space, color1 (100 - p)%, color2 p%) ile aynı sonucu verir.
Hangi renk alanını seçmeliyim?
Varsayılan olan OKLab algısal olarak tekdüzedir ve bulanık ya da koyu ara tonları önler. sRGB, eski tarayıcılar ve Sass gibi gama kodlu kanalları karıştırır; bu da doygun renklerin karışımını daha koyu ve soluk hale getirir. Lab, OKLab'a benzer davranan eski CIE algısal alanıdır; ancak mavi tonları daha az eşit işler.
Renk tonuna dayalı alanlar ne işe yarar?
OKLCH, LCH, HSL ve HWB, renk tekerleğinde en kısa yay boyunca renk tonunu enterpole eder; bu, varsayılan CSS davranışıdır. Böylece orta renk doygunluğunu korur ve her iki girdiden de daha canlı olabilir. Renklerden biri tonu olmayan nötr gri olduğunda diğer rengin tonu kullanılır.
Linear sRGB ve XYZ ne için kullanılır?
Her ikisi de üst üste binen ışık huzmeleri gibi ışık yoğunluklarını doğrusal olarak karıştırır; bu nedenle orta renk sRGB'dekinden daha parlak görünür. Fizik tabanlı efektler ve bulanık ya da harmanlanmış piksellerin görünümünü eşleştirmek için kullanışlıdır.
Saydamlık nasıl işlenir?
CSS color-mix() gibi, karıştırıcı önceden çarpılmış alfa ile enterpolasyon yapar; böylece saydam bir renk karışımı siyaha çekmez. Alfa değeri de aynı oranda enterpole edilir ve 8 basamaklı hex kodunda, CSS işlevlerinde ise eğik çizgiden sonra gösterilir.
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() display-p3 gibi renk uzayları ve cmyk() desteklenir; bunları istediğiniz şekilde bir arada kullanabilirsiniz. Her renk en fazla 100 karakter uzunluğunda olabilir.
Sonuç sRGB'nin dışındaysa ne olur?
Display P3, OKLCH veya LCH'de karıştırma, sRGB'nin gösteremeyeceği renkler üretebilir. Bu durumda HEX, RGB ve HSL, CSS Color 4 algoritmasıyla sRGB'ye eşlenir ve sonuca bir not eklenir; OKLCH değeri ise eşlenmemiş rengi korur.
color-mix() ifadesini nasıl kullanabilirim?
Renk kabul eden herhangi bir CSS özelliğine yapıştırın. Girdileri hex koduyla, geniş gamutlu girdilerde ise oklch() ile belirtir; böylece tarayıcı aynı karışımı yeniden hesaplar. color-mix(), Chrome, Edge, Firefox ve Safari'in tüm güncel sürümlerinde çalışır.
Sonuç ne kadar hassastır?
Miktar tam yüzde olarak belirtilir ve karışım culori kitaplığıyla tam hassasiyette hesaplanır. RGB kanalları tam sayıya, HSL yüzdeleri iki basamağa, OKLCH açıklığı ve kroması ise dört basamağa yuvarlanır; bu nedenle tarayıcılar son basamakta bir birim farklılık gösterebilir.
İki renk arasında birkaç adımı nasıl elde edebilirim?
Karıştırıcıyı %25, %50 ve %75 gibi farklı miktarlarla çalıştırın. Beyaza, siyaha veya griye doğru tam bir skala oluşturmak için Renk Açıklığı, Koyuluğu ve Tonu Oluşturucuları tüm adımları tek tabloda sunar.