farbcoderechner
Zurück zum Tool

Ratgeber · Grundlagen

Wie Bildschirme Farben darstellen: Pixel, Subpixel und Farbräume

Ein Bildschirm mischt jede Farbe aus drei Lichtquellen pro Bildpunkt. Wie das funktioniert, was Bittiefe und Farbräume damit zu tun haben und warum der gepickte Wert trotzdem exakt bleibt.

6 Min Lesezeit 1.371 Wörter 4 FAQs
Jan-Tristan Rudat
Jan-Tristan RudatRedakteur
Geprüft am

Wenn du mit einem Color Picker eine Farbe von deinem Bildschirm abgreifst, liest du einen exakten Zahlenwert aus, etwa #3B82F6 oder rgb(59, 130, 246). Dieser Wert ist eindeutig. Trotzdem kann dieselbe Farbe auf dem Laptop deines Kollegen anders aussehen als auf deinem Monitor. Um zu verstehen, warum das so ist und warum der gepickte Wert dennoch korrekt bleibt, lohnt ein Blick darauf, wie ein Display Farben überhaupt erzeugt.

Der Pixel als kleinster Bildpunkt

Ein Bildschirm besteht aus einem Raster winziger Bildpunkte, den Pixeln. Das Wort ist eine Kurzform von “picture element”. Ein Full-HD-Display hat 1920 mal 1080 Pixel, ergibt also gut zwei Millionen einzeln ansteuerbare Punkte. Bei 4K sind es bereits über acht Millionen.

Jeder Pixel kann zu einem bestimmten Zeitpunkt genau eine Farbe annehmen. Das Bild, das du wahrnimmst, entsteht erst dadurch, dass dein Auge diese Millionen Farbpunkte nicht einzeln auflöst, sondern zu Flächen, Kanten und Verläufen verschmilzt. Je höher die Pixeldichte, gemessen in Pixeln pro Zoll (ppi), desto feiner wirkt das Bild und desto weniger nimmst du das Raster wahr.

Entscheidend ist die Frage, wie ein einzelner Pixel seine Farbe erzeugt. Ein Pixel ist nämlich kein einfarbiger Punkt, sondern selbst aus drei Bestandteilen zusammengesetzt.

Subpixel und additive Farbmischung

Jeder Pixel besteht aus drei Subpixeln: einem roten, einem grünen und einem blauen. Diese drei Lichtquellen liegen so dicht beieinander, dass dein Auge sie aus normalem Betrachtungsabstand nicht trennen kann. Stattdessen verschmelzen sie zu einem einzigen Farbeindruck.

Hier kommt die additive Farbmischung ins Spiel. Bildschirme sind selbstleuchtend, sie senden Licht aus. Anders als bei Farbe auf Papier, wo sich Pigmente überlagern und Licht schlucken (subtraktive Mischung), addieren sich beim Display die einzelnen Lichtanteile. Leuchten alle drei Subpixel mit voller Intensität, entsteht Weiss. Sind alle drei dunkel, bleibt der Pixel schwarz. Jede andere Farbe ergibt sich aus einer Kombination der drei Helligkeiten.

Ein kräftiges Gelb etwa entsteht nicht durch ein gelbes Subpixel, sondern durch volles Rot plus volles Grün bei abgeschaltetem Blau. Magenta ergibt sich aus Rot und Blau, Cyan aus Grün und Blau. Genau diese Logik steckt hinter dem RGB-Modell, mit dem du Farben im Web und in deinem Color Picker definierst.

RGB-WertRotGrünBlauErgebnis
255, 0, 0vollausausReines Rot
0, 255, 0ausvollausReines Grün
255, 255, 0vollvollausGelb
255, 0, 255vollausvollMagenta
255, 255, 255vollvollvollWeiss
0, 0, 0ausausausSchwarz

Die unterschiedlichen Display-Technologien unterscheiden sich darin, wie sie das Licht der Subpixel erzeugen. Bei LCD-Panels strahlt eine durchgehende Hintergrundbeleuchtung, und Flüssigkristalle drehen sich so, dass sie pro Subpixel mehr oder weniger Licht durch einen Farbfilter lassen. Bei OLED leuchtet jedes Subpixel selbst, weshalb ein abgeschaltetes Subpixel echtes Schwarz liefert statt nur abgedunkeltes Hintergrundlicht. Das Grundprinzip der RGB-Mischung bleibt aber bei beiden gleich.

Bittiefe: Wie viele Farben ein Display kennt

