colors - para - tabla de colores

Dado un valor RGB, ¿cómo creo un tinte(o sombra)?

Question

Dado un valor RGB, como 168, 0, 255 , ¿cómo creo los tintes (lo hago más claro) y los tonos (lo hago más oscuro) del color?

Answer 1

Algunas definiciones

• Se produce una sombra "oscureciendo" un matiz o "agregando negro"
• Un tinte se produce al "ligear" un matiz o "agregar blanco"

Creando un tinte o una sombra

Dependiendo de su Modelo de color, existen diferentes métodos para crear un color más oscuro (sombreado) o más claro (tintado):

• RGB :

  • A la sombra:

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

  • Para teñir:

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

  • De manera más general, el color que da como resultado la estratificación de un color RGB(currentR,currentG,currentB) con un color RGBA(aR,aG,aB,alpha) es:

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

  donde (aR,aG,aB) = black = (0,0,0) para sombreado, y (aR,aG,aB) = white = (255,255,255) para (aR,aG,aB) = white = (255,255,255)

• HSV o HSB :

  • Para sombrear: baje el Value / Brightness o aumente la Saturation
  • Para teñir: baje la Saturation o aumente el Value / Brightness
• HSL :
  • Para sombrear: baje la Lightness
  • Para teñir: aumentar la Lightness

Existen fórmulas para convertir de un modelo de color a otro. Según su pregunta inicial, si está en RGB y desea usar el modelo de HSV para sombrear, por ejemplo, puede convertir a HSV , hacer el sombreado y convertir de nuevo a RGB . La fórmula para convertir no es trivial, pero se puede encontrar en Internet. Dependiendo de su idioma, también podría estar disponible como una función central:

• Color RGB a HSV en javascript?
• Convierta el valor RGB a HSV

Comparando los modelos

• RGB tiene la ventaja de ser realmente simple de implementar, pero:
  • solo puedes sombrear o teñir tu color relativamente
  • no tienes idea si tu color ya está teñido o sombreado
• HSV o HSB es algo complejo porque necesita jugar con dos parámetros para obtener lo que desea ( Saturation y Value / Brightness )
• HSL es el mejor desde mi punto de vista:
  • soportado por CSS3 (para webapp)
  • simple y preciso:
    • 50% significa un tono inalterado
    • >50% significa que el Hue es más claro (tinte)
    • <50% significa que el tono es más oscuro (sombra)
  • dado un color, puede determinar si ya está teñido o sombreado
  • puede matizar o sombrear un color de manera relativa o absoluta (simplemente reemplazando la parte de Lightness )

• Si quieres aprender más sobre este tema: Wiki: Modelo de colores
• Para más información sobre cuáles son esos modelos: Wikipedia: HSL y HSV

Answer 2

Actualmente estoy experimentando con lienzo y píxeles ... Me parece que esta lógica me funciona mejor.

1. Use esto para calcular el gris-ness (¿luma?)
2. pero con el valor existente y el nuevo valor ''tint''
3. calcule la diferencia (descubrí que no necesitaba multiplicar)

4. agregar para compensar el valor ''tint''

   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;

o algo así...

Answer 3

Entre varias opciones para sombrear y teñir:

• Para las sombras, multiplique cada componente por 1/4, 1/2, 3/4, etc., de su valor anterior. Cuanto menor es el factor, más oscura es la sombra.

• Para los tintes, calcule (255 - valor anterior), multiplique eso por 1/4, 1/2, 3/4, etc. (cuanto mayor sea el factor, más claro será el tinte) y agréguelo al valor anterior.

Con el advenimiento de la representación basada en la física, la práctica ha surgido para hacer manipulaciones de color (como tintes y otros sombreados) en RGB lineal . Como Violet Giraffe insinuó en un comentario acerca de la corrección gamma, hay múltiples tipos de espacios de color RGB, muchos de los cuales se convierten a RGB lineal por corrección gamma. Sin embargo, es probable que los colores mostrados por la mayoría de las pantallas de computadora no estén en RGB lineal. Uno de esos espacios de color no lineal es sRGB; una conversión a RGB lineal es más o menos equivalente a aumentar cada componente de color sRGB (que va de 0 a 1) a una potencia de 2.2.