7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. JavaScript

Cómo generar colores de fondo aleatorios con JavaScript

Read Time: 4 mins

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

En este tutorial aprenderás cómo cambiar el color de fondo de una página aleatoriamente usando JavaScript. También aprenderás cómo modificar tu código usando valores de color HSL para generar solamente colores pastel o colores oscuros.

Echemos un vistazo a lo que estaremos creando:

En esta demostración, cambiamos el color del fondo y el color del texto de la pá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 página, crearemos un elemento con un id background y colocaremos algo de texto en él.

CSS

Usaremos CSS para controlar la transición background-color y así lograr que el cambio se vea más suave.

JavaScript

Vamos a generar colores aleatorios en JavaScript combinando estos dos métodos:

  1. Notación de color HSL, y
  2. La biblioteca Math

"La notación funcional hsl() expresa un color dado en base a sus componentes de tono, saturación y luminosidad" (MDN)

El valor de tono tiene un máximo de 360 y representa el grado de la posición del color en una rueda de colores. Los valores de saturación y luminosidad tienen un máximo de 100 y representan el porcentaje de saturación y luminosidad de un color, respectivamente.

Juega con los rangos a continuación para ver cómo es que los valores de tono, saturación y luminosidad afectan la apariencia de un color.

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

Math.random genera números aleatorios entre 0 y 1. Podemos multiplicar estos números por nuestro rango especificado y usar Math.floor para redondear al número entero más cercano.

Luego usaremos la función getRandomNumber para generar valores aleatorios para nuestra notación HSL.

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

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 página, o bien de manera regular en un intervalo establecido, enviando el código anterior a una función onLoad o setInterval.

Aquí puedes ver el código JavaScript terminado:

En la demostración anterior, podemos ver que el color del texto tambié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 función setBackgroundColor.

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

Cómo generar colores pastel aleatoriamente

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

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

Cómo generar colores oscuros aleatoriamente

Podemos aplicar la misma lógica para generar colores más oscuros.

Conclusión

Este tutorial te ha enseñado principalmente cómo generar colores aleatorios con JavaScript, pero también debería haberte proporcionado una buena noción sobre la notación HSL para colores, además del uso de la biblioteca Math para generar números.

¡No dudes en aplicar esto a un proyecto en el que estés trabajando para enriquecer tu página!

Aprende habilidades de JavaScript

Tenemos una amplia gama de tutoriales de JavaScript de nivel principiante a intermedio que te enseñan conocimientos básicos y habilidades prácticas.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.