Damit ein Subpixel nicht nur an oder aus sein kann, sondern Zwischenstufen darstellt, braucht es eine abgestufte Helligkeitssteuerung. Wie fein diese Abstufung ist, bestimmt die Bittiefe.

Der verbreitete Standard sind 8 Bit pro Kanal. Mit 8 Bit lassen sich 2 hoch 8, also 256 verschiedene Werte darstellen, nummeriert von 0 bis 255. Jeder der drei Kanäle hat also 256 Stufen. Kombiniert man alle drei, ergeben sich 256 mal 256 mal 256 mögliche Farben, das sind 16.777.216, gerundet rund 16,7 Millionen. Diese Zahl steht hinter dem Begriff “True Color” oder “24 Bit Farbtiefe” (8 Bit mal 3 Kanäle).

Genau deshalb reicht ein Hex-Code mit sechs Stellen wie #3B82F6 aus, um jede dieser Farben eindeutig zu benennen. Je zwei Hex-Stellen kodieren einen Kanal: 3B ist der Rotwert, 82 der Grünwert, F6 der Blauwert. Jede dieser Stellengruppen entspricht einer Zahl zwischen 0 und 255.

Höhere Bittiefen gibt es ebenfalls. 10 Bit pro Kanal liefern 1024 Stufen pro Farbe und über eine Milliarde Kombinationen. Das ist vor allem bei HDR-Inhalten und in der professionellen Bildbearbeitung relevant, weil weiche Farbverläufe dann ohne sichtbare Streifenbildung dargestellt werden. Fürs klassische Web bleibt 8 Bit der gemeinsame Nenner.

Farbräume: sRGB und Display-P3

Die Bittiefe legt fest, in wie viele Stufen der verfügbare Farbbereich unterteilt wird. Aber wie gross dieser Bereich überhaupt ist, bestimmt der Farbraum, auch Gamut genannt. Der Gamut beschreibt, welche reinen Farben ein Display physikalisch maximal erzeugen kann, also wie gesättigt sein rötestes Rot und sein grünstes Grün sind.

Der wichtigste Farbraum fürs Web ist sRGB, festgelegt 1996 in der Norm IEC 61966-2-1. Wenn nichts anderes angegeben ist, gehen Browser, Betriebssysteme und Webseiten davon aus, dass Farben in sRGB gemeint sind. Der Hex-Wert in deinem Color Picker bezieht sich standardmässig auf diesen Raum. sRGB hat einen vergleichsweise kleinen Gamut, was historisch sinnvoll war, weil alte Röhrenmonitore nicht mehr darstellen konnten.

Moderne Displays in Smartphones, Tablets und höherwertigen Monitoren beherrschen einen grösseren Gamut. Der verbreitetste ist Display-P3, ursprünglich aus der Kinotechnik stammend. P3 deckt einen rund 25 Prozent grösseren Farbbereich ab als sRGB, vor allem bei kräftigen Rot- und Grüntönen. Ein sattes Signalrot kann auf einem P3-Display intensiver leuchten, als es in sRGB überhaupt darstellbar wäre.

FarbraumNorm/HerkunftGamut relativ zu sRGBTypischer Einsatz
sRGBIEC 61966-2-1 (1996)Referenz, 100 %Web-Standard, allgemeine Inhalte
Display-P3DCI-P3 abgeleitetca. 125 %Moderne Mobil- und Pro-Displays
Adobe RGBAdobe (1998)ca. 135 % bei GrünDruckvorstufe, Fotografie

CSS unterstützt seit dem Color Module Level 4 die explizite Angabe von Farben im P3-Raum, etwa mit color(display-p3 1 0 0). Ohne solche Angabe bleibt sRGB die sichere Annahme, weil sie auf jedem Gerät einheitlich verstanden wird.

Warum dieselbe Farbe verschieden aussieht

Jetzt lässt sich erklären, warum ein und derselbe Wert auf zwei Bildschirmen unterschiedlich wirkt. Dafür gibt es mehrere Ursachen, die zusammenspielen.

Erstens die Kalibrierung. Jedes Display verlässt das Werk mit einer eigenen Abstimmung von Helligkeit, Kontrast und Weisspunkt. Ein Monitor kann standardmässig kühler (bläulicher) abgestimmt sein, ein anderer wärmer (gelblicher). Ohne professionelle Kalibrierung mit einem Messgerät weicht jedes Gerät ein Stück vom Ideal ab. Auch deine manuellen Einstellungen und der Nachtmodus verschieben die Darstellung.

