Skip to main content
se eliminaron 41 caracteres en el cuerpo
Origen Enlace
user227
user227

Buenas, Javi. 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%)";

Un apunte final. 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

Saludos.

Buenas, Javi. 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%)";

Un apunte final. 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

Saludos.

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

Origen Enlace
Unix
  • 166
  • 4

Buenas, Javi. 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%)";

Un apunte final. 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

Saludos.