Farben

Farbwerte und -Namen

Farben werden in CSS und HTML entweder durch Hexadezimale oder durch Dezimale RGB-Werte definiert. Zusätzlich können auch einige festgelegte Farb-Namen aus Standardsammlungen (Paletten) verwendet werden. Leuchtende Medien setzen die Farben RGB (Rot, Grün, Blau) über schwarzem Hintergrund additiv zusammen, nichtleuchtende filtern das Weiß des Hintergrunds subtraktiv durch CMY-(Cyan, Magenta, Gelb)-Farben.
Hypertext Markup Language HTML Hypertext Markup Language
Additive Mischung Schwarzer Hintergrund, Farb-"Lichter" - Monitor
Subtraktive Mischung Weisser Hintergrund, Farb-"Absorber" - Drucker
Animation SVG-Animation von RGB- & CMY-Farben
VGA VGA-Palette mit 16 Farben
WebSafe-Farben Palette mit 216 "sicheren" Farben
Programmierung Erstellung dieser Webseite mit Javascript
Farbe Einige neu gestaltete Kapitel zum Thema 'Farbe'

Additive Mischung von Farben

Diese Webseite wird aufgelassen. Alle Interaktiven Funktionen sind abgeschaltet. - Ersatz im Kapitel Farbe
► Diese Methode wird bei schwarzem Hintergrund angewendet. Man erzeugt Farben durch 3 (imaginäre oder reale) "Lampen" in den Farben Rot, Grün und Blau. (RGB-Technik)
► Wenn alle Kanäle (Lampen) abgeschaltet sind, entsteht die Farbe "schwarz".
► Wenn alle Kanäle voll eingeschaltet sind, entsteht die Farbe "weiss".
► PC-Monitor arbeiten mit RGB-Technik: Jeder Bildpunkt (Pixel) wird aus 3 leuchtenden Punkten der 3 Farb-Kanäle zusammengesetzt.
► SVG-Animation zur Addition von RGB-Farben
► Zufalls-Zufalls-Farbe-Farbe
FarbeWert (0..255) 
Rot
Rot
Grün
Grün
Blau
Blau
Hexadezimal
#FFF
Dezimal
rgb(255,255,255)
 
RGB
 
► Alle Farben in Programmiersprachen (HTML, CSS, ...) Grafik-Software und anderen Programmen werden als RGB-Werte angegeben ! Links: SelfHTML

Subtraktive Mischung von Farben

