unterschiedliche Farben im Text

[Gary]

Abend zusammen

Für eine "Füllstandsanzeige" die ich mit eckigen Klammern baue, bräuchte ich verschiedene Farben.

Die Anzeige soll so aussehen:

[][][][][][][][][][][][][][][][][][][][][]

Am Anfang natürlich rot, dann orange,gelb bis zu grün.

In HTML z.B so:

<p class="rot">[][][][][][][][][][][][][][][][]</p>
Dann wäre aber alles rot :-(

Wie formatiere ich Zeichen die in einer Linie stehen mit unterschiedlichen Farben. Ich kann momentan immer nur die Farben in einer Zeile (P-Element) ändern, aber nicht nacheinander. Also die ersten vier [] in rot, dann die nächten acht in orange usw....

Gibt es da einen Trick?

Gruß

Gary