Tabla de colores con Javascript

Una tabla que muestra los colores puros en todas las definiciones. Está construida con Javascript anidando tres bucles.

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.

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.Para la construcción de colores puros mezclamos los colores RGB siempre en estas cantidades 00, 33, 66, 99, CC, FF. 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>");
       }
    }
}

Usuarios que han visto este tema también han visto...

- Crear un archivo .js
- Pop-Up para imágenes en un mismo archivo en JavaScript
- Cómo comprimir ficheros javascript fácilmente
- Menu desplegable con enlace con Javascript
- Evento Submit de un formulario al pulsar intro

- Versión imprimible de este documento

- Enviar por e-mail este documento