Home / Questions / 46997
Accepted
lromeraj
Asked: 2020-02-01 09:39:29 +0800 CST 2020-02-01 09:39:29 +0800 CST

Intensify the hue of a color proportionally to a value

  • 772

I am playing a simple game, and I want a color to change hue proportionally to a value , that is, for example, if I have a light blue background color (this would correspond to the value 0) and as this value increases, that blue color is make it darker (to the maximum value of that value), so it's a simple rule of three, but of course I don't 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 don't know if I'm on the right 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

1 Answers

  1. Best 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 hues precisely because of this calculation, since changing the amount of one of the three colors totally changes the hue. As far as I know, you can only keep the color tone to gray, leaving all three values ​​the same value, eg: (55, 55, 55).

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

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

    However, if you want to go faster don't use RGB doing the conversion 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 the 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 brightness in a linear way, so you could easily calculate the perceived brightness by implementing an algorithm in a function that simply applies the equation of the ITU-R 601 recommendation (recommended in the w3c): https://www.w3.org/TR/AERT#color-contrast

    • 5