usar variable en html

[jhus]

Os comento a ver si se puede hacer.
Tengo un css en el que asigno los coleres de una barras <hr>


#barra1 {color: #ffffff;}
#barra2 {color: #000000;}

por ejemplo

por quiere que cada vez que entren en la web la barra varie de color

Por otro lado tengo el htm en el que pongo el script con el random para que varie.
y en ese mismo htm tengo lo siguiente:

<hr id="barra1">

Si lo pongo asi, me funciona, pero como pongo el codigo de script.

he probado a crear una variable
var barra_aleatoria = barra2;

por probar sin hacer el random y no hay manera.

Es que no se puede hacer?.
A lo mejor no pongo bien el código?

Gracias por colaborar. Un saludo.