Juanma Santoyo

En ocasiones me llaman friki

Colores intermedios con JavaScript

| 2 Comentarios

Hace poco, un compañero me preguntó sobre encontrar varios colores intermedios entre dos colores, de forma que un color pueda transformarse gradualmente en el otro. Esto es lo que se hace, por ejemplo, para averiguar los colores que forman un degradado o para calcular el color resultante al solapar dos colores con cierta transparencia.

Lo que vamos a hacer es crear un pequeño script en JavaScript que se encargará de calcular varios colores intermedios entre dos colores cualesquiera.

Colores intermedios.

Bien, en realidad, es un proceso muy sencillo, ya que los colores son en esencia, números.

Sobre los colores como números

Cualquier color en pantalla, se basa en tres componentes: la cantidad de rojo, la cantidad de verde y la cantidad de azul. Un color especificado de esta forma, está siguiendo el patrón RGB. Los diferentes valores de las componentes pueden ir desde el 0 hasta el 255.

Puesto que cada componente del color tiene exactamente 256 valores posibles, se pueden representar con un valor hexadecimal de dos cifras, desde el 0 hasta el FF. De hecho, lo más normal es representarlos mediante tres valores hexadecimales. Esto nos da un número hexadecimal de seis cifras, donde las dos primeras son la componente R (cantidad de rojo), los dos segundos son la componente G (la cantidad de verde) y los dos últimos la componente B (la cantidad de azul).

Por ejemplo, el rojo se representaría así: FF0000 (255 de rojo, 0 de verde y 0 de azul).

Con lo cual, un color no es más que un número. Con la calculadora de tu sistema operativo puedes hacer una conversión de hexadecimal a decimal y ver qué valor decimal corresponde al color rojo. Se trata del 16711680.

La idea

Bien, ahora que sabemos que un color es un número, podemos simplificar mucho el problema al que nos enfrentamos.

Cualquiera con nociones de matemáticas básicas, sabría decir que el valor intermedio entre el 10 y el 20 es el 15. Los colores intermedios se calculan de la misma forma. Cambiaremos el 10 y el 20 por nuestras componentes.

Debemos tener en cuenta que debemos mezclar cada componente por separado. De forma que el punto intermedio entre rojos, el punto intermedio entre verdes y el punto intermedio entre azules nos dará el color intermedio entre nuestros dos colores.

Un script para calcular colores intermedios

Antes de empezar a programar nada, lo de siempre: hay que saber más o menos cómo vamos a hacer las cosas.

  • En principio, trabajaremos con los colores en su notación hexadecimal. Por lo tanto, necesitamos una pequeña función que se encargue de separar las componentes, y de convertirlas a un valor decimal. Esta función se llamará getColorComponents.
  • Necesitaremos una función que se dedique a calcular los intervalos necesarios entre dos componentes de color. Es decir, encontraremos todos los intervalos de cada componente de color por separado. Esta función se llamará getGradientComponents.
  • Por lo tanto, lo único que nos falta es una función que lo integre todo y que sea capaz de retornar una lista de cadenas de texto, cada una de las cuales representará un intervalo de color en codificado en hexadecimal. Esta función se llamará getGradientColors.
  • Sólo un detalle más: El primer y último color, son un intervalo más. Esto es que si pedimos tres colores, sólo calculará uno adicional: el valor central.

Programamos el Script

La función getColorComponents

function getColorComponents(numero)
{
	var res = new Array();

	res[0] = parseInt("0x" + numero.substr(0, 2));
	res[1] = parseInt("0x" + numero.substr(2, 2));
	res[2] = parseInt("0x" + numero.substr(4, 2));

	return res;
}

Como veis, nos limitamos a separar los componentes. Lo único destacable es cómo realiza la conversión a hexadecimal. En JavaScript, los números que empiezan con 0x se consideran hexadecimales.

La función getGradientComponents

function getGradientComponents(n1, n2, z)
{		
	var i = 0;
	var n = 0;
	var res = new Array();

	n = (n1 - n2) / (z - 1);

	for(i = 0; i < z; i++)
	{
		res[i] = n2 + (n * ((z - 1) - i));
		res[i] = Math.floor(res[i]);
		res[i] = res[i].toString(16);

		if(res[i].length < 2) res[i] = "0" + res[i];
	}

	return  res;
}

Esta función tiene como parámetros las componentes iniciales y finales, y el número de valores intermedios que hay que sacar. El cálculo como veis es sencillo.

La función getGradientColors

function getGradientColors(firstColor, lastColor, gradientZones)
{
	var components1 = getColorComponents(firstColor);
	var components2 = getColorComponents(lastColor);

	var i = 0;
	var colors = new Array();
	var res = new Array();

	for(i = 0; i < components1.length; i++)
	{
		colors[i] = getGradientComponents(components1[i], components2[i], gradientZones);		
	}
	
	for(i = 0; i < gradientZones; i++)
	{
		res[i] = colors[0][i] + colors[1][i] + colors[2][i];
	}

	return res;	
}

Esta función gestiona las dos anteriores: primero separa cada color en sus componentes, después obtiene los puntos intermedios por componente y por último genera un string que representa los nuevos colores en hexadecimal.

Los resultados se devuelven en un array. Donde el primer elemento es el primer color, el último elemento es el segundo color; y todos los elementos intermedios son colores calculados.

¡Hemos terminado!

Puede que inicialmente sea complicado hacerse a la idea de que los colores funcionan como los números, pero una vez que ese concepto está claro, es fácíl trabajar con ellos y transformarlos.

Lo que hemos trabajado con este script es mezcla de colores, lo cual es muy potente para generar muchos tipos de efectos. En esta ocasión, nos hemos limitado a una mezcla progresiva, pero como siempre, las posiblidades son infinitas.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

2 Comments

  1. Muchas gracias!!!
    Me ha servido mucho para hacer la leyenda de una gráfica.

  2. ¡De nada! Me alegro de que lo hayas encontrado útil.

Deja un comentario

Los campos obligatorios están marcados con *.