Der 24 Bit RGB Farbraum

Nachdem ich gestern Sie eingehend über den Farbkreis im RGB-Universum eingeführt habe, bzw. dem Farbeck (Wobei es fast egal ob Kreis, Dreieck oder Sechseck, hier geht es nur um das Farbverständnis) möchte ich Ihnen nun etwas über das Farbzusammenspiel berichten.

Gehen wir nochmal auf das Farbeck ein, wie Sie im Beitrag zum RGB Farbeck sehen können, befindet sich in der Mitte nochmals eine Linie. Ich unterteile dabei das Farbeck in zweit Teile, der kalten und der warmen Zone. Hier noch mal die Abbildung in verkleinerter Form, damit ersparen Sie sich ein hin und her springen zwischen den Beiträgen:
Wie Sie hier nochmals sehen, sind auf diesem Farbeck alle verfügbaren Farben abgebildet. Das einzige was Sie hier nicht sehen können sind die Helligkeitsunterschiede und die Farbtöne mit abnehmender Sättigung, was die Farben noch sehr knallig erscheinen lässt. Solche Farben könnten wir höchstens in einem Animationsfilm verwenden oder für eine Webseite die für Kinder geeignet ist, sehr Kontrastreich und satt. Aber zurück zu der warmen und kalten Seite des Farbecks. Hier bezeichnet man als warm alle Farben die auf der linken Seite des Farbecks liegen und als kalt die rechten. Warme und kalte Farben sind wichtig um das spätere Design entsprechend zu gestalten.

Wichtig bei warm und kalt ist die Wirkung, warme Farben erzeugen wohlwollen, Sympathie, heimische Atmosphäre. Sie können jedoch auch für Vorsicht, hinweise und Fehler stehen. Aber dazu später mehr. Kalte Farben hingegen stehen für Distanz, Seriösität, Berechnung, Kühnheit, Coolness, ebend alles man mit kalt identifizert. Denken Sie nur an Gemälde wo vornehmend kalte Farben sind, man stellt damit oft winterliche Leiden, Einsamkeit und Leiden dar. Meist auch im Spannungsverhältnis zu warmen Farben. Eine gute Farbpalette für winterliche Gemälde ist dabei die Kombination von Blau und Orange. Das Blau erzeugt die kühle des Winters und das Orange die Melancholie der Hoffnung, die wenigen Sonnenstrahlen des Tages die durch das Wolkendach brechen.

Bevor wir nun mit der Auswahl der Farben für die Webseite beginnen können, brauchen wir auf jedenfall eine geeignetere Farbpalette, wo auch die ungestättigten in Grau verlaufende Farben mit dabei sind, sowie die verschiedenen Helligkeiten. Deshalb kommen wir nun um eine 3-Dimensionale Darstellung nicht mehr herum, das Farbeck hat nun ausgedient, wir erstellen uns nun ein geeigneteres Farbmuster, bzw. Darstellungsgrafik. In dem Fall mein Entwurf eines Dreidimensionalen RGB Farbcoordinatensystems für den RGB Farbraum:

Hier sehen Sie leider nur 3 der 6 Flächen, deshalb habe ich zur Verdeutlichung noch die Farbeckpunkte mackiert. Wie Sie sehen kommt auch hier das Farbsechseck vor, ergänzt noch durch die 2 zusätzlichen Kontrastfarben Schwarz und weiß. Die uns aber zeitgleich auch als Sättigungskoordinate dienen. Dies wäre in der Grafik die Gerade d (d=Sättigung). Sie verbindet die Farben schwarz und weiß. Diesen Würfel müssen Sie sich nach innen nun wie eine Zwiebelhaut vorstellen. Da mir rein technisch keine geeigente Darstellung der Farben + Helligkeit + Sättigung eingefallen ist, erkläre ich dies Ihnen nun anhand eines kleinen Beispielfilms. Das ganze also nun noch mit Hilfe der 4. Dimension, der Zeit.

Video vom RGB-Farbraum zum besseren Verständnis:

