Biorąc pod uwagę wartość RGB, jak utworzyć odcień (lub odcień)?

Biorąc pod uwagę wartość RGB, na przykład 168, 0, 255, w jaki sposób mogę utworzyć odcienie (rozjaśnić) i odcienie (przyciemnić) koloru?

Wśród kilku opcji cieniowania i barwienia:

• W przypadku odcieni pomnóż każdy składnik przez 1/4, 1/2, 3/4 itd. Poprzedniej wartości. Im mniejszy współczynnik, tym ciemniejszy odcień.

• W przypadku odcieni oblicz (255 - poprzednia wartość), pomnóż to przez 1/4, 1/2, 3/4 itd. (Im większy współczynnik, tym jaśniejszy odcień) i dodaj to do poprzedniej wartości (zakładając, że każda .component to 8-bitowa liczba całkowita).

Zwróć uwagę, że manipulacje kolorami (takie jak odcienie i inne cieniowanie) powinny być wykonywane w liniowym RGB . Jednak kolory RGB określone w dokumentach lub zakodowane w obrazach i wideo prawdopodobnie nie będą w liniowym RGB, w takim przypadku tak zwana funkcja odwrotnego transferu musi zostać zastosowana do każdego ze składników koloru RGB. Ta funkcja różni się w zależności od przestrzeni kolorów RGB. Na przykład w przestrzeni kolorów sRGB (co można założyć, jeśli przestrzeń kolorów RGB jest nieznana), ta funkcja jest z grubsza równoważna podniesieniu każdego składnika koloru sRGB (w zakresie od 0 do 1) do potęgi 2,2. (Zwróć uwagę, że „liniowy RGB” nie jest przestrzenią kolorów RGB).

Zobacz także komentarz Violet Giraffe na temat „korekcji gamma”.

Kilka definicji

• Odcień wytwarza się „zaciemnienie” odcień lub „dodaniu czerni”
• Odcień wytwarza się „ligthening” odcień lub „dodając znak”

Tworzenie odcienia lub cienia

W zależności od modelu kolorów istnieją różne metody tworzenia ciemniejszego (cieniowanego) lub jaśniejszego (podbarwionego) koloru:

• RGB:

  • Zacienić:

    newR = currentR * (1 - shade_factor)
    newG = currentG * (1 - shade_factor)
    newB = currentB * (1 - shade_factor)
    

  • Aby zabarwić:

    newR = currentR + (255 - currentR) * tint_factor
    newG = currentG + (255 - currentG) * tint_factor
    newB = currentB + (255 - currentB) * tint_factor
    

  • Bardziej ogólnie, kolor powodujący nałożenie koloru RGB(currentR,currentG,currentB)na kolor RGBA(aR,aG,aB,alpha)to:

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

  gdzie (aR,aG,aB) = black = (0,0,0)do cieniowania i (aR,aG,aB) = white = (255,255,255)do barwienia

• HSVlub HSB:

  • Aby zacieniać: zmniejsz Value/ Brightnesslub zwiększSaturation
  • Aby zabarwić: zmniejsz Saturationlub zwiększ Value/Brightness
• HSL:
  • Aby zacienić: opuść Lightness
  • Aby zabarwić: zwiększ Lightness

Istnieją formuły do ​​konwersji z jednego modelu kolorów na inny. Zgodnie z początkowym pytaniem, jeśli jesteś w RGBgrze i chcesz na przykład użyć HSVmodelu do cieniowania, możesz po prostu przekonwertować na HSV, wykonać cieniowanie i przekonwertować z powrotem na RGB. Formuły do ​​konwersji nie są trywialne, ale można je znaleźć w Internecie. W zależności od języka może być również dostępna jako funkcja podstawowa:

• Kolor RGB na HSV w javascript?
• Konwertuj wartość RGB na HSV

Porównanie modeli

• RGB ma tę zaletę, że jest naprawdę łatwy do wdrożenia, ale:
  • możesz tylko odcień lub zabarwić swój kolor względnie
  • nie masz pojęcia, czy Twój kolor jest już zabarwiony czy cieniowany
• HSVlub HSBjest trochę skomplikowane, ponieważ musisz grać z dwoma parametrami, aby uzyskać to, czego chcesz ( Saturation& Value/ Brightness)
• HSL jest najlepszy z mojego punktu widzenia:
  • obsługiwane przez CSS3 (dla aplikacji internetowej)
  • proste i dokładne:
    • 50% oznacza niezmieniony odcień
    • >50% oznacza, że ​​odcień jest jaśniejszy (odcień)
    • <50% oznacza, że ​​odcień jest ciemniejszy (odcień)
  • biorąc pod uwagę kolor, możesz określić, czy jest już zabarwiony, czy cieniowany
  • możesz zabarwić lub odcień koloru względnie lub całkowicie (po prostu wymieniając Lightnessczęść)

• Jeśli chcesz dowiedzieć się więcej na ten temat: Wiki: Colours Model
• Więcej informacji na temat tych modeli: Wikipedia: HSL i HSV

Obecnie eksperymentuję z płótnem i pikselami ... Uważam, że ta logika działa lepiej.

1. Użyj tego, aby obliczyć szarość (luma?)
2. ale z istniejącą wartością i nową wartością „odcienia”
3. obliczyć różnicę (stwierdziłem, że nie muszę mnożyć)

4. dodaj, aby zrównoważyć wartość „tinty”

   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;
   

czy jakoś tak...