jomo.org » Farben

Farbenlehre

Johann Moser — Thu, 05 Nov 2009 16:34:30 +0000

von RGB zu HSB.

Das Netz des Web-Farben-Würfels

Johann Moser — Thu, 15 Dec 2005 07:06:51 +0000

Der Web-Farben-Würfel ist die räumliche Darstellung der Web-Farben, eines eingeschränkten Farbsystems mit jeweils 6 Abstufungen pro Farbkanal.

Die drei Farbkomponenten des RGB-Modells können auf drei räumliche Koordinatenachsen aufgetragen werden, jede Farbkomponente kann in den Intensitäten 00, 33, 66, 99, CC, FF vorkommen. Man erhält für die möglichen Web-Farben einen Würfel mit 6 Farbabschnitten an jeder Kante, das sind 6×6x6=216 Teilwürfel.

Anstelle der Gitterpunkte habe ich hier die Teilwürfel mit der entsprechenden Farbe dargestellt. Das Netz der RGB-Web-Farben-Würfels repräsentiert jene Farben, die sich an der Oberfläche des Würfels befinden. Das sind genau jene Farben, die zumindest in einem Farbanteil die Intensität 00 oder FF haben. Sie zeichnen sich durch große Leuchtkraft (Sättigung) aus.

Farben ohne 00 oder FF-Anteil in keiner der drei Komponenten befinden sich im Inneren des Web-Farben-Würfels. Diese Farben haben stärkeren Mischcharakter und größere Grau-Anteile. In der bildenden Kunst werden die Farben als Nicht-Farben bezeichnet. Damit ist gemeint, dass ihre (Farb-)Sättigung Null ist.

“Schält” man vom 6×6x6-WebFarbenwürfel die oberste Schicht ab, so erhält man einen “inneren” 4×4x4-Restwürfel mit angegebenem Netz. Das gleiche Verfahren kann man noch einmal anwenden, sodass ein 2×2x2-Würfel mit grauen Mischfarben übrig bleibt, der nur mehr aus 66- und 99- Intensitäten zusammengesetzt ist.

Der äußere 6×6x6-Würfel:

Der innere 4×4x4-Würfel:

Der innerste 2×2x2-Würfel:

Verallgemeinerung: Gesetzmäßiger Zusammenhang zwischen Farben

Johann Moser — Thu, 15 Dec 2005 07:05:44 +0000

Die möglichen Farbtöne im RGB-System können im Koordinatensystem in einem Farbwürfel dargestellt werden, deren drei Achsen den drei Farbkomponenten entsprechen. Jede Achse kann Werte zwischen 00 und FF (hexadezimal) annehmen. Die entsprechenden Kombinationen ergeben Gitterpunkte im Würfel. Die Ecke im Koordinatenursprung “#000000″ entspricht Schwarz, die Ecken an den Koordinatenachsen sind die drei Bildschirm-Grundfarben in ihrer größten Intensität.

Komplementärfarben sind die bezüglich Würfelmittelpunkts gegenüberliegenden Gitterpunkte.

Die reinen Grautöne liegen auf der Raumdiagonale zwischen Schwarz und Weiß.

Addition von Graustufen zu einer Farbe sind Farben, die auf Parallelen von der Farbe zur ersten Raumdiagonalen liegen.

Aufgrund unterschiedlicher Anzahl von Teilungen kann nur zwischen bestimmten komplementären Webfarben gleichmäßig vermittelt werden.

Vermutung: Gitterpunkte, die auf Linien liegen, die parallel zu Koordinatenachsen, parallel zu Raumdiagonalen oder Würfeloberflächen oder durch den Würfelmittelpunkt gehen, repräsentieren Farben, die als harmonisch wahrgenommen werden.

Programmieren ästhetisch ansprechender und harmonischer Farben

Johann Moser — Thu, 15 Dec 2005 07:04:34 +0000

“. . . angenehm wirken solche Farben, zwischen denen ein gesetzmäßiger Zusammenhang . . . besteht.”

Mit Hilfe der hexadezimalen Farbcodes kann man verschiedenartige Zusammenhänge zwischen Farben konstruieren. Aufgrund psychologischer Faktoren werden aber in erster Linie oben skizzierte Farbkontraste (Helligkeit, Graumischungen, Komplementärkontraste) als harmonisch wahrgenommen.

Helligkeitsstufen einer Farbe
Helligkeitsstufen einer reinen Farbe, etwa von Rot “#FF0000″ sind “#CC0000″, “#990000″, “#660000″, “#330000″.

