Dieser Artikel ist Teil einer Serie:

  1. CSS-Counter
  2. Border-Image
  3. Box-Shadow
  4. Box-Si­zing
  5. Die Rückkehr der Tabellen
  6. CSS-Transforms
  7. Die Appearance-Eigenschaft
  8. Der General Sibling Com­bi­na­tor
  9. font-size-adjust
  10. Farben mit RGBA und HSL(A)
  11. Schat­ten­ef­fek­te

Moderne Browser lassen uns nicht nur Schatteneffekte für Texte mit CSS zaubern, sondern sie führen auch zwei neue Möglichkeiten der Farbangabe an. Altbekannt sind die hexadezimale Schreibweise im Stile von #FF000, die RGB-Angabe rgb(255,0,0) oder auch der Farbname (z.B. red). Neuere Versionen von Firefox Opera und Safari können aber noch mehr als das: Sie wissen was RGBA, HSL und HSLA bedeuten.

Was bedeutet das A in RGBA und HSLA?

Das A steht für Alphakanal, also einen zusätzliche Angabe, der die Deckkraft einer Farbe regelt. Bei Farbangaben in RGBA und HSLA ist es also möglich, der Farbe direkt Teiltransparenz mitzugeben; mit der alten hexadezimalen Farbdefinition haben wir diese Möglichkeit nicht. Da könnte man höchstens versuchen, ganze HTML-Elemente mittels opacity transparent zu machen, aber das will man ja nicht immer. Das A in RGBA und HSLA ist also eine durchaus interessante Option.

Wie benutzt man RGBA?

RGBA-Angaben notiert man im Prinzip genau wie einen RGB-Wert, nur hängt man als letzten Wert eine Deckkraft zwischen 0 und 1 an. Beispiel:

.rot_transparent {
	color:rgba(255, 0, 0, 0.25);
}

Demo

Das funktioniert bei allen Farbangaben gleich, egal ob für Textfarbe, Hintergrund oder Border.

Und was bedeutet HSL?

HSL ist, vereinfacht gesagt, eine andere Möglichkeit, Farbwerte auszudrücken. Die drei Buchstaben stehen für Hue, Saturation, Luminance (Farbton, Sättigung, Helligkeit) und machen das manuelle Justieren von Farben um einiges leichter als andere Modelle. Will man beispielsweise in RGB eine Farbe abdunkeln, muss man zwei Werte bearbeiten, bei HSL braucht man nur an einem, am Helligkeitswert zu drehen.

Für genauere Informationen sei der Wikipedia-Artikel zum HSV-Farbraum empfohlen (HSL ist eine Variante von HSV).

Wie benutzt man HSL(A)?

HSLA benutzt man im Prinzip genau wie RGBA, wobei die H zwischen 0 und 360 zu liegen hat und die Werte S und L als Prozente anzugeben sind. Beispiel für HSL:

.hsl_gruen {
	color:hsl(120, 100%, 50%);
}

Für HSLA hängt man wie bei RGBA einen einen Alphawert zwischen 1 und 0 an:

.hsl_gruen_transparent {
	color:hsla(120, 100%, 50%, 0.25);
}

Demo

Auch hier gilt: sowohl Texte als auch Hintergründe und Rahmen lassen sich gleichermaßen mit HSL(A) einfärben.

Welche Browser können etwas mit RGBA und HSL(A) anfangen?

Firefox 3 und der aktuelle Safari verstehen RGBA, HSL und HSLA problemlos, in Opera funktioniert zumindest HSL. Im Internet Explorer, wen wundert es, funktioniert gar nichts von all dem.

Dieser etwas löchrige Support muss kein (großes) Problem sein, denn es gibt auch hier die Möglichkeit progressive enhancement anzuwenden. Für den IE kann man mit CSS-Hacks oder Conditional Comments ein Fallback definieren und auch für Opera gibt es passende Hacks. Wenn modernes HSLA-Grün nicht funktioniert, bekommen die Nutzer von Opera und Internet Explorer eben normales RGB-Grün vorgesetzt und alles läuft wie gehabt.

Dann wollen wir alle mal anfangen und an HSL zu gewöhnen …