Stil mit {stil}

Mai 2011

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

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 Hexcode abgekürzt werden darf, wenn je zwei Werte in allen drei Paaren gleich sind:

color: #aabbcc; | color: #abc;

Farben als RGB-Werte

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

color: rgb(154,184,169); || color: #9AB8A9

Mit Hilfe eine Tabelle lassen sich RGB-Farben in Hex und umgekehrt umrechnen.

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; }

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

zurück zum Seitenanfang