Mischung mit Graustufen
Gleichmäßige Einfärbung der drei Farbanteile gibt vier Graustufen zwischen Schwarz und Weiß: “#000000″, “#333333″, “#666666″, “#999999″, “#CCCCCC” ,”#FFFFFF”.

Diese Graustufen können zu einer Farbe addiert werden, es entstehen die hell-dunkel-Kontraste: “#00CC66″ + “#333333″ = “#33FF99″. Diese Kontraste werden als sehr harmonisch empfunden.

Komplementärfarben
Aus dem additiven Charakter des RGB-Modells ergibt sich, dass zwei Farben, die addiert “#FFFFFF” (Weiß) ergeben, Komplementärfarben sind. Wir ergänzen eine Farbe auf “#FFFFFF” und erhalten so den Code ihrer Komplementärfarbe.

Übergänge zwischen Komplementärfarben
Zwischen Komplementärfarben kann man grundsätzlich durch Gleichmäßige Abstufung der Farbanteile vermitteln und dadurch Farbtöne erzeugen, die zu beiden Komplementärfarben in harmonischer Beziehung stehen. Bei Web-Farben ist wegen der eingeschränkten Farb-Palette nur für einen Teil der Farben ein genauer Übergang möglich. Beispielsweise sind Übergangsfarbcodes zwischen “#FF0000″ und “#00FFFFF” : “#993333″, “#666666″, “336666″.

Harmonische Farbbeziehungen

Johann Moser — Thu, 15 Dec 2005 07:03:23 +0000

“Die Erfahrung lehrt, dass gewisse Zusammenstellungen von Farben angenehm, andere unangenehm oder gleichgültig wirken. Es entsteht die Frage, wovon dies abhängt. Die Antwort lautet: angenehm wirken solche Farben, zwischen denen ein gesetzmäßiger Zusammenhang, d.h. eine Ordnung besteht. Fehlt ein solcher, so wirken sie unangenehm oder gleichgültig. Angenehm wirkende Farbgruppen nennen wir harmonisch.” (Wilhelm Ostwald, Farbentheoretiker, aus: J.Itten, S 20)

Für die Farbgestaltung von Webseiten lassen sich die Erkenntnisse der Farbenlehre bezüglich harmonischer Farbkontraste gut einsetzen. Als mögliche Beziehungen zwischen zwei oder mehr Farben kommen in Frage:

Der Farbe-An-Sich-Kontrast
Alle Farben werden in ihrer stärksten Leuchtkraft verwendet. Die Wirkung ist immer bunt, laut, kraftvoll, entschieden. Dieser Kontrast ist der einfachste der Farbkontraste, es wird keine qualitative Beziehung zwischen Farben hergestellt. Es besteht ein expressiver – kein harmonischer – Farbkontrast.

Interessante Ergebnisse erzielt man durch die Verwendung einer Hauptfarbe, die anderen Farben werden nur in geringen Mengen (Quantitätskontrast) eingesetzt.

Der Farbe-an-sich-Kontrast wird sehr stark in der Volkskunst, der Buchmalerei, der Glasmalerei, und in Strömungen der modernen Kunst (Picasso, Kandinsky, Miro) verwendet.

Der Hell-Dunkel-Kontrast
Verschiedene Helligkeitsstufen einer Farbe stehen miteinander in Beziehung
Bild: Hell-Dunkel-Kontrast (1) Hell-Dunkel-Kontrast (2)

Komplementär-Kontrast
Betrachten wir einige Zeit ein farbiges Quadrat und schließen dann die Augen, so erscheint uns als Nachbild ein Quadrat in der Komplementärfarbe. (Sukzessivkontrast)

Stellen wir in ein farbiges Quadrat ein graues Quadrat gleicher Helligkeit, so erscheint das Grau getönt durch die Komplementärfarbe. (Simultankontrast)
Bild: Simultan-Kontrast (1) Simultan-Kontrast (2)

Diese beiden Beobachtungen lassen den Schluss zu, dass unsere Augen Gleichgewicht herstellen und im Gleichgewicht sind, wenn Komplementärfarben in Beziehung zueinander stehen. Physikalisch ergänzen sich Komplementärfarben auf Weiß (Spektralfarben) bzw. auf Grauschwarz (Pigmentfarben).

Dieses Komplementärfarben-Gesetz kann in mehrer Hinsicht bei der Verwendung von Farbkontrasten Anwendung finden:

• Verschiedene Graumischungen zu einer Farbe spielen mit dem Simultankontrast
• Zwei Komplementärfarben werden verwendet
• Komplementärfarben mit dazwischen liegenden “vermittelnden” Graustufenmischungen

