En HTML construimos cualquier color mezclando el rojo, verde y azul (RGB) en las proporciones que deseamos. Esto es un hecho que deberíais saber antes de leer este artículo. Se explica con detalle la construcción de colores en el artículo Los colores y HTML. Será necesario que, el que no esté familiarizado con este asunto, se lea el artículo.

Además de cómo construir colores, el artículo Los colores y HTML muestra también cuáles son los colores puros, que se ven sin problemas en todas las profundidades de color que pueda tener la configuración de los ordenadores de los visitantes. Para la construcción de colores puros mezclamos los colores RGB siempre en estas cantidades 00, 33, 66, 99, CC, FF. Nuevamente, quien no conozca esto debería leerse el reportaje señalado anteriormente.

El ejemplo que pretendemos construir tiene que ver con los colores puros en todas las definiciones. Se trata de construir una tabla en una página web que contenga todos los colores puros, además del código RGB de cada color. Esta tabla puede servir para seleccionar un color que pretendemos utilizar en una página web. Si nos limitamos solamente a utilizar los colores de la tabla tendremos la seguridad que nuestra paleta será respetada en todos los casos.

Para generar todos los colores puros vamos a utilizar tres arrays Javascript con los posibles valores para cada uno de los colores RGB. Por tanto, tendremos tres arrays como los que se puede ver a continuación:

var r = new Array("00","33","66","99","CC","FF");
var g = new Array("00","33","66","99","CC","FF");
var b = new Array("00","33","66","99","CC","FF");
        

Para escribir la tabla en la página web vamos a hacer un recorrido a estos tres arrays. Para ello vamos a utilizar bucles anidados, que son bucles dentro de otros bucles.

Vamos a tratar de explicar porqué necesitamos los bucles anidados; Si hacemos la cuenta de los colores que debemos ir generando obtendremos una lista como la que sigue:

#000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF...

Pues vemos que al principio los tres valores de RGB valen 00 y cómo en sucesivas repeticiones se va aumentando el valor de B (El valor asignado al azul) hasta que llegamos a FF. Para continuar se aumenta el valor de G y se vuelve a realizar la cuenta con B. Es como si contásemos y las unidades fueran los valores de RBG.

El caso es que realizamos la cuenta con el valor B, cuando llegamos a FF aumentamos el valor de G y cuando lleguemos a FF en G aumentaríamos en un valor R. Así se puede ver una estructura en pseudocódigo como esta.

Contamos desde 00 hasta FF con el valor R{
    Contamos desde 00 hasta FF con el valor G{
       Contamos desde 00 hasta FF con el valor R{
          Imprimimos el valor actual de RGB
       }
    }
}

Esta estructura imprime todos los colores puros, y ya es cercana a nuestra solución, aunque todavía no está escrita en Javascript y falta colocar todas las etiquetas HTML que necesitamos para mostrar una tabla en una página web.

Como no importa ir un poco más despacio con tal de que todo el mundo entienda el problema Vamos a escribir en Javascript este bucle para que simplemente liste los colores puros, sin introducirlos todavía en una tabla. Será interesante para ver un poco mejor el funcionamiento de bucles anidados.

//creamos los arrays
var r = new Array("00","33","66","99","CC","FF");
var g = new Array("00","33","66","99","CC","FF");
var b = new Array("00","33","66","99","CC","FF");

//hacemos el bucle anidado
for (i=0;i<r.length;i++) {
    for (j=0;j<g.length;j++) {
        for (k=0;k<b.length;k++) {
            //creamos el color
            var nuevoc = "#" + r[i] + g[j] + b[k];
            //imprimimos el color
            document.write(nuevoc + "<br>");
        }
    }
}

Los bucles para recorrer un array se crean con un índice que servirá para acceder a la posición actual del array. Los índices en arrays empiezan en 0, es por ello que nuestros bucles for contienen una inicialización a 0 de la variable que va a servir de índice. Además el índice debe crecer de uno en uno hasta que llegue a la última posición del array, que se obtiene accediendo a su propiedad length (que guarda la longitud o número de elementos del array).

Poniendo un bucle dentro de otro podremos realizar esa cuenta. El bucle más exterior será el que menos veces se ejecute, así que con el bucle exterior llevaremos la cuenta de R. El bucle del medio será para llevar la cuenta de G y el más interior (el que más veces se repetirá) para llevar la cuenta de B, que es el valor que va cambiando constantemente.

La tabla de los colores completa

Para acabar vamos a ver el ejemplo completo, con todas las líneas de código que incluyen los textos HTML necesarios para que la tabla salga convenientemente formateada y con los colores de fondo en cada una de las celdas iguales al color actual.

Para ello lo primero que hacemos es escribir una cabecera de la tabla y finalización de la misma, que quedan fuera de la estructura de bucles. Dentro de los bucles realizaremos las sentencias para imprimir cada una de las filas y celdas de la tabla.

Nuestra tabla va a tener en cada fila un conjunto de colores donde los valores RG no cambian y el valor B varía entre todos los posibles. En la siguiente fila se incrementaría en uno el valor G y se haría otra vez la cuenta de valores B... así hasta que terminamos con todos los valores R, G y B posibles.

El código es el siguiente:

<table width="80%">
<script language="javascript">
var r = new Array("00","33","66","99","CC","FF");
var g = new Array("00","33","66","99","CC","FF");
var b = new Array("00","33","66","99","CC","FF");

for (i=0;i<r.length;i++){
    for (j=0;j<g.length;j++) {
        document.write("<tr>");
        for (k=0;k<b.length;k++) {
            var nuevoc = "#" + r[i] + g[j] + b[k];
            document.write("<td bgcolor=\"" + nuevoc + "\" align=center>");
            document.write(nuevoc);
            document.write("</td>");
        }
        document.write("</tr>");
    }
}
</script>
</table>
        

Vemos que antes de empezar el bucle más interior se crea una nueva celda con <TR> y que cuando se acaba se termina también la celda con </TR>. Además, dentro del bucle más interior se compone primero el color actual y luego se escribe una celda con el atributo bgcolor asignado a ese color actual y dentro de ella el texto del color actual.

La tabla que nos genera este script se puede ver aquí: