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

Ver demo en vivo

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, y en este artículo te lo explico paso a paso.

Te voy a mostrar cómo cambiar el color de fondo según el tiempo en JavaScript, usando la hora, los minutos y los segundos para generar colores hexadecimales dinámicos en tiempo real, sin librerías externas.

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 cada cierto intervalo
Dependa de una condición temporal real (hora, minuto o segundo)
Funcione sin intervención del usuario ni recarga de página

La clave está en combinar el objeto Date de JavaScript con un temporizador recursivo que refresque el color cada 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 del elemento deseado.

Cambiar el color del body dinámicamente

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

Esto cambia el fondo de toda la página de forma inmediata. Es el punto de partida para cualquier fondo dinámico: una sola línea que te da control total sobre el estilo visual del body.

Cambiar el color de fondo de un div específico

Si no quieres afectar a toda la página, puedes apuntar a un elemento concreto usando getElementById y modificar su propiedad backgroundColor:

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. El objeto Date() nos da acceso a horas, minutos y segundos en tiempo real; a partir de ahí podemos construir el color que necesitamos. 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, almacenando la hora, los minutos y los segundos en sus propias variables:

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

Luego normalizamos los valores. Un color hexadecimal válido tiene exactamente seis dígitos, y los métodos getHours(), getMinutes() y getSeconds() devuelven números de una sola cifra cuando el valor es menor a 10. Por eso añadimos un cero por delante según sea el caso, garantizando que el hexadecimal resultante siempre tenga el formato correcto:

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

Generamos el color hexadecimal concatenando el símbolo # con la hora, los minutos y los segundos. El resultado es un string como #142305, que el navegador interpreta directamente como un color válido:

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

Cambiamos el color de fondo del documento completo asignando ese valor a la propiedad background del body:

document.body.style.background = color;

Finalmente, mostramos el código hexadecimal en pantalla usando innerHTML sobre el elemento con id hexadecimal, para que el usuario pueda verlo en tiempo real:

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 definimos la función completa y la encadenamos recursivamente con un temporizador.

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 automáticamente

En mi implementación opté por setTimeout porque me permite un control más fino sobre la ejecución continua. Al colocarlo al final de la función, la siguiente llamada no se programa hasta que la iteración actual termina, evitando acumulaciones inesperadas.

Invocamos la función ya definida cada segundo pasándole 1000 milisegundos como segundo argumento. Esto hace que el color de fondo se actualice una vez por segundo de forma continua:

setTimeout(MostrarTiempoColor, 1000);

Diferencias entre setTimeout y setInterval para fondos dinámicos

Ambas funciones permiten ejecutar código de forma repetida, pero no se comportan igual:

setInterval: ejecuta la función cada X milisegundos sin esperar a que termine la iteración anterior. En funciones rápidas no hay problema, pero puede generar solapamientos.
setTimeout recursivo: se encadena solo cuando la función termina, lo que lo hace más estable y predecible en procesos continuos.

Para fondos dinámicos en tiempo real, prefiero setTimeout porque garantiza que no se acumulen llamadas si el navegador está bajo carga.

Ver demo en vivo

Ejemplo completo: cambiar el fondo según la hora actual

Este es el ejemplo completo y funcional. Puedes copiarlo directamente en un archivo .html y abrirlo en el navegador para ver cómo el fondo cambia solo, segundo a segundo:

<!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 en proyectos reales para cosas como:

Relojes visuales donde el color forma parte de la lectura de la hora
Fondos reactivos que refuerzan la identidad visual de una app
Experimentos creativos y portfolios interactivos
Modo día / noche automático basado en la hora local del usuario
Landing pages dinámicas que generan una primera impresión distinta en cada visita

Además, al depender del tiempo local del navegador, el comportamiento es completamente predecible y consistente: no necesitas servidores, bases de datos ni nada externo.

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

Sí… siempre que estén en la misma zona horaria y accedan al mismo segundo.

Recuerda que Date() usa la hora local del dispositivo del usuario, no la del servidor. Esto significa que:

Dos usuarios en la misma zona horaria que entren al mismo segundo verán exactamente el mismo color
Un usuario en otra zona horaria verá el color que corresponde a su hora local

Este enfoque es muy similar a soluciones de sincronización basadas en tiempo, con la ventaja de que no requiere ni servidores ni WebSockets: todo corre en el cliente.

Errores comunes al cambiar el color de fondo con JavaScript

Algunos fallos típicos que he visto (y cometido) cuando se empieza con este tipo de efectos:

No normalizar valores de una sola cifra: si h vale 9, el color generado sería #94500, que tiene solo cinco caracteres y no es un hexadecimal válido.
Generar colores hex inválidos: el navegador simplemente ignora valores mal formados, dejando el fondo sin cambiar.
Usar setInterval sin control: si la función tarda más de lo esperado o el navegador acumula tareas, pueden crearse llamadas duplicadas.
Actualizar estilos innecesariamente: si el color no cambia entre dos ejecuciones en el mismo segundo, reasignar style.background genera un repintado inútil.
No probar en distintos navegadores: aunque la API Date es estándar, los comportamientos de repintado y rendimiento pueden variar ligeramente.

Evitar estos errores marca la diferencia entre un demo rápido y un código listo para producción.

Preguntas frecuentes sobre cambiar el fondo con JavaScript (FAQ)

¿Consume muchos recursos cambiar el fondo cada segundo?
- No. Modificar style.background es una operación muy ligera para el navegador. Solo implica un repintado (repaint), no un reflow, así que el impacto en rendimiento es mínimo.
¿Es mejor JavaScript o CSS para cambiar el fondo automáticamente?
- Si el cambio depende del tiempo real, JavaScript es la única opción viable. CSS solo puede animar entre valores predefinidos, no reaccionar a datos externos en tiempo de ejecución.
¿Funciona en todos los navegadores modernos?
- Sí. La API Date y los métodos setTimeout e getElementById están soportados en prácticamente todos los navegadores, incluidos los más antiguos.
¿Puedo animar la transición entre colores?
- Sí. Basta con añadir una transición CSS sobre la propiedad background: transition: background 1s ease;. El navegador interpolará suavemente entre el color anterior y el nuevo.

Conclusión

Cambiar el color de fondo según la hora con JavaScript es una técnica sencilla pero muy potente. A partir de algo tan básico como la hora actual puedes construir 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 CSS, animaciones de transición o incluso datos externos como la previsión meteorológica. Pero como base, este método es sólido, claro y fácil de mantener. Una buena excusa para entender cómo JavaScript interactúa con el DOM y el tiempo del sistema.