(Das Gegenstück ist die Absorption = Subtraktion von Licht durch Filter)
|
Durch Addition farbiger Lichtquellen kann jede beliebige wahrnehmbare Farbe
dargestellt werden. (Das Gegenstück ist die Absorption = Subtraktion von Licht durch Filter) |
|
In der Informationstechnik liegt die Bedeutung der Farb-Addition bei Bildschirmen (PC-Monitoren) sowie bei der allgemeinen Definition der "RGB"-Farben. |
Farbe
|
Das komplexe Thema 'Farbe' in der Informatik |
| Live RGB-Demo | Addition der 'Grundfarben' Rot + Grün + Blau |
| Code ↔ Farbe | Vom Code über die Mischung von Lichtquellen zur Farbe |
| Pixel | Zusammensetzung von 3 Lichtpunkten zu einem Pixel |
| Farb-Codierung | HTML oder CSS, dezimal, hexadezimal oder mit Farb-Namen |
| Lichtquellen | Strahlung schwarzer Körper, Spektrum und Farbtemperatur |
Live RGB-Demo |
||||||||||||||||||||||||||||||||||||||
Live RGB-Addition:
CSS-Farbcode:
|
|
|||||||||||||||||||||||||||||||||||||
| Der in der Informatik dafür verwendete Farb-Code ist unterhalb der Regler dargestellt, links hexadezimal, rechts in dezimaler → CSS-Syntax. | Durch Einstellung der Regler können sie jede der mehr als 16 Millionen Farben anzeigen. Sie sehen die Einstellung der 3 einzelnen Farb-Punkte und das damit erzeugte RGB-Pixel. | |||||||||||||||||||||||||||||||||||||
|
Grauwert:
|
Der angezeigte Grauwert ist der arithmetische Mittelwert der 3 RGB-Farbwerte. Beim Setzen von Grauwerten werden alle 3 RGB-Farbwerte auf den gleichen Betrag eingestellt. | |||||||||||||||||||||||||||||||||||||
| ♦ Beispiele und Animationen zum Thema Farben-Mischung | ||||||||||||||||||||||||||||||||||||||
Vom RGB-Code über Lichtquellen zur Farbe |
|
Farbeist kein wissenschaftlich exakter Ausdruck sondern beschreibt den subjektiven Eindruck, den die Augen liefern. Dieser Eindruck ist je nach Art des Lebewesens unterschiedlich (viele Insekten sehen auch für Menschen unsichtbares UV-Licht) und unterliegt zusätzlich individuellen Schwankungen (bis zur Farben-Blindheit). |
Lichtist ein wissenschaftlicher Ausdruck, der allerdings wegen seines starken Menschen-Bezugs nicht sehr elegant ist. Damit bezeichnet man einen winzigen Teil-Bereich der elektromagnetische Schwingungen, und zwar mit Wellenlängen 400..700nm.Die meisten realen Lichtquellen erzeugen Mischungen verschiedener Lichtwellen. Durch Mischung mehrerer Lichtquellen variabler Intensität kann man 'Farben' erzeugen. |
Farb-PraxisDie Beschreibung und reproduzierbare Herstellung von Farbe hat sehr große praktische Bedeutung. In der Informatik wird (fast) jede Farbe als Kombination von 3 Grundfarben (Rot, Grün, Blau) beschrieben. Jede der 3 Komponenten wird durch eine 8-Bit Zahl beschrieben, das ergibt 24 Bit Daten für jede Farbe. Dieses RGB-System ist etabliert und hat sich sehr bewährt.Dabei nimmt man bewusst einige Kompromisse in Kauf. |
• Streng genommen wird Farbe von jedem Menschen individuell wahrgenommen. • Übliche technische Systeme (Monitor, Drucker) können nicht alle sichtbaren Farben darstellen. • Durch die Technik entstehen zusätzlich Übersetzungs-Fehler: Der gleiche RGB-Code wird je nach Gerät in leicht unterschiedlicher Farbe dargestellt. |
Licht-MischungEin bestimmter Farb-Eindruck kann durch (unendlich) viele verschiedene Licht-Mischungen hergestellt werden.■ Der Hintergrund wird als schwarz angenommen. Das gilt nur für die Addition von Lichtquellen. ■ Man muss mindestens 3 verschiedene Lichtquellen mischen, die im Chromatizitäts-Diagramm möglichst weit voneinander entfernt sind. Allerdings kann man nur solche Lichtquellen verwenden, die auch technisch realisierbar sind. ■ Die am häufigsten verwendete RGB-Methode verwendet als Grundfarben Rot, Grün und Blau. Das wird symbolisch (!) im Chromazitizäts-Diagramm (rechts) demonstriert: Nur die Farben innerhalb des RGB-Dreiecks können dargestellt werden. ■ Das Diagramm zeigt die erzielbaren Farbtöne (Hue) in voller Sättigung und Helligkeit. ♣ Tipp: Das → HSB-System verwendet den Begriff 'Farbton' zur Farb-Codierung. |
 Das Chromazititäts-Diagramm wird in der professionellen Farbtechnik oft verwendet. Darin werden vereinfacht 'alle' sichtbaren Farben dargestellt - Allerdings wird auch dieses Diagramm auf ihrem Monitor nur mit RGB-Farben dargestellt. |
