Cambiar el color de un elemento hr

Creo que deberías usar border-color en lugar de color, si tu intención es cambiar el color de la línea producida por la etiqueta <hr>.

Aunque, se ha señalado en los comentarios que, si usted cambia el tamaño de su línea, el borde seguirá siendo tan ancho como usted especificó en los estilos, y la línea se llenará con el color por defecto (que no es un efecto deseado la mayoría de las veces). Así que parece que en este caso también tendría que especificar color de fondo (como @Ibu sugirió en su respuesta).

El proyecto HTML 5 Boilerplate en su hoja de estilos por defecto especifica la siguiente regla:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

Un artículo titulado "12 Little-Known CSS Facts", publicado recientemente por SitePoint, menciona que <hr>puede establecer su border-color a su padre's color si se especifica hr { border-color: inherit }.

hr
{
color: #f00;
color de fondo: #f00;
altura: 5px;
}

hr
{
  background-color: #123455;
}

el fondo es el que debe tratar de cambiar

También puedes trabajar con el color de los bordes. No estoy seguro de que haya problemas con los navegadores. Deberías probarlo en diferentes navegadores.