Bir RGB değeri verildiğinde, nasıl ton (veya gölge) oluşturabilirim?


124

Bir RGB değeri verildiğinde 168, 0, 255, rengin tonlarını (daha açık hale getirin) ve gölgelerini (daha koyu hale getirin) nasıl oluşturabilirim?

Yanıtlar:


153

Gölgelendirme ve renklendirme için çeşitli seçenekler arasında :

  • Gölgeler için, her bileşeni önceki değerinin 1/4, 1/2, 3/4 vb. İle çarpın. Faktör ne kadar küçükse gölge o kadar koyu olur.

  • Renk tonları için hesaplayın (255 - önceki değer), bunu 1/4, 1/2, 3/4, vb. İle çarpın (faktör ne kadar büyükse, renk tonu o kadar açık) ve bunu önceki değere ekleyin (her birinin .component, 8 bitlik bir tam sayıdır).

Renk işlemlerinin (renk tonları ve diğer gölgelendirme gibi) doğrusal RGB'de yapılması gerektiğini unutmayın . Bununla birlikte, belgelerde belirtilen veya görüntülerde ve videoda kodlanmış RGB renklerinin doğrusal RGB'de olması muhtemel değildir, bu durumda , RGB renk bileşenlerinin her birine sözde bir ters aktarım işlevinin uygulanması gerekir. Bu işlev, RGB renk alanına göre değişir. Örneğin, sRGB renk uzayında (RGB renk alanı bilinmiyorsa varsayılabilir), bu işlev kabaca her bir sRGB renk bileşenini (0'dan 1'e kadar) 2.2 kuvvetine yükseltmeye eşdeğerdir. ("Doğrusal RGB" nin bir RGB renk alanı olmadığını unutmayın.)

Ayrıca bkz. Violet Giraffe'ın "gama düzeltmesi" hakkındaki yorumu.


20
Bunu denedim ve harika çalıştı. Formül örnekleri yazmanın faydalı olacağını düşündüm. Orijinal (r, g, b); Gölge (rs, GS, gn s): rs = r * 0.25, gs = g * 0.25, bs = b * 0.25(bu çok koyu renk olan); Tonlama (oda sıcaklığı, gt, bt): rt = r + (0.25 * (255 - r)), gt = g + (0.25 * (255 - g)), bt = b + (0.25 * (255 - b))(yani, bir çok ışık renk olan). Bunu birçok renk tonu yaratan harika bir dizinin parçası olarak yaptım ve harika çalıştı. Umarım yardımcı olur. Teşekkürler Peter.
Thomas

1
Bir hata yaptın Tam tersidir.
Francesco Menzani

Bu manipülasyonun gama düzeltmesini hesaba katmaması gerektiğinden emin misiniz?
Violet Giraffe

1
@VioletGiraffe: Gama düzeltmesiyle iyi bir noktaya değindin. Düzenlememe bakın. (Bu, 22 saat önce silinmiş bir yorumumun yerini alıyor.)
Peter O.

97

Bazı tanımlar

  • Bir gölge , bir ton "koyulaştırılarak" veya "siyah eklenerek" üretilir
  • Bir ton , bir tonun "aydınlatılması" veya "beyazın eklenmesi" ile üretilir.

Bir ton veya gölge yaratmak

Renk Modelinize bağlı olarak, daha koyu (gölgeli) veya daha açık (renkli) bir renk oluşturmanın farklı yöntemleri vardır:

  • RGB:

    • Gölgelendirmek için:

      newR = currentR * (1 - shade_factor)
      newG = currentG * (1 - shade_factor)
      newB = currentB * (1 - shade_factor)
      
    • Renk tonu vermek için:

      newR = currentR + (255 - currentR) * tint_factor
      newG = currentG + (255 - currentG) * tint_factor
      newB = currentB + (255 - currentB) * tint_factor
      
    • Daha genel olarak, bir rengi bir renkle katmanlamayla sonuçlanan RGB(currentR,currentG,currentB)renk RGBA(aR,aG,aB,alpha)şudur:

      newR = currentR + (aR - currentR) * alpha
      newG = currentG + (aG - currentG) * alpha
      newB = currentB + (aB - currentB) * alpha
      

    (aR,aG,aB) = black = (0,0,0)gölgeleme ve (aR,aG,aB) = white = (255,255,255)renklendirme için nerede

  • HSVveya HSB:

    • Gölgelendirmek için: azaltın Value/ Brightnessveya artırınSaturation
    • Tonlamak için: azaltın Saturationveya Value/Brightness
  • HSL:
    • Gölgelendirmek için: Lightness
    • Tonlamak için: Lightness