Informationstechnik■ Farben werden mit RGB-Zahlencodes beschrieben, und zwar unabhängig von der Verwendung oder der technischen Darstellung.Ein RGB Code umfasst 3 Zahlen (für R, G und B) im Bereich 0..255. ■ Nur Lichtquellen (Lampen, PC-Monitor) lassen sich additiv mischen, nicht jedoch beleuchtete Objekte (Druckpapier,...). Allerdings wird die Darstellung beleuchteter Objekte ebenfalls aus dem RGB-Code berechnet. |
■ Der RGB-Code ist die universelle Drehscheibe der Farb-Information: Alle anderen Arten der Codierung werden von/auf RGB umgerechnet. ■ Damit auf unterschiedlichen Geräten ein halbwegs gleicher Farb-Eindruck entsteht, müssen diese geeicht werden. Bei Profi-Geräten muss die Kalibrierung (u.a. wegen Alterung der Komponenten) regelmäßig wiederholt werden. |
Zusammensetzung von RGB-Farbpunkten zu Bildpunkten (Pixel) |
|||||||||||||||||||||||||||||||||||||
| ■ Auf Bildschirmen werden die 3 RGB Lichtquellen normalerweise durch 3 verschiedene Lichtpunkte pro Bildpunkt (Pixel) dargestellt. Die Punkte sind sehr klein und zahlreich, dadurch entsteht für das Auge der Eindruck der gewünschten Mischfarbe. |
■
Der folgende Demo zeigt eine Simulation der Bildschirm-Pixel in ca. 10facher
Vergrößerung: Die erste Zeile zeigt für jedes Pixel seine 3 RGB Lichtquellen. Die zweite Zeile zeigt jedes Pixel in seiner resultierenden Mischfarbe. |
||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||
|
●
Die Farben Rot, Grün Blau ergeben sich, wenn je eine Grundfarbe den maximalen Wert
(Sättigung, dezimal 255, Hex FF) annimmt und die beiden anderen Grundfarben abgeschaltet
(Null) werden. ● Gelb, Cyan, und Magenta ergeben sich, wenn 2 der 3 Grundfarben voll gesättigt sind, die dritte abgeschaltet. |
●
Die Grau-Skala ergibt sich, wenn jede der 3 Grundfarben den gleichen Wert hat, d.h. R=G=B ● Von Links nach rechts wird der Zahlenwert (=die Intensität) von 0 auf das Maximum 255 erhöht. |
||||||||||||||||||||||||||||||||||||
|
■
Jeder der 3 Farb-Anteile wird durch eine ganze Zahl beschrieben. ■ Eine Binärzahl von 8 Bit = 1 Byte kann dezimale Zahlenwerte zwischen 0 und 255 annehmen (hexadezimale Werte 00 bis FF). ■ In einem "Farbwort" von 24 Bit = 3 Byte sind der Reihe nach die Anteile von R, G und B enthalten. |
■ Jede Grundfarbe wird in 256 Stufen variiert, das ergibt insgesamt 224 = mehr als 16 Millionen Farben - Weit mehr als die meisten technischen Geräte tatsächlich unterscheiden können. | ||||||||||||||||||||||||||||||||||||
Farb-Codierung |
|
| In der Informatik werden Farben fast immer durch ihre RGB-Werte definiert. | Dafür stehen einige Syntax-Varianten zur Verfügung: |
Dezimale Angabe einer Farbergb(r,g,b)
Ersetzen sie die Buchstaben r,g,b durch ganze Dezimalzahlen
im Bereich 0..255.♣ Tipp: Mit → Javascript lässt sich Live die Farbe jedes Objekts ändern - so wie auf dieser Webseite demonstriert. |
HTML-Beispiel:
<span style="background-color:rgb(255,255,0);
color:rgb(204,0,0);">Test</span>
|
Hexadezimale Angabe#RRGGBB
Für jede Grundfarbe werden 2 Hex-Ziffern im Bereich 00..FF
verwendet. Das hat u.a. den Vorteil einer fixen String-Länge.
|
HTML-Beispiel:
<span style="background-color:#FFFF00;
color:#CC0000;">Test</span>
|
Hexadezimale Kurzform#RGB
Jede Farbe wird durch eine einzige Hex-Ziffer angegeben. Diese wird 'verdoppelt', d.h.
aus #0 wird #00, aus #C
wird #CC usw. Das erlaubt sehr kurze Farb-Definitionen,
und reduziert die Auswahl auf 16 Werte je Farbe.
Das ergibt immerhin noch eine Auswahl unter 16*16*16 = 4096 Farben.
|
HTML-Beispiel:
<span style="background-color:#FF0;
color:#C00;">Test</span>
In diesem Web wird fast ausschließlich die Hex-Kurzform verwendet. 4096 verschiedene Farben sind vollkommen ausreichend. ♦ Details und Live-Demo der Hex-Kurzform Farben |
Farben-NamenAus historischen Gründen gibt es einige Sammlungen (Paletten) von Farben mit standardisierten Namen. Man kann die meisten davon auch in CSS- oder HTML Attributen verwenden. |
♦ Details und Live-Demo der VGA-Farben |
Paletten und Index-FarbenIn einigen Fällen sind besonders viele Farb-Definitionen zu verwalten, z.B. in größeren Bildern oder Videos: Da theoretisch jeder einzelne Bildpunkt die gesamte Farb-Information von 24 Bit benötigt, steigt das Daten-Volumen schnell an.● Andererseits brauchen viele Anwendungen nicht alle 17 Mio Farben. Wenn man die Anzahl verwendeter Farben beschränkt, dann kann man viel Speicherplatz, Transportzeit und Verarbeitungs-Zeit sparen. |
Für solche Fälle wurde die Technik der Index-Farben entwickelt. Damit wird eine begrenzte Anzahl von Farben (meist <256) rasch und sparsam verarbeitet. Das bekannte Datei-Format GIF verwendet z.B. Index-Farben. ♦ Details und Live-Demo zu Index-Farben, 16 VGA-Farben, 216 Websafe-Farben, 4096 Farben der Hex-Kurzform, 65000 HiColor-Farben und allen 17 Mio TrueColor Farben. |
Lichtquellen |
|
Leuchtende Körper senden Lichtstrahlung aus:Sonne, Lampen, TV-Bildschirm, PC-Monitor, ... ► Diese Körper emittieren elektromagnetische (Licht)-Strahlung, meist in einem breiten Bereich von Wellenlängen. ► Ein Spektrum ist die Beschreibung der Strahlungs-Intensität als Funktion der Wellenlänge. |
►
Einen winzigen Bruchtel der Strahlung können die Augen von Lebewesen
absorbieren und als "Farbe" interpretieren. ► Für Menschen ist der wahrnehmbare Bereich besonders klein: ca. 400-700 nm (Nanometer = 10-9m), nicht einmal eine ganze "Oktave". Andere Lebewesen nehmen andere Bereiche wahr ! |
|
Strahlung schwarzer Körper:
►
Die häufigste Methode, Farben zu erzeugen, ist durch "glühend"
heisse Körper: Sterne, Sonne und Glühlampe leuchten so.► Kalte "schwarze" Körper werden als schwarz empfunden, wärmere leuchten dunkelrot, heisse orange bis gelb, extrem heisse weiss bis bläulich.. ► "Weisses" Licht enthält Strahlung aller sichtbaren Wellenlängen. ► Der Begriff "Farbtemperatur" beschreibt die Temperatur, bei der ein Körper so leuchtet wie eine bestimmte Farbe. Das "Weiß" von PC-Monitoren oder Leuchtstoffröhren lässt sich z.B. auf Temperaturen von einigen Tausend Grad (K) einstellen. ♦ Live-Demo zur Strahlung schwarzer Körper |
Monochromatische Strahlung:
►
Andere Methoden erzeugen nur Strahlung ganz bestimmter Wellenlängen (monochromatisch):
Leuchtröhren, Laser, ...
►
Ein bekanntes Beispiel sind die Natriumdampf-Lampen, die nur eine einzige Wellenlänge,
fahl gelbes Licht abstrahlen.Auch in der Leuchtschicht von TV und PC-Monitoren, in Leuchtdioden (LEDs) sowie in den Leucht-Transistoren von Flachbildschirmen (TFT) werden solche Methoden verwendet. ► Vorteile: Die Anregung erfolgt meist mit elektrischer Energie und lässt sich daher durch einen Computer gut steuern. Die Energie-Ausbeute ist meist besser als die von glühenden Körpern. ♦ Live-Demo zu Farbe & Wellenlänge |
AdditionBei dieser Art der Farb-Erzeugung ist der Hintergrund schwarz.Durch Zumischung von 3 verschiedenen Lichtquellen ergibt sich der Eindruck verschiedener Farben. Bei Kombination aller 3 Farben mit voller Intensität ergibt sich der Eindruck weiss. |
Klick auf die Grafik öffnet eine Demo: Addition der IT-Grundfarben Rot, Grün und Blau zu RGB. Die Ansicht ist nur mit SVG-fähigen Browsern möglich. |