Im ersten Teil können Sie noch einmal alle 8 Farbeckpunkte sehen und ihrem Mischverhalten und die Logik des Mischverhaltens. Im zweiten Teil sehen Sie Wie sich der Farbraum zum Mittelpunkt von Gerade d hinbewegt. Was den Farben ihre Sättigung nimmt. Da wir uns zum Mittelpunkt hinbewegen werden die Farben mit Annäherung an d alle Grau. Sie dürfen sich also den Farbraum nicht einfach nur mit 6 Flächen vorstellen, sondern ihn als ganzes Volumen sehen. Er ist nicht hohl, sondern hinter jeder Fläche die wir abblättern, versteckt sich eine weitere nur ebend mit weniger Sättigung. Wie eine Zwiebel. Im zweiten Teil blättern wir den Farbmantel immer mehr ab bis wir zum Kern vorstoßen, dem absoluten Grau, da wir in der Mitte sind.

Die Koordinaten x,y und z sind nicht einfach eine nette Dekoration und auch die Beschriftung nicht. Hierbei handelt es sich um exakte Koordinaten im Farbraum mit der wir jede Farbe ansprechen können. Sie werden nun Fragen ? Aber warum nur bis 1 ? Haben RGB-Farben nicht 255 schritte pro Farbkanal ? Jein, RGB-Farben haben eigentlich 256 Schritte bei einer 24Bit Farbtiefe und die 1 ist nur symbolisch, da man von 0 bis 1 ja in sovielen Schritten wie man mag interpolieren kann. 0 0,1 0,2 oder auch noch feiner 0,0001 0,0002 0,0003 aber so feine Schritte würde das menschliche Auge eh nicht unterscheiden können. Deshalb sind 256 Schritte pro Farbkanal völlig ausreichend. Wenn man alle Farbschritte zusammenaddiert 256 x 256 x 256 kommen wir auf ein Farbsortiment von genau 16777216 Farben. Man spricht da meist immer von 16,7 Mio Farben.

Warum nicht mehr Farben und was haben die Hexadezimalen Zahlen immer damit zu tun ? Das ganze hat etwas mit Speicher eines Bildes zu tun, im Moment speichern wir ein Bild in 24 Bit pro Pixel. Das heisst, für jeden der 3 Farbkänal 8 Bit und wenn wir nun Bits in Bytes umrechnen, so haben wir pro Farbkanal 1 Byte zur Verfügung. 1 Byte kann vieles sein und doch maximal nur 1 Zeichen. Die Zahl 0 hat 1 Byte, die Zahl 10 1 Byte und die Zahl 256 2 Byte. Sie scheidet also aus, wie können wir also nun 256 Farbstufen in 1 Byte speichern ? Dazu bedient man sich des Hexadezimalen Zahlensystems. Denn dort hört die 1 Bytezahl nicht mit 99 auf sondern erst mit 255, das Hexadezimale Zahlensystem geht nehmlich 1 2 3 4 5 6 7 8 9 A B C D E F, erst jetzt bräuchten wir ein weiteres Byte um auf 256 zählen zu können. Die Maximalgrenze von 1 Byte-Zahlen, wäre demzufolge dann das FF. FF steht in dem Fall für die 255, da wir die 0 aber mit rechnen, haben wir dann dort tatsächlich 256 Schritte pro Farbkanal und halten die 1 Bytegrenze pro Farbkanal ein. Ein Schwarz wäre dann in dem Fall ein 000000, ein Weiss FFFFFF und ein Rot FF0000. 1 Byte pro RGB-Farbkanal macht zusammen 3, 3 Byte = 24 Bit. Jetzt wissen Sie zumindest, warum man immer von 24 Bit RGB spricht. Bei Graustufenbildern brauchen wir keine 24 Bit, denn wir haben ja nur einen Farbkanal, den von Schwarz zu weiss, deshalb nimmt dort nur 8 Bit. Graustufen 8 Bit = Graustufen 24 Bit nur mit weniger Speicherbedarf, von der Qualität gibt es da keinen Unterschied zwischen den beiden Bildern. Deshalb lohnt es oft Schwarz/Weiss Bilder auch wirklich nur in 8 Bit zu speichern, da man 2/3tel des Speicherbedarfs spart.

