Cómo generar colores de fondo aleatorios con JavaScript

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

En este tutorial aprenderás cómo cambiar el color de fondo de una página aleatoriamente usando JavaScript. También aprenderás cómo modificar tu código usando valores de color HSL para generar solamente colores pastel o colores oscuros.

Echemos un vistazo a lo que estaremos creando:

Please accept marketing cookies to load this content.

En esta demostración, cambiamos el color del fondo y el color del texto de la página cada 1500ms. La mayor parte del trabajo pesado se lleva a cabo usando JavaScript, pero echemos un vistazo al contenido y al estilo:

HTML

Para el contenido de nuestra página, crearemos un elemento con un id background y colocaremos algo de texto en él.

<main id="background"> 
  <h1>
    Generate Random Background Colors with JavaScript
  </h1>
</main>

CSS

Usaremos CSS para controlar la transición background-color y así lograr que el cambio se vea más suave.

1	main {
2	transition: background 1s;
3	}

JavaScript

Vamos a generar colores aleatorios en JavaScript combinando estos dos métodos:

Notación de color HSL, y
La biblioteca Math

"La notación funcional hsl() expresa un color dado en base a sus componentes de tono, saturación y luminosidad" (MDN)

El valor de tono tiene un máximo de 360 y representa el grado de la posición del color en una rueda de colores. Los valores de saturación y luminosidad tienen un máximo de 100 y representan el porcentaje de saturación y luminosidad de un color, respectivamente.

Juega con los rangos a continuación para ver cómo es que los valores de tono, saturación y luminosidad afectan la apariencia de un color.

Please accept marketing cookies to load this content.

Para generar colores completamente aleatorios, vamos a enviar números aleatorios dentro de un rango fijo a los tres valores HSL. Podemos hacer esto usando Math.random y Math.floor.

Math.random genera números aleatorios entre 0 y 1. Podemos multiplicar estos números por nuestro rango especificado y usar Math.floor para redondear al número entero más cercano.

1	const getRandomNumber = (maxNum) => {
2	return Math.floor(Math.random() * maxNum);
3	};

Luego usaremos la función getRandomNumber para generar valores aleatorios para nuestra notación HSL.

const getRandomColor = () => {
  const h = getRandomNumber(360);
  const s = getRandomNumber(100);
  const l = getRandomNumber(100);

  return `hsl(${h}deg, ${s}%, ${l}%)`;
};

Finalmente, enviamos el color generado aleatoriamente a nuestro elemento "background".

1	const setBackgroundColor = () => {
2	const randomColor = getRandomColor();
3	document.getElementById("background").style.backgroundColor = randomColor;
4	}

Esto nos permite establecer un color aleatorio para nuestro fondo.

Aplicar el nuevo color

Podemos decidir si queremos cambiar el color de fondo cada vez que el usuario cargue la página, o bien de manera regular en un intervalo establecido, enviando el código anterior a una función onLoad o setInterval.

1	window.onload = () => {
2	setBackgroundColor()
3	};

1	setInterval(() => {
2	setBackgroundColor();
3	}, 1500);

Aquí puedes ver el código JavaScript terminado:

const background = document.getElementById("background");

const getRandomNumber = (maxNum) => {
  return Math.floor(Math.random() * maxNum);
};

const getRandomColor = () => {
  const h = getRandomNumber(360);
  const s = getRandomNumber(100);
  const l = getRandomNumber(100);

  return `hsl(${h}deg, ${s}%, ${l}%)`;
};

const setBackgroundColor = () => {
  const randomColor = getRandomColor();
  background.style.backgroundColor = randomColor;
  background.style.color = randomColor;
};

setBackgroundColor();

setInterval(() => {
  setBackgroundColor();
}, 1500);


Please accept marketing cookies to load this content.

En la demostración anterior, podemos ver que el color del texto también cambia aleatoriamente pero de manera invertida, para que siga siendo legible con respecto al fondo. Esto se hace usando CSS.

Invierte colores de texto con CSS

Primero enviamos el mismo color que tiene el fondo para el color del texto en nuestra función setBackgroundColor.

const setBackgroundColor = () => {
  const randomColor = getRandomColor();
  background.style.backgroundColor = randomColor;
  background.style.color = randomColor;
};

Luego usamos el filtro invert de CSS para asegurarnos de que el color del texto contraste con el fondo.

h1 {
  -webkit-filter: invert(100%);
  filter: invert(100%);
  transition: color 1s;
}

Cómo generar colores pastel aleatoriamente

Un beneficio del uso de valores de color HSL es que podemos controlar qué tan saturados o brillantes son los colores generados aleatoriamente. De esta manera podemos modificar nuestro código para generar solamente colores pastel.

Please accept marketing cookies to load this content.

Hacemos esto estableciendo un valor fijo de 100% para la saturación y un valor de 90% para la luminosidad. Nuestro código actualizado se ve de esta manera:

const getRandomPastelColor = () => {
  const h = getRandomNumber(360);

  return `hsl(${h}deg, 100%, 90%)`;
};

Cómo generar colores oscuros aleatoriamente

Podemos aplicar la misma lógica para generar colores más oscuros.

Please accept marketing cookies to load this content.

const getRandomDarkColor = () => {
  const h = getRandomNumber(360);

  return `hsl(${h}deg, 50%, 10%)`;
};

Conclusión

Este tutorial te ha enseñado principalmente cómo generar colores aleatorios con JavaScript, pero también debería haberte proporcionado una buena noción sobre la notación HSL para colores, además del uso de la biblioteca Math para generar números.

¡No dudes en aplicar esto a un proyecto en el que estés trabajando para enriquecer tu página!

Aprende habilidades de JavaScript

Tenemos una amplia gama de tutoriales de JavaScript de nivel principiante a intermedio que te enseñan conocimientos básicos y habilidades prácticas.