1 Farbe Farbe auf dem Screen Grundfarben des Lichts Grundfarben des Lichts Die visuelle Wahrnehmung von Farben erfordert Licht, das von den Rezeptoren in der Netzhaut des Auges aufgenommen, umgewandelt und an das Sehzentrum im Gehirn weitergeletitet wird. Dort entsteht dann die eigentliche Farbempfindung. Je nach Wellenlänge und Intensität der elektromagnetischen Strahlung im sichtbaren Bereich ändert sich die Farbempfindung. Wird das weisse Licht durch einen schmalen Spalt auf ein Glasprisma gerichtet, werden die sogenannten Spekralfarben sichtbar. In einem solchen Farbspektrum dominieren drei Farbbereiche, nämlich Rot, Grün und Blau. Experimente haben aufgezeigt, dass sich mit rotem, grünem und blauem Licht fast alle Farbnuancen nachbilden lassen. Man bezeichnet diese drei Farben deshalb als die Grundfarben des Lichtes, bzw. als die additive Farbmischung, weil sich bei der Bildung von Mischfarben Lichtanteile von mehreren Grundfarben addieren. Bei Farbscreens kommt diese Art der Farbmischung praktisch zur Anwendung. Grundfarbe des Lichtes
Grundlagen der Farbenlehre 12 www.andreashofer.ch Farbmischung Additive Mischung (Addition von Licht) Die Grundfarben der additiven Mischung sind: Rot, Grün und Blau. Mit drei Lichtquellen in diesen Farben lassen sich durch entsprechende Kombinationen die drei helleren Farben Cyanblau, Gelb und Magenta erzeugen. Treffen alle drei Lichter aufeinander, resultiert ein Weiss. Additive Farbmischung (drei Lichtquellen) Johannes Itten (1913-1967): Zwölfteiliger Farbkreis Subtraktive Farbmischung (Überlagerung von Filtern) Malerisches Vermischen der drei Grundfarben Magentarot, Cyanblau und Gelb zu einem dunklen Grau Subtraktive Mischung (Licht wird weggefiltert) Die Grundfarben der subtraktiven Mischung sind Gelb, Cyan und Magenta. Ein Farbfilter vor einer Lichtquelle filtert Licht weg. Daraus resultiert eine Verdunklung. Durch entsprechende Überlagerung der Filter entstehen die dunkleren Farben Rot, Grün und Blau. Die Überlagerung aller Filter erzeugt Schwarz. Der zwölfteilige Farbkreis Wenn die drei Grundfarben der subtraktiven Mischung im Dreieck angeordnet werden, resultieren in den Zwischenräumen durch entsprechende Mischungen Rot, Grün und Blau. Durch das Ermischen der folgenden Zwischentöne entsteht der zwölfteilige Farbkreis. Die Farben die sich in dieser Anordnung gegenüberliegen, verhalten sich komplementär zueinander. Mischen mit Pigmenten Streicht man die Grundfarben Cyan, Gelb und Magenta als Lasuren übereinander, resultiert eine ähnliche Wirkung wie beim Anwenden von Filtern. Bei vorgängigem Vermengen dieser drei Farben und nachträglichem Aufstreichen, wirken die Mischfarben nicht gleich rein. Wir haben es hier nicht mehr mit einer reinen subtraktiven Mischung zu tun. Die drei Grundfarben der additiven Mischung auf der Drehscheibe Kreiselmischung (rotierende Scheibe) Die optische Mischung Farben im feinen Raster nebeneinander gesetzt (ohne Überlagerung) mischen sich aus Distanz optisch. In ihrem Misch-Verhalten zeigen sich ähnliche Wirkungsweisen wie bei der additiven Mischung, Rot und Blau erzeugen eine Magenta-färbung. Optische Farbmischung (Raster) Punktraster im Vierfarbendruck (cmyk) Farbraster im Photoshop Andreas Hofer: 24.02.2008 Die Kreisel- oder Speedmischung Rot, Grün und Blau auf der Drehscheibe angeordnet nähern sich während der Rotation einem Grau. Mit Hilfe des Nachbildeffektes kann in dieser Versuchsanordnung nach längerem Betrachten von Farbflächen eine additive Mischung erlebt werden. Die Nachbilder der gelben und der cyan gefärbten Flächen sind Blau und Rot. Diese lassen über dem Grün der zweiten Figur ein Cyan und ein Gelb entstehen. Der Vierfarben-Druck Im Vierfarbendruck sind Cyan, Gelb, Magenta und Schwarz im Raster überlagert. Im Zusammenspiel mit dem weissen Papier lassen sich aus Distanz betrachtet die gewünschten Nuancierungen erzeugen.
Grundlagen der Farbenlehre 12 www.andreashofer.ch Farbsysteme Runges Kugel im virtuellen Raum (Baumann und Sulzer) Philipp Otto Runge (1777-1810) In seinem Todesjahr legte Philipp Otto Runge die Farbkugel vor. Vom zweidimensionalen Farbkreis, aufgebaut mit den Grundfarben Gelb, Magenta, Cyan und der Vergrauung zur Mitte hin, ist er zum räumlichen Modell vorgedrungen, in dem er an den beiden Polen ober- und unterhalb des Kreises, Weiss und Schwarz positioniert hat. Noch heute fasziniert dieses Farbsystem. Baumann und Sulzer haben es Ende 20. Jahrhundert im virtuellen Raum erlebbar gemacht. Johann Wolfgang Goethe (1749-1832) Im Zentrum Goethes Auseinandersetzung mit der Farbe steht neben den Prismastudien vorallem die Ermittlung deren Wirkungsweise auf den Menschen. Seine Arbeit ist ein wertvolles Gegenüber zu Newtons (1643-1727) analytischen Untersuchungen. Philipp Otto Runge (1777-1810) kugel 1810 Michel Eugène Chevreul (1786-1889) Chevreuls Arbeit hat viele Künstler stark beeinflusst. Einer seiner Beiträge war die Untersuchung der gegenseitigen Beeinflussung von Farben. 1839 erschien sein Werk, in dem er über die Auseinadersetzung mit den Farbkontrasten versuchte eine ästhetische Grundlage zu schaffen. Goethes (1749-1832) Farbkreis mit symbolischer Auswertung Michel Eugène Chevreul 1839 Munsellsystem 1905-1906 NCS-Farbraum Albert Henry Munsell (1858-1910) Bei der Umsetzung eines Farbkörpers, ausgerichtet nach den drei Variablen Farbton, Helligkeit und Sättigung, basierend auf der empfindungsmässigen Gleichabständigkeit aller benachbarten Farben, stellte Munsell fest, dass dies mit einem regelmässigen Körper nicht machbar ist und entwickelte ein System, bei dem er die Eigenhelligkeit der Grundfarben berücksichtigte. Er erhielt so einen unregelmässigen Farbbaum, der als Munsell- Farbsystem weltweite Verbreitung fand. NCS-System (seit Ende 60er Jahre) Das NCS-System basiert auf den vier psychologischen Elementarempfindungen gelb, rot, blau und grün. Diese sind regelmässig auf einem Kreis angeordnet. Die äussere Form des Systemes ist ein Doppelkegel, an dessen Spitzen sich das Weiss und das Schwarz befinden. Innerhalb der einzelnen Dreiecke des entsprechenden Bunttones sind die empfindungsmässig ermittelten Nuancen in zehn Prozent-Schritten platziert. Mittels einem Code, der den Buntton, den Schwarzanteil und den Buntanteil umschreibt, kann die Position jeder Farbe im Doppelkegel bestimmt werden. Das NCS- System hat zum Ziel, dass jeder, der über die normale Fähigkeit des Farbsehens verfügt, Farbbestimmungen vornehmen kann. Der vierteilige NCS-Farbkreis Andreas Hofer: 24.02.2008 NCS-Farbdreieck Robert F.Wilsons: Farbkreis mit entsprechenden Nachbildern (1938) Weissliches Nachbild des roten Punktes (Komplementärfarbe)
Grundlagen der Farbenlehre www.andreashofer.ch 12 Optische Mischung Komposition mit den Grundfarben: Rot, Grün und Blau Werden die Grundfarben der additiven Mischung (Rot, Grün, Blau) im Raster nebeneinander platziert, lassen sich, je nach Anordnung, Farben ermischen, die sich Cyan, Magenta und Gelb nähern. Diese Mischform weist Parallelen zur additiven Mischung auf. Im Beispiel links erscheinen die resultierenden Farben gebrochen, weil zwischen den zwei Farbpaaren immer auch ein schwarzer Streifen angeordnet ist und es sich hier nicht um Lichtquellen, sondern um reflektiertes Licht handelt. Dieselbe Komposition am Bildschirm betrachtet, lässt die Mischfarben intensiver erscheinen. Der Bildschirm funktioniert nach diesem Prinzip. Rot, Grün und Blau sind die Grundbausteine, mit denen alle andern Farben additiv ermischt werden. Auf dem linken Bild ist eine Nahaufnahme eines Monitors zu sehen. Zum Vergleich die additive Mischung mit Diaprojektoren erzeugt: Mit den drei Lichtquellen Rot, Grün und Blau lässt sich das Farbspektrum ermischen. Die Summe aller farbigen Lichtquellen ergibt ein Weiss. Jede Farbe lässt, mit anderen zusammen im Raster angeordnet, optische Mischungen entstehen. In der Weise lassen sich experimentell interessante Farbstudien entwickeln. In der Übung geht es darum eine freie Komposition mit zwei bis drei ausgewählten Farben (evtl. unter zusätzlicher Verwendung von Schwarz oder Weiss) so aufzubauen, dass durch die Anwendung im Raster spezifische optische Mischungen sichtbar werden. Dasselbe Grau im Raster mit gelben und blauen Streifen kombiniert Andreas Hofer: 24.02.2008 Freie Farbstudie zur optischen Mischung: Aufgebaut mit Rot, Grün, Blau und Schwarz.
Bildschirmfarben Ein Bildschirmpixel besteht in der Regel aus drei Subpixeln die zur Darstellung der drei Farbwerte genutzt werden. Bei genügendem Abstand vom Bildschirm gehen die Pixel additiv in einander über und der Betrachter bekommt den Eindruck der definierte RGB-Farbe. Jeder der drei Farbwerte in einem Pixel wird im RGB-System durch 8 Bit (= 1 Byte) dargestellt. Da jedes Bit 2 Zustände haben kann (1 oder 0), hat jeder dieser drei Grundfarben 256 (2 8 ) mögliche Werte (0-255). Die Farbtiefe gibt an, wie viele Farbinformationen insgesamt für jedes Pixel in einem Bild verfügbar sind. In diesem System hat jedes Pixel 24 Bit zur Verfügung (8 Bit * 3 Grundfarben = 24 Bit). Mehr Bitinformationen pro Pixel bedeuten mehr Farben und eine präzisere Farbdarstellung. In diesem Fall sind bis zu 16,7 Mio. (2 24 = 16 777 216) unterschiedliche Farben definierbar. ( Bit pro Pixel ) Farben = 2 Jede Farbe auf dem Bildschirm definiert sich durch jeweils einen Rotwert, einen Grünwert und einen Blauwert (RGB-System). Das RGB-System ist ein Licht-Farbmodell und baut auf der additiven Farbmischung auf: werden die drei Grundfarben gemischt, entsteht der Farbton Weiß. 1 Byte = 8 Bit 1 Kilobyte (KB) = 1024 Bytes 1 Megabyte (MB) = 1024 KB 1 GigaByte (GB) = 1024 MB 1 Terabyte (TB) = 1024 GB 1 Petabyte = 1024 TB Eine RGB-Farbe kann durch 3 Werte angegeben werden, jeweils zwischen 0 und 255. Die drei Werten definieren den Anteil von Rot, Grün und Blau. Wird die Grundfarbe nicht benötigt, beträgt der entsprechende Zahlenwert 0 (= kein Licht). 255 entspricht dem maximalen Anteil. rot(0)+grün(0)+blau(0)=schwarz rot(255)+grün(255)+blau(255)=weiss rot(255)+grün(255)=gelb rot(255)+blau(255)=magenta grün(255)+blau(255)=cyan
1 Bit pro Pixel = 2 Farbe(2 1 ) 4 Bit pro Pixel = 16 Farben(2 4 ) 24 Bit ( =2 Bytes ) pro Pixel = 16.777.216 Farben (2 24 ) (Treu Color, RGB) 32 Bit ( =3 Bytes ) pro Pixel = 16,7 Millionen Farben plus 8-Bit-Graustufen-Maske (Alpha-Kanal) (2 32 ) 2 Bit pro Pixel = 4 Farben(2 2 ) 8 Bit ( =1 Bytes ) pro Pixel = 256 Farben(2 8 ) Bilder aus wikipedia.org
Um die Helligkeitswerte der 3 Grundfarben im Web-bereich anzugeben benutzt man meistens die hexadezimale Schreibweise. Eine hexadezimale Ziffer kann 16 Zustände haben (Zahlen 0 bis 9, Buchstaben A bis F = 16 Zustände). Für jeden hexadezimalen Farbwert (Rot-, Grün-, Blauwert) stehen 2 Ziffern (16 x 16 = 256 mögliche Werte) zwischen 00 (=0) und FF(=255) zur Verfügung. Somit können auch mit diesem Schema (256 x 256 x 256 =) 16,7 Millionen Farben definiert werden. Die ersten zwei Ziffern definieren den Rotanteil, die dritte und die vierte Ziffern den Grünanteil und die letzten zwei Ziffer definieren den Blauanteil. Um hexadezimale Zahlen nicht mit anderen Zahlen zu verwechseln, wird ihnen oft 0x (ActionScript) oder # (html) vorangestellt. Schwarz (0, 0, 0) 000000 Weiss (255, 255, 255) FFFFFF Rot (255, 0, 0) FF0000 Grün (0, 255, 0) 00FF00 Blau (0, 0, 255) 0000FF Gelb (255, 255, 0) FFFF00 Cyan (0, 255, 255) 00FFFF Magenta (255, 0, 255) FF00FF Konvertierung von Ziffernpaaren hexadezimal RGB absolut RGB prozentual(abgerundet) FF 255 100% EE 238 93% DD 221 87% CC 204 80% BB 187 73% AA 170 67% 99 153 60% 88 136 53% 77 119 47% 66 102 40% 55 85 33% 44 68 27% 33 51 20% 22 34 13% 11 17 7% 00 0 0% Dezimalzahlen umgerechnet in Hexadezimalzahlen : 0 = 00 51 = 33 102 = 66 153 = 99 204 = CC 1 = 01 52 = 34 103 = 67 154 = 9A 205 = CD 2 = 02 53 = 35 104 = 68 155 = 9B 206 = CE 3 = 03 54 = 36 105 = 69 156 = 9C 207 = CF 4 = 04 55 = 37 106 = 6A 157 = 9D 208 = D0 5 = 05 56 = 38 107 = 6B 158 = 9E 209 = D1 6 = 06 57 = 39 108 = 6C 159 = 9F 210 = D2 7 = 07 58 = 3A 109 = 6D 160 = A0 211 = D3 8 = 08 59 = 3B 110 = 6E 161 = A1 212 = D4 9 = 09 60 = 3C 111 = 6F 162 = A2 213 = D5 10 = 0A 61 = 3D 112 = 70 163 = A3 214 = D6 11 = 0B 62 = 3E 113 = 71 164 = A4 215 = D7 12 = 0C 63 = 3F 114 = 72 165 = A5 216 = D8 13 = 0D 64 = 40 115 = 73 166 = A6 217 = D9 14 = 0E 65 = 41 116 = 74 167 = A7 218 = DA 15 = 0F 66 = 42 117 = 75 168 = A8 219 = DB 16 = 10 67 = 43 118 = 76 169 = A9 220 = DC 17 = 11 68 = 44 119 = 77 170 = AA 221 = DD 18 = 12 69 = 45 120 = 78 171 = AB 222 = DE 19 = 13 70 = 46 121 = 79 172 = AC 223 = DF 20 = 14 71 = 47 122 = 7A 173 = AD 224 = E0 21 = 15 72 = 48 123 = 7B 174 = AE 225 = E1 22 = 16 73 = 49 124 = 7C 175 = AF 226 = E2 23 = 17 74 = 4A 125 = 7D 176 = B0 227 = E3 24 = 18 75 = 4B 126 = 7E 177 = B1 228 = E4 25 = 19 76 = 4C 127 = 7F 178 = B2 229 = E5 26 = 1A 77 = 4D 128 = 80 179 = B3 230 = E6 27 = 1B 78 = 4E 129 = 81 180 = B4 231 = E7 28 = 1C 79 = 4F 130 = 82 181 = B5 232 = E8 29 = 1D 80 = 50 131 = 83 182 = B6 233 = E9 30 = 1E 81 = 51 132 = 84 183 = B7 234 = EA 31 = 1F 82 = 52 133 = 85 184 = B8 235 = EB 32 = 20 83 = 53 134 = 86 185 = B9 236 = EC 33 = 21 84 = 54 135 = 87 186 = BA 237 = ED 34 = 22 85 = 55 136 = 88 187 = BB 238 = EE 35 = 23 86 = 56 137 = 89 188 = BC 239 = EF 36 = 24 87 = 57 138 = 8A 189 = BD 240 = F0 37 = 25 88 = 58 139 = 8B 190 = BE 241 = F1 38 = 26 89 = 59 140 = 8C 191 = BF 242 = F2 39 = 27 90 = 5A 141 = 8D 192 = C0 243 = F3 40 = 28 91 = 5B 142 = 8E 193 = C1 244 = F4 41 = 29 92 = 5C 143 = 8F 194 = C2 245 = F5 42 = 2A 93 = 5D 144 = 90 195 = C3 246 = F6 43 = 2B 94 = 5E 145 = 91 196 = C4 247 = F7 44 = 2C 95 = 5F 146 = 92 197 = C5 248 = F8 45 = 2D 96 = 60 147 = 93 198 = C6 249 = F9 46 = 2E 97 = 61 148 = 94 199 = C7 250 = FA 47 = 2F 98 = 62 149 = 95 200 = C8 251 = FB 48 = 30 99 = 63 150 = 96 201 = C9 252 = FC 49 = 31 100 = 64 151 = 97 202 = CA 253 = FD 50 = 32 101 = 65 152 = 98 203 = CB 254 = FE 255 = FF
Schrift und Farbe/ Hintergrund - Farbe hat wichtige Funktion - Betrachter durch Farbreize animiert - Farbe verursacht keine Mehrkosten - Bewusster Einsatz von Farbe Farbe als Auszeichnung - Textstellen hervorheben - Inhalte strukturieren (Navigation) - Schmuckelement Farbe und Hintergrund - Bildschirmhintergrund sollte getönt sein - Gute Kontraste für gute Lesbarkeit Farbnuancen - Helle, feine Farbnuancen eignen sich nicht
Schrift und Farbe/Hintergrund Vom Bild zum Farbklima Farbstimmungen - Farben für speziellen Charakter oder Stimmung - Bestehende Farbigkeit (in Bildern z.b.) unterstützen - Farbklima ausgehend von Bildmaterial entwickeln (siehe links) - Tools, für die Entwicklung von Farbkonzepten
Schrift und Farbe/Hintergrund http://kuler.adobe.com Farbtool Bsp. kuler von Adobe für die Entwicklung von Farbkonzepten
Schrift und Farbe/Hintergrund Farbe und Gestaltungsanwendungen Positiv/Negativ-Text Negativtext - Monitor überstrahlt das weisse Schriftild - Weisser Text auf Schwarz wirkt fetter Positivtext - Weisser Hintergrund wird überstrahlt - Schwarze Schrift auf weissem Hintergrund wirkt feiner - Fette Schriften werden überstrahlt, und Punzen wirken kleiner - Die Geglättet Darstellung verbessert bei fetten Schriften die Lesbarkeit - Feine Schriften wirken bei Glättung grauer
Schrift und Farbe/Hintergrund Hintergrund/Kontrast - Kontrastreicher Hintergrund stört Lesbarkeit - Deutliche Farb- und Tonwerttrennung Struktur - Harte, stark strukturierte Hintergründe erschweren Lesbarkeit - Weichzeichnung Schattierung Schrift vor Hintergrund ev. Schattieren Farbe /Kontrast - Komplementärkontraste vermeiden - Scharz-Weiss-Kontraste vermeiden - Auf üppige Farbanwendung verzichten - Der Farbe Funktion zuordnen
Schrift und Farbe/Hintergrund www.muellerhess.ch www.schneitermeier.ch www.irmaboom.nl Farbe und Navigation - Farbe ist Struktur- und Navigationshilfe (z. B. Farben für Menüpunkte) - Unterstützt Leserführung - Setzt visuelle Akzente Kontrastbeispiele - Schwarze Schrift auf weissem Hintergrund abtönen (z.b. 80 90% Schwarz) - Hellgrauer statt weisser Hintergrund (10 20 % Schwarz) kombiniert mit schwarzer Schrift - Keine Komplementärkontraste - Helle nicht allzu leuchtende Buntfarben kombiniert mit schwarzem Hintergrund - Stark gesättigte Farben als Hintergrund vermeiden Farbbeispiele aus: comedia, Satztechnik Typografie, Bd. 5 Typografie am Bildschirm