1

Estoy haciendo un simple juego, y pretendo que un color cambie de tono proporcionalmente a un valor, es decir, por ejemplo si tengo de fondo un color azul claro (esto correspondería al valor 0) y a medida que este valor aumenta que ese color azul es vuelva más oscuro (al valor máximo de ese valor), o sea una simple regla de tres, pero claro no sé cómo proporcionar esto con los colores. Agradecería cualquier ayuda, lo que tengo hasta ahora es esto (que es casi nada), pero no sé si voy bien encaminado.

//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)");
2
  • intente solucionar lo que pretendes, mi duda es que solo que esa animacion deberia acabarse cuando sea muy oscuro? Commented el 31 ene. 2017 a las 19:33
  • En realidad nunca se acaba, es decir, al igual que ese valor aumenta también puede disminuir
    – lromeraj
    Commented el 1 feb. 2017 a las 14:00

1 respuesta 1

5

El modelo de color RGB permite calcular 16.777.216 de colores (2^24 o 256^3) mediante la mezcla del rojo, el verde y el azul. Es muy difícil trabajar con tonalidades precisamente por este cálculo, ya que cambiar la cantidad de uno de los tres colores cambia totalmente el tono. Hasta donde yo sé, sólo puedes mantener el tono del color en el gris, dejando los tres valores con el mismo valor, por ejemplo: (55, 55, 55).

Lo que sí puedes hacer es un algoritmo conversor de RGB a HSL. El modelo HSL también permite generar los 16.777.216 de colores pero lo hace a través del tono (Hue), la saturación (Saturation) y el brillo (Lightness). En este caso sí podrías mantener el mismo tono y cambiar únicamente el brillo. De hecho, este algoritmo ya lo encontrarás programado en multitud de lenguajes, y te será fácil adaptarlo a JavaScript (fácil, pero no rápido, ya que hay muchas variables en el cálculo para cada color).

El tono del modelo HSL tiene 360 valores, que son grados. Por ejemplo, en el grado 0º tenemos el rojo y en el grado 180º tenemos su color complementario, el cian. Puedes crear 360 colores y modificar su saturación o su brillo.

Sin embargo, si quieres ir más rápido no uses RGB haciendo la conversión a HSL, usa directamente el modelo de color HSL. Este ejemplo almacena el color rojo (0º) con su máxima saturación (100%) a la mitad de brillo (50%).:

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

Si quieres equilibrio de brillo en los colores, ten en cuenta que la máxima saturación del verde es más brillante que la máxima saturación del azul. Esto ocurre porque el ojo humano no percibe el brillo de forma lineal, con lo que podrías calcular el brillo percibido de forma fácil implementando un algoritmo en una función que simplemente aplique la ecuación de la recomendación ITU-R 601 (recomendada en el w3c): https://www.w3.org/TR/AERT#color-contrast

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.