web-dev-qa-db-fra.com

Étant donné une valeur RVB, comment puis-je créer une teinte?

Étant donné une valeur RVB, comme 168, 0, 255, comment puis-je créer des teintes (le rendre plus clair) et des nuances (le rendre plus sombre) de la couleur?

colorsrgb
111
DenaliHardtail

Parmi plusieurs options pour l'ombrage et la teinte:

  • Pour les nuances, multipliez chaque composant par 1/4, 1/2, 3/4, etc., de sa valeur précédente. Plus le facteur est petit, plus l'ombre est sombre.

  • Pour les teintes, calculez (255 - valeur précédente), multipliez-la par 1/4, 1/2, 3/4, etc. (plus le facteur est élevé, plus la teinte est claire), et ajoutez cette valeur à la valeur précédente (en supposant que chaque .component est un entier de 8 bits).

Notez que les manipulations de couleurs (telles que les teintes et autres nuances) doivent être effectuées en RVB linéaire . Toutefois, les couleurs RVB spécifiées dans les documents ou codées dans les images et les vidéos ne sont probablement pas en RVB linéaire, auquel cas une fonction de transfert inverse (- === -) doit être appliqué à chacun des composants de la couleur RVB. Cette fonction varie en fonction de l'espace colorimétrique RVB. Par exemple, dans l’espace colorimétrique sRVB (ce qui peut être supposé si l’espace colorimétrique RVB est inconnu), cette fonction équivaut à peu près à l’élévation de chaque couleur sRVB. composant (allant de 0 à 1) à une puissance de 2,2. (Notez que "RVB linéaire" n'est pas un espace colorimétrique RVB.)

Voir aussi le commentaire de Violet Giraffe sur la "correction gamma".

135
Peter O.

Quelques définitions

  • Une nuance est produite en "assombrissant" une teinte ou en "ajoutant du noir"
  • Une teinte est obtenue en "éclaircissant" une teinte ou en "ajoutant du blanc"

Créer une teinte ou une nuance

Selon votre modèle de couleur, il existe différentes méthodes pour créer une couleur plus sombre (ombrée) ou plus claire (teintée):

  • RGB:

    • Pour ombrager:

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

    • À teinter:

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

    • Plus généralement, la couleur résultant de la superposition d'une couleur RGB(currentR,currentG,currentB) avec une couleur RGBA(aR,aG,aB,alpha) est:

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

    où (aR,aG,aB) = black = (0,0,0) pour l'ombrage et (aR,aG,aB) = white = (255,255,255) pour la teinte

  • HSV ou HSB:

    • Pour ombrager: baissez le Value/Brightness ou augmentez le Saturation
    • Pour teinter: abaisse le Saturation ou augmente le Value/Brightness
  • HSL:
    • Pour ombrager: baissez le Lightness
    • Pour teinter: augmenter le Lightness

Il existe des formules pour convertir un modèle de couleur en un autre. Selon votre question initiale, si vous êtes dans RGB et souhaitez utiliser le modèle HSV pour ombrer, par exemple, vous pouvez simplement convertir en HSV, effectuer l’ombrage et convertir Retour à RGB. Les formules à convertir ne sont pas anodines mais peuvent être trouvées sur Internet. En fonction de votre langue, cette fonction peut également être disponible:

Comparer les modèles

  • RGB a l'avantage d'être très simple à mettre en œuvre, mais:
    • vous ne pouvez que nuancer ou teinter votre couleur relativement
    • vous ne savez pas si votre couleur est déjà teintée ou ombrée
  • HSV ou HSB est assez complexe car vous devez jouer avec deux paramètres pour obtenir ce que vous voulez (Saturation & Value/Brightness)
  • HSL est le meilleur de mon point de vue:
    • supporté par CSS3 (pour webapp)
    • simple et précis:
      • 50% Signifie une teinte non modifiée
      • >50% Signifie que la teinte est plus claire (teinte)
      • <50% Signifie que la teinte est plus sombre
    • étant donné une couleur, vous pouvez déterminer si elle est déjà teintée ou ombrée
    • vous pouvez teinter ou nuancer une couleur de manière relative ou absolue (en remplaçant simplement la partie Lightness
82
JBE

Je suis en train d'expérimenter avec canvas et pixels ... Je trouve que cette logique me convient mieux.

  1. Utilisez ceci pour calculer la grisaille (luma?)
  2. mais avec la valeur existante et la nouvelle valeur 'teinte'
  3. calculer la différence (j'ai trouvé que je n'avais pas besoin de me multiplier)

  4. ajouter pour compenser la valeur 'teinte'

    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;

ou quelque chose comme ça...

3
Blair