Websiteentwicklung: CSS: Farben

In CSS können Farben für verschiedene Bestandteile eines Elementes festgelegt werden. Bei blockbasierten Formaten wie (X)HTML etwa folgende: Text (color: …;), Hintergrund (background-color: …;) und Rahmen (border-color: …;).
SVG hat eine andere Struktur und Methode, wie ein Dokument präsentiert wird, daher decken sich die Eigenschaften nur teilweise mit diesen. In SVG gibt es etwa keine Rahmen und im Sinne von CSS auch keinen Hintergrund, daher haben diese Eigenschaften keinen Effekt, dafür aber zum Beispiel die Füllung und der Strich eines Elementes, fill und stroke.

Farbdefinitionen können in CSS über einen Farbnamen oder einen numerischen Farbwert mit spezieller Notation erfolgen.

Farbnamen

In CSS bis Version 2.0 sind nur die 16 Farbnamen von HTML 4 definiert. In CSS 2.1 kommt noch 'orange' hinzu. Im Farbmodul von CSS 3 werden jedoch alle SVG-Farbnamen gelistet.

Die SVG-Farbnamen sind zum Beispiel dem SVG-Buch zu entnehmen: Farbnamen.

Farbnamen in CSS 2.0

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

Die Angaben sind in Farbmodul von CSS 3 als veraltet gekennzeichnet. Als Alternative ist ein Arbeitsentwurf in Arbeit.

Numerische Farbwerte

Die Notierung von numerischen Farbwerten kann in CSS bis Version 2.1 im Farbraum sRGB (Rot, Grün, Blau) erfolgen. Das Farbmodul von CSS 3 fügt den Farbraum HSL (Farbton [hue], Sättigung [saturation], Helligkeit [lightness]) hinzu. Die Angabe erfolgt als dezimaler- oder prozentualer Wert, bei sRGB auch als Hexadezimalwert. Zusätzlich ist beim Farbmodul von CSS 3 die Angabe eines Wertes für den Alpha-Kanal zur Darstellung der Transparenz möglich.

Hexadezimalwert

Ein hexadezimaler Farbwert stellt eine Farbe aus dem sRGB-Farbraum dar, eingeleitet von einer Raute '#', gefolgt von hexadezimalen Ziffern.

Dies ist entweder exakt eine Ziffer für jeden Farbkanal, also 3 Ziffern insgesamt, jeweils eine Möglichkeit von folgenden: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F. Große und kleine Buchstaben bedeuten jeweils das gleiche, im dezimalen System sind a bis f die Zahlen 10 bis 15.

Alternativ kann auch eine Notation mit zwei von den Ziffern pro Kanal gewählt werden, also 6 Ziffernn insgesamt. Das deckt dann dezimal den Bereich von 0 bis 255 ab. Die Konversion von der einziffrigen Notation in die mit zwei Ziffern pro Kanal erfolgt einfach durch Verdopplung der einzelnen Ziffer, #fff ist also gleich #ffffff oder auch weiß oder #abc ist gleich #aabbcc.

Beispiele lange Variante:

color: #fafc00;
color: #000000;
color: #ffffff;
color: #c0c0c0;

Wenn sich die Werte des jeweiligen sRGB-Werts wiederholen, kann man also auch die kurze 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 fehlerhafte Farbangabe, weil 4 statt 3 oder 6 Ziffern verwendet werden! */

sRGB-Wert

Hierbei werden die jeweiligen sRGB-Werte in Abstufungen von 0 bis 255 (256 Farbwerte pro Farbe) oder als prozentuale Angabe notiert. Werte außerhalb des gültigen Bereiches werden zur Präsentation auf den nächstgelegenen gültigen Wert gesetzt, negative Zahle also auf 0 und Werte größer als 255 oder 100% auf 255 beziehungsweise 100%.

Die Notation beginnt mit 'rgb(' und endet mit ')'. Dazwischen befinden sich die Angaben zu den drei Kanälen, jeweils mit Komma separiert, also zum Beispiel rgb(255,255,255), entspricht #fff in hexadezimaler Schreibweise oder auch weiß.

