Farben in CSS

vom 14.09.2002 von Mark Manns

Farbe kommt in CSS an vielen Stellen vor: color für die Schrift, background-color für den Hintergrund, border-color für Rahmen. Spannender als das Wo ist das Wie, denn für die Werte gibt es mehrere Schreibweisen.

Die Schreibweisen

CSS-Code

color: teal;                    /* Farbname */
color: #008080;                 /* Hexwert */
color: rgb(0, 128, 128);        /* Rot, Grün, Blau */
color: hsl(180, 100%, 25%);     /* Farbton, Sättigung, Helligkeit */
color: rgba(0, 128, 128, 0.5);  /* dasselbe, halb durchsichtig */

Welche nehmen?

• Hex (#RRGGBB) ist der Alltagsstandard: kompakt, überall verstanden, von jedem Farbwähler kopierbar. Je zwei Zeichen für Rot, Grün und Blau von 00 bis FF. #000000 ist Schwarz, #FFFFFF Weiß, und das Desktop-Teal dieser Seite ist #008080.
• rgb() sagt dasselbe in Dezimalzahlen von 0 bis 255. Geschmackssache.
• hsl() denkt wie ein Mensch: Farbton als Winkel im Farbkreis, dann Sättigung und Helligkeit. Ideal um Abstufungen zu bauen, hellere Variante gefällig? Nur den letzten Wert anhebn.
• Farbnamen wie red, teal oder rebeccapurple sind nett für Tests. Für echte Projekte zu grob, es gibt nur rund 150 davon.
• Transparenz liefert der vierte Wert (0 = unsichtbar, 1 = deckend), als rgba(), hsla() oder Hex mit acht Zeichen.

Kontrast: Farben müssen lesbar sein

Hellgrau auf Weiß sieht elegant aus und ist für viele Menschen schlicht unlesbar. Als Richtwert gilt ein Kontrastverhältnis von mindestens 4,5 zu 1 zwischen Text und Hintergrund, prüfen lässt sich das mit jedem Kontrast-Checker im Netz. Auch dieses Wiki hat dafür geschummelt: Das klassische Linkblau wäre auf dem Fenstergrau zu schwach gewesen und wurde einen Tick nachgedunkelt. Sieht aus wie 1998, besteht aber den Test von heutte.

Typische Fehler

• Information nur über Farbe transportieren ("rot markierte Felder sind Pflicht"). Farbenblinde Menschen sehen den Unterschied nicht, es braucht zusätzlich Text oder Symbol.
• Zwanzig Farbwerte wild übers Stylesheet verstreuen. Besser einmal zentral definieren, wie das geht zeigen die CSS-Variablen.

Weiter im Lernpfad: Schriftarten · Verwandt: CSS-Variablen