Farben am Bildschirm

Übersicht der Farben und ihre Funktion im CSS.

Farbgeschichte

Menschen teilen Informationen seit Anbeginn ihrer Geschichte mit Farben und über Farben weiter. Im Laufe der Generationen untersuchten Religiöse, Künstler und Wissenschaftler Farben und schrieben den Farben Bedeutungen zu und erkannten archetypische Harmonien und Gesetze. Als Kinder ihrer Zeit sind diese Untersuchungen durch den Zeitgeist geprägt und diese Gemeinsamkeit haben auch wir mit den Altvorderen gemeinsam. Unsere heutige CSS Technik baut auf dieser Geschichte der Farben auf.

Aristoteles prägte spätere Epochen mit seiner Philosophie und Sicht der Farben. Goethe und Schopenhauer systematisierten Farbkreise über die komplementären Farben. Aga kombinierte in der Blauen Moschee meisterhaft Licht, Architektur und Baustoff. Newton spaltete weißes Licht mit einem Prisma in die Spektralfarben auf und entdeckte, dass diese Farben übereinander projiziert zusammen erneut weißes Licht ergeben. Itten formulierte die Farbgesetze und Farbkontraste.

Grundlage für alle Farbdefinitionen, die wir im CSS benutzen werden, ist die Arbeit von David und Guild aus dem Jahr 1931 für die internationale Farbkomission. Beide bestimmten den sogenannten Normalbetrachter, indem Sie mit roten, grünen und blauen Filtern vor Quecksilberdampflampen die sichtbaren Farben mischten und die Mischverhältnisse sowie derenWahrnehmung dokumentierten.

Farbphysiologie, Licht und Sehen

Farbphysiologie beinhaltet die physikalischen Aspekte des Lichtes und des Sehens. Unsere Sonne strahlt ihre Energie in den Weltraum und einen Teil dieses Energiespektrums nehmen wir als sichtbares Licht wahr. Nicht nur unsere Augen sondern der komplette Planet hat sich auf die Sonne als Energielieferanten eingestellt. So sind z.B. die Pflanzen in der Regel Grün, um einen höheren Ertrag aus dem Licht zu ernten, da der grüne Teil des Spektrums im Gegensatz zu den anderen Bereichen im Laufe des Tages etwas größer ist.

Jede Tierart hat sich unterschiedlich angepasst und bei unseren Augen sind drei Arten von Zäpfchen (S, M, L) für das Farbsehen und eine Art Stäbchen (R) für Wahrnehmung bei geringer Helligkeit zusammen mit dem Gehirn für das Sehen wichtig. Die Zäpfchen reagieren entweder für den eher kurzen (S: Short), mittleren (M: Medium) oder langen (L: Long) Bereich des Spektrums. Die Stäbchen (R: Rod Cells) werden bei Tageslicht vom Gehirn mehr oder weniger ignoriert, bei wenig Licht sind sie jedoch noch dann sensibel, wenn die S, M und L-Zäpfchen nicht mehr stimuliert werden. Die Stäbchen im Vergleich zu den Zäpfchen sind für Helligkeit in etwa dreimal so sensibel. Hinzu kommt die Fähigkeit des Gehirns durch zusätzliche Regulation einen recht hohen Dynamik-Umfang an Tonwerten zu erzeugen.

Bereits Newton hat es richtig gedeutet, seitdem ist das Prinzip Farben-Sehen immer weiter untersucht worden. Heute kann nachgewiesen werden: Die Zäpfchen unserer Augen sind entweder auf den kurzwelligen bläulichen Bereich (S), den mittleren cyan-grünlichen (M) oder den längeren gelb-grüm-rötlichen (L) Bereich sensibel. Das Gehirn verarbeitet diese Reize dann zu Farben. Die Wellenbereiche der Stäbchen entsprechen nicht der reinsten Sättigung von Blau, Grün und Rot. 534 ist eher Cyan -Grün und 564 Grün-Gelb-Orange
Farbe ist nicht im Licht, nicht im Auge, sondern im Hirn.
Quelle
Isaac Newton: "1643-1727",

Farbmetrik und additives Farbmischsystem RGB

Die Farbmetrik ist die Lehre von den Maßbezeichnungen der Farben. Sie stellt mittels mathematischer Formeln das visuelle Ergebnis einer Farbe dar. Im CSS benutzen wir in erster Linie das additive Farbmischsystem RGB. Die drei Grundfarben Rot, Grün und Blau addieren sich zu Weiß. Das RGB Farbmischsystem ist die Grundlage für den großen Teil der Ausgabegeräte von Webseiten wie Beamer, Computermonitore, sonstige Bildschirme und Displays. Auch erfassen die Eingabegeräte für Bilder, Digitalcameras und Scanner, ihre Daten in RGB. Die Technik orientiert sich an den Eigenschaften des menschlichen Auges, allerdings sind die verwendeten Farben gegenüber den sensibelen Bereichen der Stäbchen verschoben und trennen Rot, Grün und Blau eindeutig. RGB entspricht ziemlich genau den Stäbchen von Goldfischen, weniger den Stäbchen von Menschen. Funktioniert aber auch bei uns offensichtlich sehr gut.