Zweitens der Gamut. Ein Wert, der im grösseren P3-Raum interpretiert wird, erscheint gesättigter als auf einem reinen sRGB-Display, sofern das System die Farbe nicht sauber umrechnet. Fehlt ein korrektes Farbmanagement, kann eine für sRGB gedachte Farbe auf einem Wide-Gamut-Display übertrieben kräftig wirken.

Drittens die Hardware selbst. Die Materialien der Subpixel, die Art der Hintergrundbeleuchtung und das Alter des Panels beeinflussen, welches Licht tatsächlich abgestrahlt wird. Zwei Geräte mit identischer Ansteuerung emittieren nie zu hundert Prozent dasselbe Spektrum.

Viertens das Umfeld. Tageslicht, Raumbeleuchtung und der Betrachtungswinkel verändern deine Wahrnehmung, ohne dass sich am Bildschirm irgendetwas ändert. Eine Farbe in der Mittagssonne wirkt anders als nachts bei Schreibtischlampe.

Was das fürs Farbpicken bedeutet

Hier liegt der entscheidende Punkt, und er ist beruhigend: Die Variation betrifft die Wahrnehmung, nicht den Wert.

Wenn du eine Farbe pickst, liest dein Werkzeug die digitale Pixelinformation aus, also die Zahlen, mit denen die Subpixel angesteuert werden. Diese Zahlen sind exakt und eindeutig. #3B82F6 ist auf jedem Gerät derselbe Code, unabhängig davon, wie hell oder gesättigt der Pixel dir gerade erscheint. Der Code ist die Anweisung, nicht das wahrgenommene Ergebnis.

Das bedeutet praktisch: Du kannst dich auf den gepickten Wert verlassen, wenn du ihn weitergibst, in eine CSS-Datei einträgst oder mit einem Designer abstimmst. Alle arbeiten mit derselben Zahl. Dass die Farbe bei jedem leicht anders aussieht, ist normal und kein Fehler des Pickers.

Wer trotzdem maximale Konsistenz braucht, etwa im Markendesign, sollte den Bildschirm kalibrieren und bei sRGB als gemeinsamer Basis bleiben, solange kein Wide-Gamut-Workflow nötig ist. Für den Alltag genügt das Wissen, dass der Zahlenwert die verlässliche Grösse ist und die optische Abweichung systembedingt dazugehört.

So schliesst sich der Kreis vom einzelnen Subpixel über die Bittiefe und den Farbraum bis zu der einen Zahl, die du am Ende kopierst. Der Bildschirm mischt das Licht, deine Wahrnehmung interpretiert es, und der Color Picker hält den exakten Wert fest, der diesen ganzen Prozess ausgelöst hat.

FAQ

Häufige Fragen

Warum sieht dieselbe Farbe auf zwei Bildschirmen unterschiedlich aus?

Jedes Display hat eine eigene Hintergrundbeleuchtung, eigene Subpixel-Materialien und eine eigene Werkskalibrierung. Auch der darstellbare Farbumfang (Gamut) unterscheidet sich. Derselbe RGB-Wert steuert die Subpixel zwar identisch an, das tatsächlich abgestrahlte Licht weicht aber je nach Hardware und Einstellung ab.

Was bedeutet 8 Bit pro Kanal?

Pro Farbkanal (Rot, Grün, Blau) stehen 8 Bit zur Verfügung, also 256 Helligkeitsstufen von 0 bis 255. Drei Kanäle ergeben 256 hoch 3, das sind rund 16,7 Millionen mögliche Farbkombinationen. Diese Tiefe nennt man auch 24 Bit oder True Color.

Ist der mit dem Color Picker ausgelesene Wert verlässlich?

Ja. Der ausgelesene RGB- oder Hex-Wert ist exakt, weil er die digitale Pixelinformation direkt liest. Nur die optische Wahrnehmung auf dem Bildschirm variiert je nach Kalibrierung und Gamut. Der Zahlenwert selbst ist eindeutig und übertragbar.

Was ist der Unterschied zwischen sRGB und Display-P3?

sRGB ist der seit 1996 etablierte Standardfarbraum fürs Web mit einem vergleichsweise kleinen Gamut. Display-P3 deckt einen rund 25 Prozent größeren Bereich ab, vor allem gesättigte Rot- und Grüntöne. Moderne Geräte nutzen P3, der Web-Default bleibt aber sRGB.

Anzeige

Quellen

Worauf dieser Ratgeber sich stützt

Veröffentlicht · zuletzt geprüft
Verantwortlich: Jan-Tristan Rudat
Anzeige
Anzeige
Anzeige
Anzeige