Statt einer dezimalen Angabe ist auch die Angabe von drei Prozentwerten möglich, jeweils im Bereich von 0% bis 100%, die Angabe des Symboles '%' ist wichtig, damit das Darstellungsprogramm zwischen Prozentangaben und dezimalen Angaben unterscheiden kann. Es darf nicht gemischt werden, also ein Kanal in dezimaler Notation und einer in prozentualer Notation ist nicht erlaubt - auch nicht beim Wert 0. Ansonsten ist die Notation für prozentuale Angaben die gleiche wie für dezimale. Anders als bei den anderen Notationen sind bei Prozentangaben auch nichtganzzahlige Angaben erlaubt.

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

Das Farbmodul von CSS 3 erlaubt auch die Angabe in einem alternativen Farbraum. Die Notation beginnt mit 'hsl(' und endet mit ')' dazwischen befinden sich die Angaben zu den drei Werten des Farbraumes, jeweils mit Komma separiert.

Hierbei wird zuerst der Farbwert als Zahl ohne Einheitszeichen angegeben. Die Zahl steht für einen Winkel in Grad, wobei man sich die Farben im Kreis angeordnet denkt, wobei rot 0 und 360 entspricht, grün 120 und blau 240. Die anderen Farben sind als Mischfarben dazwischen angeordnet, also violett zwischen 240 und 360, orange und rot zwischen 0 und 120, cyan zwischen 120 und 240. Werte außerhalb des Bereiches 0 bis 360 werden dann vor der Präsentation per Modulo 360 auf den Bereich zurückgerechnet.

Der zweite Wert steht für die Sättigung in Prozent, wobei 0% für einen Grauwert ohne Farbe steht und 100% für die Farbe ohne Beimischung von grau. Werte außerhalb des gültigen Bereiches werden wieder bei der Darstellung auf den nächstgelegenen gültigen Wert gesetzt.

Der dritte Wert steht für die Helligkeit, ebenfalls ein Prozentwert, wobei 0% für schwarz steht und 100% für weiß, 50% entspricht der 'normalen' Farbe. Werte außerhalb des gültigen Bereiches werden wieder bei der Darstellung auf den nächstgelegenen gültigen Wert gesetzt.