RGB Farbumfang und Farbwiedergabe

Heutige Monitore können problemlos den typischen RGB Farbumfang von 16,7 Millionen Farbabstufungen wiedergeben. Dies entspricht einer Abstufung von 256 Farben (bzw. 8 Bit) pro Grundfarbe Rot, Grün oder Blau. Allerdings ist die Farbwiedergabe von RGB Daten geräteabhängig und es kommt zu großen Schwankungen der Qualität zwischen verschiedenen Geräten.

Farbdefinitionen in CSS

Seit dem 7. Juni 2011 gilt die das CSS Color Module Level 3 (CSS3) als Empfehlung für Farben von dem W3C. Mittlerweile werden die im CSS3 vorgestellten Möglichkeiten für Farbdefinitionen von den aktuellen Browsern unterstützt. Am gebräuchlichsten ist für die Bestimmung Hex RGB und rgba bei Transparenz.

Hex RGB
Das Format der RGB Werte in hexadezimaler Notation ist # (Raute), welches direkt von entweder sechs (#rrggbb) oder drei (#rgb) hexdezimalen Werten gebildet wird. Hex RGB ist neben den Color Key Words die älteste Möglichkeit für Farbdefinitionen in CSS. Sie ist sehr praktisch, da aufgrund der kompakten Schreiweise im Editor per Doppelklick der komplette Wert erfasst und kopiert, ersetzt oder ausgeschnitten werden kann. Der wesentliche Nachteil ist die Berechnung dieser Farbwerte. Die Berechnung sollte aus praktischen Gründen mittels Bildbearbeitungssoftware oder anderen Tools erfolgen.
```
color: #FF0000;
/* Hex für Rot 255 Grün 0 Blau 0 */
```
RGB
Ein RGB Wert kann direkt in das CSS eingebunden werden. Die Farbe wird über RGB gefolgt von einer geschweiften Klammer mit den Werten für RGB Werten, entweder von 0 bis 255 oder von 0 bis 100%, durch Komma getrennt definiert.
```
color: rgba(255,0,0,);
/*Rot 255, Grün 0, Blau 0 */

color: rgba(100%,0,0);
/* Rot 100% (entsprich 255), Grün 0, Blau 0 */
```
rgba – RGB mit Alpha
Soll z.B. ein
, eine Schrift oder ein sonstiges Objekt nicht vollständig sichtbar sein, dann kann ein RGB Wert mit einer Zusatzbestimmung für den Alpha angegeben werden. Die Farbe wird über rgba gefolgt von einer Klammer gefolgt von den RGB Werten entweder von 0 bis 255 oder von 0 bis 100% definiert. Der Alpha (Transparenz) erfolgt über den vierten Wert und kann von 0.01 bis 1 in beliebiger Abstufung angelegt werden.
```
color: rgba(255,0,0,0.4);	
/* Rot 255, Grün 0, Blau 0, Alpha 40% Sichtbar */


color: rgba(100%,0,0,0.3);	
/* Rot 100%, Grün 0, Blau 0, Alpha 30% Sichtbar */
```
Color Keyword
Ursprünglich gab es die Keywords aqua, black, blue, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Groß- und Kleinschreibung ist dabei egal. Die Liste wurde mittlerweile erweitert. Zum Beispiel burlywood, fuchsia oder darkslategrey. Eine vollständige Tabelle der 140 Farben mit Hex RGB und Dezimal RGB ist unten abgebildet.
```
color: red; 
color: fuchsia;
```
HSL
Die W3C hat beobachtet, dass das RGB Modell nicht besonders intuitiv ist und erst recht nicht die Umrechnung nach Hex RGB. Für eine Vereinfachung ist das HSL System in CSS integriert worden. Im HSL können Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit) getrennt eingestellt werden. Im HSL System wird der Farbton als Grad angegeben und Sättigung sowie Helligkeit in Prozent. Rot ist per Definition sowohl 0° als auch 360°. Grün hat 120°und Blau 240°. Es gibt im Photoshop Farbwähler ein vergleichbares System: HSB. HSB ist Hue, Saturation, Brightness. Doch Vorsicht, denn HSB und HSL sind nicht identisch.
```
color: hsl(118,99%,50%);
```
HSLA
Die HSL Werte können ebenso um Transparenz erweitert werden. Wie im RGBA ist der letzte Wert der Alpha Wert und regelt die Deckkraft von 0.0 (unsichbar) bis 1.0 (sichtbar).
```
color: hsla(121,95%,50%,0.4)
```