Este ejercicio es muy sencillo, pero puede resultar útil para algunas personas y didáctico, como práctica de trabajo con Javascript. Se trata de una pequeña función que sirve para generar un color aleatorio, en formato hexadecimal, que es el utilizado los colores HTML.

Lo hemos extraído de otro ejemplo realizado en Javascript, en el que necesitábamos generar un color de manera aleatoria. Creemos que puede ser interesante para comentarlo en un artículo aparte, por si alguien en sus páginas necesita crear un color totalmente aleatorio.

Para crear un color aleatorio necesitamos simplemente 6 números en hexadecimal (números del 0 a la F). Si obtenemos aleatoriamente estos 6 números hexadecimales, habremos creado el código de un color aleatorio.

En este taller vamos a generar un color aleatorio con Javascript realizando estos pasos:

• Función para generar aleatorios
• Función para generar aleatorios en hexadecimal
• Obtener el color aleatorio
• Función que genera colores aleatorios
• Práctica DOM para generar elementos de la página con colores aleatorios
• Variaciones de la función de color aleatorio

Función para generar aleatorios

Por tanto, para generar un número aleatorio, vamos a apoyarnos en una función relatada en otro artículo de DesarrolloWeb.com: Generación de números aleatorios Javascript. En este artículo se abordó la generación de aleatorios con la clase Math y varias variantes para mejorar la función de creación de aleatorios.

Así que, sin más explicaciones, copio y pego aquí la función que vamos a usar para generar aleatorios en nuestra práctica de generación de colores aleatorios, que recibe el mínimo y el máximo de la generación de números:

function aleatorio(inferior, superior) {
    let numPosibilidades = superior - inferior;
    let aleatorio = Math.random() * numPosibilidades;
    aleatorio = Math.floor(aleatorio);
    return parseInt(inferior) + aleatorio;
}

Función para generar aleatorios en hexadecimal

Como nosotros necesitamos un valor aleatorio con dígitos en Hexadecimal, para apoyarnos en la función anterior, vamos a generar un número aleatorio en decimal, que luego convertiremos a hexadecimal. Para hacer esa conversión utilizaremos un array de valores hexadecimales como este:

const hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")

Ahora, para obtener ese valor aleatorio hexadecimal, lo único que tenemos que hacer es obtener un índice entre 0 y el número de casillas de este array. Entonces, el valor aleatorio hexadecimal será lo que haya en el array en la casilla cuyo índice se ha obtenido aleatoriamente. Esto se hace de esta manera:

let posarray = aleatorio(0, hexadecimal.length);
let valor_hexadecimal_aleatorio = hexadecimal[posarray];

En la primera línea se obtiene el índice del array aleatorio, que está entre 0 y el número de posiciones del array. En la segunda valor_hexadecimal_aleatorio se obtendrá accediendo al array, en la posición generada aleatoriamente.

Obtener el color aleatorio

Ahora que ya hemos visto una manera de obtener un valor hexadecimal aleatorio, vamos a ver cómo obtener un color aleatorio, que no es más que obtener 6 valores hexadecimales aleatorios y concatenarlos.

let hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
let color_aleatorio = "#";
for (i=0;i<6;i++){
   let posarray = aleatorio(0, hexadecimal.length)
   color_aleatorio += hexadecimal[posarray]
}

Después de la ejecución de este código, la variable color_aleatorio contendrá el color generado aleatoriamente.

Función que genera colores aleatorios

Para mejorar el código anterior y poder reutilizarlo, vamos a ver cómo se puede poner todo esto en una función, que podremos utilizar en cualquier contexto.

function colorAleatorio() {
    let hexadecimal = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
    let color_aleatorio = "#";
    for (i = 0; i < 6; i++) {
      let posarray = aleatorio(0, hexadecimal.length)
      color_aleatorio += hexadecimal[posarray]
    }
    return color_aleatorio
}

Recuerda que esa función se basa en la función que vimos al principio de generar valores enteros aleatorios, por lo que si la vas a usar necesitarás incluir ambas funciones.

Práctica DOM para generar elementos de la página con colores aleatorios

Ahora, para acabar queremos hacer una práctica de manejo del DOM de Javascript en la que veremos cómo generar una serie de elementos de la página con colores aleatorios. Para ello vamos a generar al vuelo una serie de elementos <div> donde cada uno de ellos tendrá el color de fondo aleatorio.