/* 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%);

Darstellungsprogramme, die CSS nur bis Version 2.1 interpretieren, werden solche Werte natürlich als ungültig einstufen, daher empfiehlt es sich, eine auch in CSS 2.1 gültige Anweisung voranzustellen, etwa so:

color: rgb(255,255,0);
color: hsl(60,100%,50%);

Farbangaben mit Alpha-Wert

Um teiltransparente Farben zu erreichen, führt das Farbmodul von CSS 3 einen zusätzlichen Alpha-Kanal ein. Dies funktioniert ähnlich oder gleich den bereits früher für SVG definierten Eigenschaften wie fill-opacity oder stroke-opacity.

Die Notation ist wieder rückwärtsinkompatibel zu CSS 2.1, daher sollte man für alte Darstellungsprogramme immer eine Alternative in der alten Notation ohne Teiltransparenz bereitstellen.

Für die Teiltransparenz wird ein zusätzlicher vierter Wert für den Alpha-Kanal als Zahl im Bereich zwischen 0 (vollkommen transparent) und 1 (deckend) hinter den drei bereits erklärten Werten und einem weiteren Komma notiert. Werte außerhalb des gültigen Bereiches werden wieder bei der Darstellung auf den nächstgelegenen gültigen Wert gesetzt.

Es werden außerdem die Schlüsselwörter rgb und hsl jeweils hinten um ein a ergänzt. Die Angabe des Alpha-Kanals ist bei der Nutzung von hexadezimalen Werten nicht möglich. Beispiele:

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

Schlüsselwort 'transparent'

In CSS 1 ist es für die Eigenschaft background-color zulässig, den Wert 'transparent' zu setzen. Seit CSS 2 ist der Wert auch erlaubt für border-color. Mit CSS 3 ist der Wert zulässig für alle Eigenschaften mit Farbwerten mit Ausnahme der Eigenschaft color. Die Wirkung ist gleich einem komplett durchsichtigen, unsichtbaren Objekt, welches aber dennoch vorhanden ist, also etwa beim Box-Modell immer noch zur Berechnung von Abmessungen beiträgt. 'transparent' entspricht dem Wert rgba(0,0,0,0).

Schlüsselwort 'currentColor'

Das Farbmodul von CSS 3 übernimmt von SVG das Schlüsselwort 'currentColor'. Damit kann der berechnete Wert der Eigenschaft color als Farbwert für anderen Eigenschaften verwendet werden. Wird das Schlüsselwort bei color selbst verwendet, so wird es behandelt wie 'inherit'.

Eigenschaft opacity

Das Farbmodul von CSS 3 übernimmt von SVG auch die Eigenschaft opacity. Dies bedarf allerdings für die Kombination mit der in CSS verfügbaren Eigenschaft z-index einer kleinen Erweiterung.

Mit opacity kann ein Element samt seiner Kindelemente teiltransparent gemacht werden. Die Eigenschaft ist demzufolge für visuelle Medien anwendbar. Das Element samt Kindelementen wird damit zu einem einzigen, graphischen Block zusammengefaßt. Dieser wird dann komplett entsprechend dem Wert von opacity teiltransparent wiedergegeben.

Wie bei der Erweiterung der Farbangaben um einen Alpha-Wert wird hier eine Zahl als Wert für die Teiltransparenz angegeben. Der Wertebereich liegt zwischen 0 (komplett durchsichtig) und 1 (komplett undurchsichtig, Voreinstellung). Werte jenseits dieses Bereiches werden vor der Präsentation auf den nächstgelegenen Wert aus dem Bereich 0 bis 1 gesetzt. Dies ist dann auch der berechnete Wert.

Weicht der Wert von 1 ab, gibt es Sonderregeln für die Verwendung mit der Eigenschaft z-index. Elemente von außerhalb können nicht per z-index so angeordnet werden, dass sie hinsichtlich der z-index-Reihenfolge zwischen zwei Elementen angeordnet werden, auf welche gemeinsam die Eigenschaft opacity mit einem Wert ungleich 1 wirkt.

Beispiel:

.knopf {
display: block;
width: 2em;
height: 2em;
background: #006;
color: white;
opacity: .4
}
.knopf:hover {
background: #00a;
opacity: .8
}

Dieser 'Knopf' ist also teil-durchsichtig. Sofern er auf Strukturen des Elternelementes einschließlich dem Hintergrund liegt, schimmert der Hintergrund also sowohl durch den dunkelblauen Hintergrund also auch den weißen Inhalt. Beim Drüberfahren mit einem Zeigergerät wird solch ein 'Knopf' dann etwas weniger transparent und heller. Ähnliche Strukturen lassen sich auch verwenden, um bei Bedarf Zusatzinformationen einzublenden und besser sichtbar zu machen. Mit den in Arbeit befindlichen CSS-Modulen für Übergänge und zur Animation lassen sich dann natürlich solche Änderungen auch kontinuierlich durchführen. In SVG gehen solche Animationen schon lange und eignen sich gut, um die Ergonomie und Übersichtlichkeit von interaktiven Projekten zu verbessern. Durch Änderung der Transparenz läßt sich die Aufmerksamkeit des Nutzers auf gerade relevante Bereiche eines Projektes lenken, während momentan gerade nicht so relevante Bereiche nahezu transparent gehalten werden können, bis der Nutzer seine Aufmerksamkeit darauf lenkt. Die Information selbst bleibt also immer komplett präsent, lediglich die Gewichtung der Aufmerksamkeit kann mit der Eigenschaft elegant verschoben werden.

Weil sowohl Hintergrund als auch Inhalt teiltransparent werden, eignet sich die Eigenschaft allerdings schlecht, um nur einen teiltransparenten Hintergrund zu erzeugen. Bei Farben verwendet man dann besser Farbangaben mit Angabe des Alpha-Kanals oder bei Bildern solche, die selbst teiltransparent sind (zum Beispiel bei PNG oder SVG einstellbar - insbesondere kann man in einem SVG-Dokument als Hintergrund auch ein Bild im Format JFIF/JPEG unterbringen, um dieses teiltransparent zu machen, welches allein diese Möglichkeit nicht hat).

Verweise

Zurück zu numerische Angaben |

Hoch zu CSS |

Vor zu Farbe und Hintergrund