Stil mit {stil}

Aug 2008

CSS color • Farbe von Schrift und Rahmen

Farben gehören zu den wichtigsten Gestaltungsmitteln des Webdesigns. Für fast alle HTML-Elemente können Schriftfarben, die Farben von Rahmen sowie Hintergrundfarben mit den CSS-Eigenschaften color und background vereinbart werden. Die CSS-Eigenschaft color definiert die Farben von Schriften und Rahmen, die CSS-Stile für background belegen die Hintergrundfarbe eines Elements. Beide Eigenschaften greifen auf dieselben Techniken zur Angabe der Farbe zurück:

• Farbe als Hexcode
• Angabe als Farbname
• Farbe in RGB-Schreibweise
• Angabe als Farbton, Helligkeit und Sättigung (nicht von allen Browsern unterstützt)

Farben als Hexcode

Die gebräuchlichste und älteste Technik ist die Zuweisung eines Hexcodes für die drei Farben, aus denen alle Farben gemischt werden – Rot, Grün und Blau.

color: #9ab8a9;
        ^ ^ ^
        | | +----- Blau-Wert
        | +----- Grün-Wert
        +----- Rot-Wert

Das ist wenig intuitiv und gleichzeitig fehlerträchtig. Da hilft es auch nicht, dass der sechsstellige Hex-Code abgekürzt werden darf, wenn je zwei Werte in allen drei gleich sind:

color: #aabbcc;
color: #abc;

geben dieselbe Farbe an.

Farben als RGB-Werte

Etwas intuitiver (aber nicht wirklich viel intuitiver) ist die Schreibweise als RGB-Wert:

color: rgb(154,184,169);

Der hohe Wert für den Grün-Wert deutet immerhin schon darauf hin, dass wir es hier mit einem grünlichen Ton von mittlerer Helligkeit zu tun haben.

HSL oder HSV

Die Angabe von Farben im HSL- oder HSV-Farbraum (Farbton, Sättigung und Helligkeit) wären viel intuitiver und unterstützen zudem die Zusammenstellung einer Farbpalette (indem z.B. Farben von gleicher Sättigung oder Helligkeit gewählt werden), aber bislang unterstützen nicht alle Browser die Angabe von HSL- oder HSV-Farben.

color: hsl(321,42%,35%);

Die erste Komponente bestimmt den Farbton (Hue), die zweite die Sättigung (Saturation) und die dritte die Helligkeit (Lightness oder Value) der Farbe.

• Der Farbton kann Werte zwischen 0 bis 360 annehmen,
• die Sättigung reicht von 0 bis 100%
• die Helligkeit reicht von 0 bis 100%, wobei 0% Schwarz und 100% Weiß erzeugen. Im HSL-Modell ist die Helligkeit 50% der »Normalwert«.

---

• Farbmuster 1, 2 und 3: Farbwinkel von 60° bei gleicher Helligkeit und Sättigung
• Farbmuster 3, 4 und 5: Gleicher Farbton, aber heller (4) und dunkler (5)

Bemerkung: Firefox wandelt HSL-Angaben direkt in RGB-Werte um, Safari stellt Farben tatsächlich im HSL-Raum dar. Die Farben werden zwar sowohl in RGB als auch in HSL gleich dargestellt, aber die HSL-Angaben können nicht als Basis für Berechnung dienen.

Die Angabe einer CSS-Farbe als HSL-Wert wird von Google Chrome, Firefox, Opera und Safari unterstützt, nicht aber von Internt Explorer.

Transparenz

So sollte es aussehen, wenn der Browser RGBA-Werte unterstützt und transparent Hintergründe und Farben darstellen kann.

Neben der RGB- und der HSL-Notation für CSS-Farben gibt es noch die Angabe von Farben in Form von RGBA- und HSLA-Werten. Das »A« bezeichnet eine vierte Komponente – den Alpha-Kanal, der die Transparenz einer Farbe als Dezimalwert zwischen 0 und 1 angibt.

background: rgba(220,160,140,0.5);

In Internet Explorer und Opera ist nur der graue Rahmen zu sehen – nur Google Chrome, Firefox und Safari interpretieren den Alpha-Kanal der RGB-Farbe und zeigen auch nicht die volle Farbe.

---

Websichere Farben und Farbnamen

Auch heute können wir nicht davon ausgehen, dass die Farben für Schriften, Rahmen und den Hintergrund auf allen Monitoren gleich dargestellt werden. Vor diesem Hintergrund entstand einst eine Palette von 16 (heute 17) »websicheren« Farben, die schon in den Anfängen von HTML und CSS zusätzlich als Farbnamen zur Verfügung standen. Der SVG-Standard (Scalable Vector Graphic) hat die Farbnamen durch mehr als 120 Farbnamen erweitert.

color: fuchsia;

Bei anderen als den websicheren Farben kann es zu Differenzen in der Darstellung auf dem Monitor kommen.

---

Farbe als PNG-Bild, als Hex-Code, als JPEG-Bild

color

IE4+ M1 N4+ O5+ S1 CSS1 Erblich: Ja

color

bestimmt die Farbe des Vordergrundes. Die Vorgabe ist Schwarz.

Werte

color

gibt die Farbe eines Elements als Schlüsselwort (z.B. red), als sechsstellige Hexadezimalzahl (#FFFFFF) oder als Tripel von drei RGB-Werten (255,255,255) an. Mit der Angabe von RGB- und Hexadezimal-Werten lassen sich 16,8 Mio. Farben deklarieren, während für die Verwendung von Farbnamen 17 Werte zur Verfügung stehen (CSS2.1):

aqua #00FFFF rgb(0,255,255)	gray #808080 rgb(128,128,128)	silver #C0C0C0 rgb(192,192,192)	navy #000080 rgb(0,0,128)
black #000000 rgb(0,0,0)	green #800000 rgb(128,0,0)	teal #008080 rgb(0,128,128)	olive #808000 rgb(128,128,0)
blue #0000FF rgb(0,0,255)	lime #00FF00 rgb(0,255,0)	white #FFFFFF rgb(255,255,255)	purple #800080 rgb(128,0,128)
fuchsia #FF00FF rgb(255,0,255)	lime #00FF00 rgb(0,255,0)	yellow #FFFF00 rgb(255,255,0)	red #FF0000 rgb(255,0,0)
orange #FFA500 rgb(255,165,0)

Beispiel: Farben zuweisen

.gruen { border: 1px solid silver; color: green; } 
p  { border: 1px solid silver; color: rgb(0,128,128); } 
h2 a { border: 1px solid #fff;  color: #808000; }

zurück zum Seitenanfang