Wie spreche ich Koordinaten an und welch Sinn hat ein Farbraum ? In meinem Beispielbild, habe ich die Farben Rot, Grün, Blau bewusst in die Reihenfolge der Koordinaten gebracht. Wenn ich ein volles Rot ansprechen müsste, so würde dies die Koordinaten 1:0:0 haben. Was gleichbedeutend mit der Reglereinstellung 255 0 0 ist. Da wir auf der X Achse nur 1 nach rechts gehen und dort ist auch schon das Rot. Im Falle von einem absolutem Grau, wäre dies dann 0,5:0,5:0,5 was gleichbedeutend mit dem Mittelpunkt von d zwischen schwarz und weiss ist. Machen wir es etwas schwieriger.

Nehmen wir einmal eine exotische Farbe… wie wäre es mit Pfirsich ? Rein von den Werten bei den 3 Kanalreglern wäre der RGB Wert für die Farbe Pfirsich 255 153 102. Im Koordinatensystem entspreche dies einer Position von 1:0,6:0,4. Also auf der X-Achse ein nach rechts zu rot, dann auf der y Achse 0,6 nach oben, dann wären wir bei einem Gelborange angekommen und nun noch 0,4 auf der Z-Achse nach vorn, nun sind wir genau bei der Farbe Pfirsich. Hier mal die Abbildung, wo die Farbe Pfirsich liegt, damit sie mir auch glauben und es besser nachvollziehen können, was ich hier schreibe.

Da mein Würfel perspektivisch nicht 100 % korrekt ist, sieht es etwas unwirklich aus, da ich die Grafiken alle noch von Hand zeichne. Aber wie Sie jedoch erkennen können, stimmen meine Berechnungen überein. Natürlich hätte ich das Koordinatensystem gleich in 256 Schritten aufteilen können. Doch ich möchte das Sie sich das mit der 0-1 Version einprägen, da Sie dies auch später in Farbsystem gut verwenden können die weniger oder mehr Bit beinhalten bzw. mehr oder weniger als 256 Farbstufen pro Kanal. Das wars auch schon zum RGB-Farbraum. Ich hoffe ich konnte Ihnen etwas weiterhelfen und habe etwas mehr Verständnis für Farben, Farbräume und RGB erreichen können. Dies sind nehmlich die Grundsätze die Sie beherrschen sollten, wenn ich später auf Grundlagen des Designs eingehen möchte. Übrigens, ein Farbschritt bei 256 Farbstufen, bzw. 255 (incl.0) pro Kanal entspreche ganz genau einem Schritt von 0,003921568627450980392156862745098 im Koordinatensystem. Die Zahl können Sie sich mal einprägen, falls mal irgendwo ein Designerquiz ist :)

Weitere Informationen zu RGB und Farbräumen:

• Der RGB-Farbraum (Rot Grün Blau) ist ein Maßraum in dem die Menge aller Farben durch drei Koordinaten definiert ist: die auf Rot, Blau und Grün Bezug nehmen. Notwendigkeit für die Definition einer solchen mathematischen Konstruktion ergibt sich aus technischen Realitäten bei denen darstellbare Farben durch drei Ausgangsstoffe erzeugt werden sollen. …weiterlesen
• Der Begriff „Farbraum“ ist in der digitalen Fotografie und Bildbearbeitung mit mehreren Bedeutungen belegt und führt daher zu einiger Verwirrung. Farben lassen sich in verschiedenen mathematischen und physikalischen Modellen dreidimensional (räumlich) darstellen. …weiterlesen
• Kompression in verschiedenen Farbräumen: Der RGB-Farbraum ist dem menschlichen Auge nachempfunden, das Zapfen für die Wahrnehmung von rotem, grünem und blauem Licht besitzt. Der RGB-Farbraum wird in der Regel als Würfel dargestellt, wobei die x-, y- und z-Achse die Intensitäten der Farben Rot, Grün und Blau darstellen. …weiterlesen
• Ein Farbraum ist eine Menge von Farben, die von einem Ein- oder Ausgabegerät (Scanner, Bildschirm, Drucker etc.) oder unter spezifischen Bedingungen erkannt bzw. dargestellt werden können. …weiterlesen

Vielen Dank für Ihren Besuch, für eventuelle Fragen stehe ich natürlich gern im Kommentarfeld zur Verfügung. Demnächst, Farben und das Zusammenspiel zueinander. Welche Wirkung erziele ich mit einzelnen Farben und welche mit bestimmten Farbkombinationen.

Weitere Infos:

• Keine(r)

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.