Bir renk modelinden diğerine dönüştürmek için formüller vardır. İlk sorunuza göre, örneğin içindeyseniz RGBve HSVmodeli gölgelendirmek için kullanmak istiyorsanız, sadece dönüştürebilir HSV, gölgelendirme yapabilir ve geri dönüştürebilirsiniz RGB. Dönüştürülecek formül önemsiz değildir, ancak internette bulunabilir. Dilinize bağlı olarak, temel bir işlev olarak da mevcut olabilir:

Modelleri karşılaştırmak

  • RGB uygulaması gerçekten basit olma avantajına sahiptir, ancak:
    • renginizi yalnızca göreceli olarak gölgeleyebilir veya renklendirebilirsiniz
    • renginizin zaten renkli mi yoksa gölgeli mi olduğu hakkında hiçbir fikriniz yok
  • HSVveya HSBbiraz karmaşıktır çünkü istediğinizi elde etmek için iki parametreyle oynamanız gerekir ( Saturation& Value/ Brightness)
  • HSL benim açımdan en iyisi:
    • CSS3 tarafından desteklenir (webapp için)
    • basit ve doğru:
      • 50% değiştirilmemiş bir Ton anlamına gelir
      • >50% Tonun daha açık olduğu anlamına gelir (ton)
      • <50% Tonun daha koyu olduğu anlamına gelir (gölge)
    • bir renk verildiğinde, zaten renkli mi yoksa gölgeli mi olduğunu belirleyebilirsiniz
    • bir rengi görece veya mutlak olarak renklendirebilir veya gölgelendirebilirsiniz (yalnızca Lightnessparçayı değiştirerek )


1
Burada inanıyorum ki "Bir gölge, bir tonu" koyulaştırarak "üretilir, ton derken rengi kastediyorsunuz. Çünkü HSL / HSV'deki gibi tondan bahsediyorsanız, onu değiştirmek gölge / ton değil farklı bir renk üretecektir. Ton (0-360 °) tek başına daha koyu / açık olamaz. Bir renk gölgesi / tonu vermek için, SL / SV değerlerini değiştirmek gerekir. Bu tanım, tonu değiştirmenin daha koyu / açık bir renk üreteceğini düşünmesi için birini yanıltabilir.
akinuri

Gölge versiyonu yalnızca 0'dan başlayan renkler için çalışır. Renk aralığınızın yarısını renk kanalı değerine ekleyin, ardından hesaplamayı yapın ve ardından bu aralığı tekrar çıkarın. Renginiz işaretliyse ve taşma nedeniyle bir şeyi bozmadan hesaplama yapabiliyorsanız, bu amaçlandığı gibi çalışır.
t0b4cc0

3

Şu anda tuval ve piksellerle deneyler yapıyorum ... Bu mantığın benim için daha iyi çalıştığını görüyorum.

  1. Grilığı hesaplamak için bunu kullanın (luma?)
  2. ancak hem mevcut değer hem de yeni 'renk tonu' değeriyle
  3. farkı hesapla (çarpmaya ihtiyacım olmadığını anladım)
  4. 'ton' değerini dengelemek için ekleyin

    var grey =  (r + g + b) / 3;    
    var grey2 = (new_r + new_g + new_b) / 3;
    
    var dr =  grey - grey2 * 1;    
    var dg =  grey - grey2 * 1    
    var db =  grey - grey2 * 1;  
    
    tint_r = new_r + dr;    
    tint_g = new_g + dg;   
    tint_b = new_b _ db;
    

ya da böyle bir şey...

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.