Diese Webseite wird aufgelassen. Alle Interaktiven Funktionen sind abgeschaltet. - Ersatz im Kapitel Farbe
► Diese Methode bei weißem Hintergrund angewendet. Man erzeugt Farben durch 3 (imaginäre oder reale) "Absorber" oder "Filter". Die Farbe Rot wird durch einen Cyan-Filter gelöscht, Grün durch Magenta-Filter, Blau durch Gelb-(Yellow)-Filter. Das Verfahren ist als (CMY-Technik bekannt.
► Wenn alle Filter abgeschaltet sind, scheint die Farbe "weiß" durch.
► Wenn alle Filter eingeschaltet sind, entsteht die Farbe "schwarz".
► Ein Beispiel für diese Technik ist jeder PC-Farbdrucker.
► SVG-Animation zur Subtraktion von CMY-Farben
► Zufalls-Zufalls-Farbe-Farbe
FarbeWert (0..255) 
Cyan
Cyan
Magenta
Magenta
Gelb
Gelb
Hexadezimal
#FFFFFF
Dezimal
rgb(255,255,255)
 
CMY
 
Umrechnung von Farbwerten; RGB → CMY
Cy=255-R, Mg=255-G, Gb=255-B
Umrechnung von Farbwerten CMY → RGB
R=255-Cy, G=255-Mg, B=255-Gb
 Drucker arbeiten normalerweise mit der erweiterten CMYK-Technik (K = Zusatzfarbe Schwarz). Das bietet mehrere praktische Vorteile.
Schwarz wird oft gebraucht und ist wesentlich billiger als CMY. Schwarz-Druck mit einer einzigen Farbe ist schneller und exakter, und 'schwärzt' auch besser als CMY, die zusammen oft nur dunkelgrau ergeben.

SVG-Animation von RGB und CMY
SVG (Scalable Vector Graphics) ist eine moderne Methode zur Darstellung von Objektgrafik.
Diese "Sprache" zur Beschreibung von Grafik-Objekten gehört wie XHTML zur XML-Familie und kann lizenzfrei (Offener Standard) verwendet werden. SVG-Grafik kann direkt (inline) in jedes XML-Dokument (z.B. XHTML, OpenDocument, ..) eingebettet werden. 		Alle modernen Browser beherrschen sowohl XHTML als auch SVG.
Adobe SVG Viewer Nur M$IE-Browser benötigen noch ein Plugin (Zusatz-Modul), um SVG anzuzeigen. Das Adobe SVG PlugIn funktioniert gut und ist kostenlos im Internet verfügbar.
Addition der RGB-Grundfarben Rot, Grün & Blau über schwarzem Hintergrund (z.B. PC-Monitor).
Ältere PC zeigen die Animation nur ruckweise. In diesem Fall probieren sie statische Grafik. 		Additive Farbmischung - RGB
Subtraktion der CMY-Grundfarben Cyan, Magenta & Gelb (Yellow) über weeißem Hintergrund (z.B. PC-Drucker)
Ältere PC zeigen die Animation nur ruckweise. In diesem Fall probieren sie statische Grafik. 		Subtraktive Farbmischung - CMY

Die VGA - Palette mit 16 Farben
▶ Zusammenstellung: Aus 3 Kanälen (R,G,B) und 3 Werten (00,80,FF) ergeben sich 3^3=27 Kombinationen. Davon werden alle 'Mischungen' von 80 mit FF entfernt (z.B. #80FF00), damit bleiben 15 Farben übrig. Als 16. Farbe wird 'silver' (#C0C0C0) ergänzt.
▶ Der Grund für die 'Erfindung' der VGA-Palette ist historisch: PC und Farb-Monitore der 2.Generation konnten die 16 VGA-Farben mit nur 4 Bit codieren (2^4=16).
▶ Darüber hinaus gibt es noch eine Palette mit weiteren 120 Farb-Namen. Diese sind jedoch weniger gebräuchlich und werden nicht von allen Browsern unterstützt. 		Links:
SelfHTML, (VGA-Farben, 120 Farben-Palette)
Hype (Netscape-Farbnamen)
W3C: 147 SVG-Farben

WebSafe - Farben
Diese Palette von 216 Farben wurde von Netscape eingeführt. Die Palette ist systematisch aufgebaut und reduziert die Anzahl möglicher Farben (256*256*256 = 16.777.216) auf 6*6*6 = 216.
Durch Muster-Bildung ("Dithering) mit Punkten dieser Farben können alle 16 Mio Farben auch mit einem 256-Farben-Monitor dargestellt werden.
Die Leistungsfähigkeit heutiger PC-Monitore ist so hoch, daß diese Palette eher historischen Wert hat. 		Links:
SelfHTML (Websafe, Farbwähler, Farbmodelle), WebMonkey, VisiBone, Websource, ...

Programmierung
Diese HTML-Seite ist zunächst "statisch", d.h. sie wird in immer gleichbleibender Form vom Webserver geladen. Die Webseite enthält einige Javascript-Programme. Jeder Standard-Browser "versteht" Javascript, daher können Clients (BesucherInnen) die Seite mit Hilfe der Programme ändern.
▲ Vorteil: Der Webserver wird nur minimal belastet, alle Programme werden vom Client-PC ausgeführt.
▼ Nachteil: Der Quellcode ist deutlich länger, da alle Javascript-Programme zusammen mit der Seite geladen werden müssen. 		Eine Alternative wäre die Verwendung von Programmiersprachen wie PHP oder Perl, die am Webserver ausgeführt werden. In diesem Fall wird eine "fertige" Webseite an die Clients gesendet. Bei jeder einzelnen Anforderung (Mausklick auf eine Programmtaste) muss die gewünschte Webseite vom Server neu erstellt und an den Client gesendet werden.
▲ Vorteil: Webseite ist kürzer, da keine Javascript-Programme enthalten sind - der Quellcode ist allerdings etwa gleich lang !
▼ Nachteil: Unverantwortlich hohe Server-Belastung
Zur Farb-Demonstration wurden keine veränderlichen Bilder verwendet. Es wird lediglich die Farbe und die Hintergrund-Farbe von Standard-HTML-Elementen verändert.
► Diese Methode kann von jedem Standard-Browser ausgeführt werden und benötigt keine Zusätze.
► Details zur Programmierung im Kapitel "CSS & JavaScript". 		Eine Alternative wäre die Verwendung von Animations-Technik:
► SVG bietet diese Möglichkeit in ausgezeichneter Form, ist jedoch noch wenig verbreitet. Daher sind die SVG-Animationen auf eigenen Webseiten untergebracht.
► Andere Methoden zur Animation wurden ausgeschieden, weil sie nicht lizenzfrei verfügbar bzw. an Produkte eines Herstellers gebunden sind.
Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   HTML