¿Cómo cambiar el color de fondo progresivamente según la hora o tiempo con JavaScript?

29-12-2025 - 👤 Andrés Cruz

Cambiar el color de fondo con JavaScript es algo bastante común, pero cuando empiezas a hacerlo de forma automática y basada en el tiempo, la cosa se vuelve mucho más interesante. En uno de mis proyectos necesitaba que el fondo de la página cambiara constantemente, reflejando la hora actual, sin botones ni interacción del usuario. A partir de ahí surgió este enfoque.

En este artículo te voy a mostrar cómo cambiar el color de fondo con el tiempo en JavaScript, usando la hora, los minutos y los segundos para generar colores dinámicos en tiempo real.

Introducción: fondos dinámicos con JavaScript

Cuando hablamos de cambiar el fondo “con el tiempo”, no nos referimos a hacer clic en un botón, sino a que el color:

Se actualice automáticamente
Cambie cada cierto intervalo
Dependa de una condición temporal (hora, minuto o segundo)

Cómo cambiar el color de fondo con JavaScript

En JavaScript, cambiar el color de fondo es bastante directo. Basta con acceder al DOM y modificar la propiedad background o backgroundColor.

Cambiar el color del body dinámicamente

document.body.style.background = 'red';

Esto cambia el fondo de toda la página. Es el punto de partida para cualquier fondo dinámico.

Cambiar el color de fondo de un div específico

document.getElementById("contenedor").style.backgroundColor = "blue";

Obtener la hora actual con JavaScript usando Date()

Aunque CSS permite animaciones y transiciones, JavaScript es la mejor opción cuando el cambio depende de datos dinámicos como la hora actual. En mi caso, necesitaba un fondo que evolucionara segundo a segundo sin intervención del usuario.

Generar un color hexadecimal a partir del tiempo

Crearemos una función llamada MostrarTiempoColor() cuyo contenido será el siguiente:

Primero creamos un objeto de tipo Date() para obtener la hora actual (hora, minutos y segundo):

d = new Date();
h = d.getHours();
m = d.getMinutes();
s = d.getSeconds();

Esta sección de código JavaScript permite convertir un número (la hora, minuto y/o segundo) de una sola cifra a dos; agregandoles un cero adelante según sea el caso; de esta forma poder formar un hexadecimal compuesto de seis dígitos sin importar la hora; como podemos ver, los números a tratar corresponden a la hora actual (la hora, minuto y segundo):

if(h <= 9) h = '0'+h;
if(m <= 9) m = '0'+m;
if(s <= 9) s = '0'+s;

Generamos el color combinando la hora, los minutos y segundos:

color = "#"+h+m+s;

Cambiamos el color de fondo de algún elemento; en nuestro ejemplo, el color del mismo documento HTML:

document.body.style.background = color;

Insertamos el código del color hexadecimal generado anteriormente:

document.getElementById("hexadecimal").innerHTML = color;

Cambiar el color de fondo automáticamente cada segundo

Ahora toca hacer que el fondo se actualice constantemente. Para eso usamos una función y la ejecutamos de forma recurrente.

function MostrarTiempoColor() {
 const d = new Date();
 let h = d.getHours();
 let m = d.getMinutes();
 let s = d.getSeconds();
 if (h <= 9) h = '0' + h;
 if (m <= 9) m = '0' + m;
 if (s <= 9) s = '0' + s;
 const color = "#" + h + m + s;
 document.body.style.background = color;
 document.getElementById("hexadecimal").innerHTML = color;

Usar setTimeout para actualizar el color

En mi implementación opté por setTimeout porque me permite un control más fino sobre la ejecución continua.

Invocamos a la función ya definida cada segundo con el método provisto por JavaScript llamado setTimeout; lo que significa actualizamos el color de fondo cada segundo:

setTimeout(MostrarTiempoColor, 1000);

Diferencias entre setTimeout y setInterval

setInterval: ejecuta sin esperar a que termine la función
setTimeout: se encadena, más estable en procesos continuos

Para fondos dinámicos en tiempo real, prefiero setTimeout.

Ver demo

Ejemplo completo: cambiar el fondo según la hora del día

Este es el ejemplo completo y funcional:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Fondo dinámico con JavaScript</title>
</head>
<body onload="MostrarTiempoColor()">
 <h1>Color actual:</h1>
 <div id="hexadecimal"></div>
 <script>
   function MostrarTiempoColor() {
     const d = new Date();
     let h = d.getHours();
     let m = d.getMinutes();
     let s = d.getSeconds();
     if (h <= 9) h = '0' + h;
     if (m <= 9) m = '0' + m;
     if (s <= 9) s = '0' + s;
     const color = "#" + h + m + s;
     document.body.style.background = color;
     document.getElementById("hexadecimal").innerHTML = color;
     setTimeout(MostrarTiempoColor, 1000);
   }
 </script>
</body>
</html>

Casos de uso reales para fondos dinámicos con JavaScript

Este tipo de fondo no es solo un experimento visual. Yo lo he usado para:

Relojes visuales
Fondos reactivos
Experimentos creativos
Modo día / noche automático
Landing pages dinámicas

Además, al depender del tiempo, el comportamiento es predecible y consistente.

¿Este cambio de color es igual para todos los usuarios?

Sí… siempre que usen la misma hora.

Cada usuario ve el color correspondiente a su hora local. Esto significa que:

Si dos usuarios entran al mismo segundo, verán el mismo color
Si entran más tarde, verán el color que corresponde a ese momento

Este enfoque es muy similar al planteado en soluciones de sincronización basadas en tiempo, sin necesidad de servidores ni websockets.

Errores comunes al cambiar el color de fondo con JavaScript

Algunos fallos típicos que he visto (y cometido):

No normalizar valores de una sola cifra
Generar colores hex inválidos
Usar setInterval sin control
Actualizar estilos innecesariamente
No probar en distintos navegadores

Evitar estos errores marca la diferencia entre un demo y un código sólido.

Preguntas frecuentes sobre cambiar el fondo con JavaScript (FAQ)

¿Consume muchos recursos cambiar el fondo cada segundo?
- No. Es un cambio muy ligero para el navegador.
¿Es mejor JavaScript o CSS para esto?
- Si depende del tiempo real, JavaScript es la mejor opción.
¿Funciona en todos los navegadores?
- Sí, incluso en navegadores antiguos.
¿Puedo animar el cambio de color?
- Sí, usando transiciones CSS sobre el background.

Conclusión

Cambiar el color de fondo con el tiempo en JavaScript es una técnica sencilla pero muy potente. A partir de algo tan básico como la hora actual puedes crear fondos dinámicos, visuales y únicos, sin librerías externas y con muy poco código.

Si quieres ir un paso más allá, puedes combinar este enfoque con degradados, animaciones o incluso datos externos. Pero como base, este método es sólido, claro y fácil de mantener.

Acepto recibir anuncios de interes sobre este Blog.

Aprende cómo cambiar el color de fondo con el tiempo en JavaScript de forma dinámica y automática. Guía paso a paso para crear fondos reactivos basados en la hora actual sin intervención del usuario.

29-12-2025 | 👤 Andrés Cruz

🇺🇸 In english