Creo tiempo usando toLocaleString() y luego uso este código para cambiar el color cada segundo, pero solo funciona el último color, no para todos.
var time=document.getElementById("time"); setInterval(function() { var da=new Date(); var ti=da.toLocaleTimeString(); // console.log("yes"); time.innerHTML=ti; }, 1000); setInterval(function() { var arr=["red","blue","green"]; var i=Math.floor(Math.random() * 2) + 1; // console.log(i); time.style.color=time.classList.add(arr[i]); console.log(i); }, 1000);Puedes probar este truco para lograr el requisito que tienes.
Para obtener los colores en secuencia, intente esto :
var time=document.getElementById("time"); var arr=["red","blue","green"]; let index = 0; setInterval(function() { var da = new Date(); var ti = da.toLocaleTimeString(); time.innerHTML = ti; time.style.color = arr[index]; if (index < arr.length) { index++; } else { index = 0 } }, 1000); <div id="time"></div>Para obtener el color aleatorio de una matriz, intente esto :
var time=document.getElementById("time"); var arr=["red","blue","green"]; setInterval(function() { var da = new Date(); var ti = da.toLocaleTimeString(); time.innerHTML = ti; const index = Math.floor(Math.random() * arr.length); time.style.color = arr[index]; }, 1000); <div id="time"></div>