En este artículo no queremos introducirnos demasiado en el manejo del DOM, para lo que tienes otros talleres relacionados y explicaciones en el manual de Javascript. Lo que queremos que sea más relevante es la posibilidad de usar esta función en el contexto de una página web.

La función que usaremos para generar al vuelo un elemento <div> con el color aleatorio será la siguiente:

function insertaElementColor() {
  let elementoColor = document.createElement('div');
  let color = colorAleatorio();
  elementoColor.innerText = color;
  elementoColor.style = 'background-color: ' + color;
  document.body.appendChild(elementoColor);
}

• Crea un elemento <div> al vuelo con document.createElement('div')
• Crea una variable con el color aleatorio, usando la función explicada en este artículo
• Luego introduce el color como texto del elemento con la propiedad innerText
• Luego cambia el estilo del elemento para colocar ese color de fondo, usando la propiedad style, que acepta un CSS
• Por último se añade el elemento al cuerpo de la página con document.body.appendChild(elementoColor).

Si queremos generar 50 elementos con colores aleatorios simplemente tendremos que llamar 50 veces a esta función.

for(let i = 1; i < 50; i++) {
  insertaElementColor();
}

Te dejamos el código completo de una página web que genera los colores aleatorios, para que lo puedas ver de manera global y si lo deseas copiar y pegar el código en un archivo en tu ordenador para poder probarlo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Generar colores aleatorios en Javascript</title>
    <style>
      div {
        margin-bottom: 0.2rem;
        padding: 0.1rem;
        font-weight: bold;
      }
    </style>
</head>
<body>
    <h1>Colores aleatorios con Javascript</h1>
    <p>Aquí tienes una lista de 50 colores aleatorios</p>
    <script>
      
      function aleatorio(inferior, superior) {
          let numPosibilidades = superior - inferior;
          let aleatorio = Math.random() * numPosibilidades;
          aleatorio = Math.floor(aleatorio);
          return parseInt(inferior) + aleatorio;
      }

      function colorAleatorio() {
          let hexadecimal = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
          let color_aleatorio = "#";
          for (i = 0; i < 6; i++) {
            let posarray = aleatorio(0, hexadecimal.length)
            color_aleatorio += hexadecimal[posarray]
          }
          return color_aleatorio
      }
      
      function insertaElementColor() {
        let elementoColor = document.createElement('div');
        let color = colorAleatorio();
        elementoColor.innerText = color;
        elementoColor.style = 'background-color: ' + color;
        document.body.appendChild(elementoColor);
      }
      
      for(let i = 1; i < 50; i++) {
        insertaElementColor();
      }

    </script>
</body>
</html>

Variaciones de la función de color aleatorio

Con la base de la función que hemos visto podemos hacer fácilmente algunas variaciones para que los componentes del color se calculen de manera menos aleatoria, con lo que consiguamos siempre colores dentro de unas tonalidades.

Por ejemplo, podrías necesitar colores azules muy claros, en cuyo caso el componente azul del RGB podría ser siempre "FF" y los componentes verde y rojo ser valores muy altos. En un caso como ese podríamos tener un color aleatorio definido con esta función:

function azulClaroAleatorio() {
    let hexadecimalAlto = new Array("D", "E", "F");
    let hexadecimalMuyAlto = new Array("E", "F");
    let azul = "#";
    for (i = 0; i < 2; i++) {
      let posarray = random(0, hexadecimalAlto.length - 1);
      azul += hexadecimalAlto[posarray];
    }
    for (i = 0; i < 2; i++) {
      let posarray = random(0, hexadecimalMuyAlto.length - 1);
      azul += hexadecimalAlto[posarray];
    }
    return azul + "FF";
}

Puedes ver que usamos el array hexadecimalAlto como valores hexadecimales para componer la componente roja del RGB y hexadecimalMuyAlto para la componente verde. Esto es porque quiero asegurarme que casi siempre haya más verde que rojo, ya que si no es así el color azul tiende a morado claro y prefiero que tienda a turquesa. Esto es una cuestión mía y demuestra lo personalizable que podría ser el conjunto de tonalidades aleatorias que podrías generar.

Si quieres ver una aplicación de este sistema de generación de colores aleatorios te dejamos el enlace a un artículo que explica cómo crear una página que cambia de color cada vez que se refresca.