Wie erstelle ich bei einem RGB-Wert einen Farbton (oder Farbton)?

168, 0, 255Wie erstelle ich bei einem RGB-Wert Farbtöne (heller machen) und Schattierungen (dunkler machen) der Farbe?

Unter verschiedenen Optionen zum Schattieren und Tönen:

• Multiplizieren Sie für Farbtöne jede Komponente mit 1/4, 1/2, 3/4 usw. ihres vorherigen Werts. Je kleiner der Faktor, desto dunkler der Farbton.

• Berechnen Sie für Farbtöne (255 - vorheriger Wert), multiplizieren Sie diesen mit 1/4, 1/2, 3/4 usw. (je größer der Faktor, desto heller der Farbton) und addieren Sie diesen zum vorherigen Wert (jeweils angenommen) .component ist eine 8-Bit-Ganzzahl.

Beachten Sie, dass Farbmanipulationen (wie Farbtöne und andere Schattierungen) in linearem RGB durchgeführt werden sollten . Es ist jedoch unwahrscheinlich, dass RGB-Farben, die in Dokumenten angegeben oder in Bildern und Videos codiert sind, in linearem RGB vorliegen. In diesem Fall muss eine sogenannte inverse Übertragungsfunktion auf jede der Komponenten der RGB-Farbe angewendet werden. Diese Funktion variiert mit dem RGB-Farbraum. Im sRGB-Farbraum (der angenommen werden kann, wenn der RGB-Farbraum unbekannt ist) entspricht diese Funktion beispielsweise in etwa der Erhöhung jeder sRGB-Farbkomponente (von 0 bis 1) auf eine Potenz von 2,2. (Beachten Sie, dass "lineares RGB" kein RGB-Farbraum ist.)

Siehe auch den Kommentar von Violet Giraffe zur "Gammakorrektur".

Einige Definitionen

• Ein Farbton wird durch "Abdunkeln" eines Farbtons oder "Hinzufügen von Schwarz" erzeugt.
• Ein Farbton wird durch "Aufhellen" eines Farbtons oder "Hinzufügen von Weiß" erzeugt.

Erstellen eines Farbtons oder eines Farbtons

Abhängig von Ihrem Farbmodell gibt es verschiedene Methoden, um eine dunklere (schattierte) oder hellere (getönte) Farbe zu erstellen:

• RGB::

  • Schattieren:

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

  • Zum Abtönen:

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

  • Allgemeiner ist die Farbe, die zum Überlagern einer Farbe RGB(currentR,currentG,currentB)mit einer Farbe RGBA(aR,aG,aB,alpha)führt ,:

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

  wo (aR,aG,aB) = black = (0,0,0)zum Schattieren und (aR,aG,aB) = white = (255,255,255)zum Abtönen

• HSVoder HSB:

  • Zum Schattieren: Senken Sie das Value/ Brightnessoder erhöhen Sie dasSaturation
  • Zum Tönen: Verringern Saturationoder erhöhen Sie das Value/Brightness
• HSL::
  • Zum Beschatten: Senken Sie die Lightness
  • Zum Tönen: Erhöhen Sie die Lightness

Es gibt Formeln zum Konvertieren von einem Farbmodell in ein anderes. Gemäß Ihrer ersten Frage können Sie, wenn Sie sich in befinden RGBund das HSVModell beispielsweise zum Schattieren verwenden möchten, einfach in konvertieren HSV, die Schattierung durchführen und zurück in konvertieren RGB. Zu konvertierende Formeln sind nicht trivial, können aber im Internet gefunden werden. Abhängig von Ihrer Sprache ist es möglicherweise auch als Kernfunktion verfügbar:

• RGB zu HSV Farbe in Javascript?
• Konvertieren Sie den RGB-Wert in HSV

Modelle vergleichen

• RGB hat den Vorteil, dass es wirklich einfach zu implementieren ist, aber:
  • Sie können Ihre Farbe nur relativ schattieren oder tönen
  • Sie haben keine Ahnung, ob Ihre Farbe bereits getönt oder schattiert ist
• HSVoder HSBist etwas komplex, weil Sie mit zwei Parametern spielen müssen, um das zu bekommen, was Sie wollen ( Saturation& Value/ Brightness)
• HSL ist aus meiner Sicht das Beste:
  • unterstützt von CSS3 (für Webapp)
  • einfach und genau:
    • 50% bedeutet einen unveränderten Farbton
    • >50% bedeutet, dass der Farbton heller ist (Farbton)
    • <50% bedeutet, dass der Farbton dunkler ist (Schatten)
  • Mit einer bestimmten Farbe können Sie feststellen, ob sie bereits getönt oder schattiert ist
  • Sie können eine Farbe relativ oder absolut tönen oder schattieren (indem Sie einfach das LightnessTeil austauschen ).

• Wenn Sie mehr über dieses Thema erfahren möchten: Wiki: Colors Model
• Weitere Informationen zu diesen Modellen finden Sie unter: Wikipedia: HSL und HSV

Ich experimentiere gerade mit Leinwand und Pixeln ... Ich finde, dass diese Logik für mich besser funktioniert.

1. Verwenden Sie dies, um die Grauheit (Luma?) Zu berechnen.
2. aber sowohl mit dem vorhandenen Wert als auch mit dem neuen 'Farbton'-Wert
3. Berechnen Sie die Differenz (ich stellte fest, dass ich nicht multiplizieren musste)

4. add, um den 'Farbton'-Wert auszugleichen

   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;
   

oder etwas ähnliches...