Intensify the tone of a color proportionally to a value

Question

Intensify the tone of a color proportionally to a value

Navigation

#1 by (4 votes)

1

I'm doing a simple game, and I intend for a color to change pitch proportionally to a value , that is, for example if I have a light blue color in the background ( this would correspond to the value 0) and as this value increases that blue color is darker (to the maximum value of that value), or a simple rule of three, but of course I do not know how to provide this with the colors. I would appreciate any help, what I have so far is this (which is almost nothing), but I do not know if I'm on track.

//Las variables speed y time están en otra función pero es simplemente que se vea que no es una constante.

var value = time + speed; //Este valor es el que varía, y como máximo puede llegar a 100, pues a media que este valor aumenta hacer el color "azul claro" más oscuro.

var initialColor = {r: 0, g: 146, b: 237}; //Este sería el color que me gustaría que fuese cada vez más oscuro a medida que aumente el valor

/* Y aquí se supone que debería de calcularse el color más oscuro jugando con los valores r, g y b 
*
*
*
*
*
*/

$("#background").css("background","rgba(" + r + ", " + g + ", " + b + ", 1)");

javascript css

asked by lromeraj 31.01.2017 в 18:39

source

1 answer

Modify node in C Ruby On Rails - Update method does not work

score 4 · Accepted Answer

The RGB color model allows you to calculate 16,777,216 colors (2 ^ 24 or 256 ^ 3) by mixing red, green and blue. It is very difficult to work with tonalities precisely because of this calculation, since changing the amount of one of the three colors totally changes the tone. As far as I know, you can only keep the color tone in gray, leaving the three values with the same value, for example: (55, 55, 55).

What you can do is an algorithm that converts RGB to HSL. The HSL model also allows to generate the 16,777,216 colors but it does so through the hue (Hue), saturation (Saturation) and brightness (Lightness). In this case you could keep the same tone and change only the brightness. In fact, this algorithm is already programmed in many languages, and it will be easy to adapt it to JavaScript (easy, but not fast, since there are many variables in the calculation for each color).

The tone of the HSL model has 360 values, which are degrees. For example, in grade 0 we have red and in grade 180 we have its complementary color, cyan. You can create 360 colors and modify their saturation or brightness.

However, if you want to go faster do not use RGB by converting to HSL, use the HSL color model directly. This example stores the color red (0º) with its maximum saturation (100%) at half brightness (50%).:

var color = "hsl(0, 100%, 50%)";

If you want brightness balance in colors, keep in mind that the maximum saturation of green is brighter than the maximum saturation of blue. This happens because the human eye does not perceive the brightness in a linear way, so you could calculate the perceived brightness easily by implementing an algorithm in a function that simply applies the ITU-R 601 recommendation equation (recommended in w3c): link