Da die Farben auf Bildschirmen digitale Codes haben, kann man Farbcodes von Farben, die in harmonischen Beziehungen stehen, berechnen: Siehe Programmieren von harmonischen Farbcodes

Farbmodelle RGB und CMYK

Johann Moser — Thu, 15 Dec 2005 07:00:43 +0000

Computerfarben und Drei-Farben-Modelle

Farben am Bildschirm werden mit Hilfe des Dreifarbenmodells RGB erzeugt: Die Farben werden aus unterschiedlichen Intensitäten der drei Farbanteile Rot, Grün, Blau (RGB) erzeugt. Das RGB-Farben-Modell ist additiv, das heißt, die drei Grundfarben geben addiert Weiß.

Für Printfarben verwenden Druckereien das subtraktive CMYK-Modell, die Mischung mehrerer Farben (Pigmente) ergibt Schwarz. Als Faustregel gilt: Werden Farbpigmente verwendet (Malerei, Druckerei), so arbeitet man mit subtraktiven Farbmodellen – es wird bei der Verwendung mehrerer Farbkomponenten weniger Licht reflektiert und die Mischfarben werden dunkler. Werden Farben mit Licht projiziert (Bildschirm, Dias), verwendet man additive Farbmodelle – die Farbanteile addieren sich zu Weiß.

Web-Farben

Johann Moser — Thu, 15 Dec 2005 06:59:01 +0000

Codierung von Farben in html

Die Web-Farben, die von allen Systemen gleich dargestellt werden, sind in jeder der drei Farbkomponenten RGB Vielfache von 51, genauer Null- bis Fünffache von 51. Das ergibt je Farbanteil die dezimalen Zahlen 0, 51, 102, 153, 204, 255. Diese Zahlen erscheinen willkürlich. Im zweistelligen Hexadezimal-Code sind das die Zahlen 00, 33, 66, 99, CC, FF. Dieser Code zeigt die Systematik der Farbcodes deutlicher und wird standardmäßig in der Html-Sprache verwendet in der Form “#000000″ für Schwarz, “#FFFFFF” für Weiß, “#FF0000″ für Rot. Kombinert man die drei Farbanteile, so entsteht der Farb-Code einer Misch-Farbe, beispielsweise “#CC3366″.

Als WebFarben gelten jene Farbcodes, die aus Kombinationen von 00, 33, 66, 99, CC, FF der drei Farbkomponenten zusammengesetzt sind. Nur diese 216 Kombinationen werden auf allen Plattformen und Browsern gleich dargestellt. Diese Farben nennt man daher browserunabhängige Farben, plattform-unabhängige Farben oder WebFarben.

Codierung von Web-Farben in HTML

Johann Moser — Fri, 15 Dec 2000 07:02:12 +0000

Die Beschränkung in der Verwendung von Farben auf die beschriebenen Web-Farben ist nicht mehr sinnvoll, da man davon ausgehen kann, dass die meisten Bildschirme bzw. Grafikkarten eine entsprechend hohe Farbtiefe haben, um mehr als 256 Farben richtig darstellen zu können.

Die Beschränlung war früher nötig, als die nicht darstellbaren Farben vom Computer als Mischfarbe mit Hilfe von Mustern angenähert wurden und auf eine ordentliche Darstellung von nicht-Web-Farben kein Verlass war.

Da es den Begriff Web-Farben nach wie vor gibt, lasse ich die folgende Erklärung in meiner Sammlung von Texten über die Farbenlehre.

Die Web-Farben, die von allen Systemen gleich dargestellt werden, sind in jeder der drei Farbkomponenten RGB Vielfache von 51, genauer Null- bis Fünffache von 51. Das ergibt je Farbanteil die dezimalen Zahlen 0, 51, 102, 153, 204, 255. Diese Zahlen erscheinen willkürlich. Im zweistelligen Hexadezimal-Code sind das die Zahlen 00, 33, 66, 99, CC, FF. Dieser Code zeigt die Systematik der Farbcodes deutlicher und wird standardmäßig in der HTML-Sprache verwendet in der Form “#000000″ für Schwarz, “#FFFFFF” für Weiß, “#FF0000″ für Rot. Kombiniert man die drei Farbanteile, so entsteht der Farb-Code einer Misch-Farbe, beispielsweise “#CC3366″.

Als Web-Farben gelten jene Farbcodes, die aus Kombinationen von 00, 33, 66, 99, CC, FF der drei Farbkomponenten zusammengesetzt sind. Nur diese 216 Kombinationen werden auf allen Plattformen und Browsern gleich dargestellt.

Diese Farben nennt man daher browserunabhängige Farben, plattformunabhängige Farben oder Web-Farben.