Websiteentwicklung: CSS: Farben

Zurück zu numerische Angaben | Hoch zu CSS | Vor zu Cursor

In CSS können Farben für verschiedene Bestandteile eines Elements festgelegt werden: Text (color: …;), Hintergrund (background-color: …;) und Rahmen (border-color: …;). Farbdefinitionen können in CSS über einen Farbnamen oder einen numerischen Farbwert erfolgen.

Farbnamen

	Hinweis Der W3C CSS Standard ist nur auf 16 Farbnamen definiert. Ab CSS 3 werden jedoch alle SVG-Farbnamen offiziell verwendet werden dürfen.

Farbnamen in CSS 2.1

black	#000000	gray	#808080
maroon	#800000	red	#FF0000
green	#008000	lime	#00FF00
olive	#808000	yellow	#FFFF00
navy	#000080	blue	#0000FF
purple	#800080	fuchsia	#FF00FF
teal	#008080	aqua	#00FFFF
silver	#C0C0C0	white	#FFFFFF

Namen für Systemfarben in CSS 2

Die Systemfarben richten sich nach den System-Einstellungen des Nutzers. Man kann diese Farbangaben beispielsweise verwenden, um eine Seite zu erstellen, die der Benutzeroberfläche des Nutzers ähnlich sieht.

• activeborder
• activecaption
• appworkspace
• background
• buttonface
• buttonhighlight
• buttonshadow
• buttontext
• captiontext
• graytext
• highlight
• highlighttext
• inactiveborder
• inactivecaption
• inactivecaptiontext
• infobackground
• infotext
• menu
• menutext
• scrollbar
• threeddarkshadow
• threedface
• threedhighlight
• threedlightshadow
• threedshadow
• window
• windowframe
• windowtext

numerische Farbwerte

Die Notierung von numerischen Farbwerten kann in CSS in den Farbräumen RGB (Rot, Grün, Blau) und HSL (Farbton [hue], Sättigung [saturation], Helligkeit [lightness]) erfolgen. Die Angabe erfolgt als dezimaler- oder prozentualer Wert, bei RGB auch als Hexadezimalwert. Zusätzlich ist die Angabe eines Wertes für den Alpha-Kanal zur Darstellung der Transparenz möglich.

Hexadezimalwert

Ein hexadezimaler Farbwert stellt eine Farbe aus dem RGB-Farbraum dar, eingeleitet von einer Raute (#RRGGBB).

color: #ffff00;
color: #000000;
color: #ffffff;
color: #c0c0c0;

Wenn sich die Werte des jeweiligen RGB-Werts wiederholen, kann man auch eine verkürzte Variante schreiben.

color: #ffff00; /* ist das gleiche wie */
color: #ff0;
 
color: #aa6633 /*ist das gleiche wie*/
color: #a63;
 
color: #ca6633; /* kann jedoch nicht abgekürzt werden */
color: #ca63;   /* dies ist eine falsche Definition! */

RGB-Wert

Hierbei werden die jeweiligen RGB-Werte in Abstufungen von 0 bis 255 (256 Farbwerte pro Farbe) oder als prozentuale Angabe definiert.

color: rgb(255,255,0);
color: rgb(0,0,0);
color: rgb(255,255,255);
color: rgb(192,192,192);
 
/* entspricht: */
color: rgb(100%,100%,0%);
color: rgb(0%,0%,0%);
color: rgb(100%,100%,100%);
color: rgb(75%,75%,75%);
 
/* bei Prozenten kann auch mit Kommawerten gearbeitet werden */
color: rgb(7.5%,99.1%,33.3%);

HSL-Wert

Hierbei wird zuerst der Farbwert in Grad angegeben (0-360°) und anschließend die beiden Werte für Sättigung und Helligkeit als prozentuale Angabe.

/* Farben wie im obigen Beispiel */
color: hsl(60,100%,50%);
color: hsl(0,0%,0%);
color: hsl(0,0%,100%);
color: hsl(0,0%,75%);

Farbangaben mit Alpha-Wert

Für die Transparenz kann ein zusätzlicher vierter Wert für den Alpha-Kanal im Bereich zwischen 0 (vollkommen transparent) und 1 (deckend) als Kommazahl notiert werden. Hierbei werden außerdem die Schlüsselwörter rgb und hsl jeweils um ein a ergänzt. Die Angabe des Alpha-Kanals ist bei der Nutzung von hexadezimalen Werten nicht möglich.

/* Gelb mit 50% Deckkraft */
background: rgba(255,255,0,0.5);
background: hsla(60,100%,50%,0.5);

Verweise

• CSS Farb-Spezifikation auf w3.org
• Farbangaben auf selfhtml.org
• Farbtabelle einiger Schattierungen mit Farbfächer

Zurück zu numerische Angaben | Hoch zu CSS | Vor zu Cursor