RGB-Farbwerte verwenden

Hinweis: Der Autor des Artikels ist kein ausgebildeter Fachmann zum Thema. Alle hier getroffenen Aussagen sind nach bestem Wissen sowie gegebenenfalls nach persönlicher Einschätzung des Autors getroffen. Dabei ist es leider nicht auszuschließen, dass einige Angaben veraltet, irreführend oder sonstwie fehlerhaft sind. Letztendlich liegt es in der Verantwortung jedes einzelnen Lesers, die hier gemachten Angaben zu überprüfen und gegebenenfalls weitere Informationen einzuholen. Der Autor kann und will darum keine Garantie oder Haftung für Probleme oder Verluste, die trotz oder wegen der Befolgung der hier genannten Ratschläge eintreten, übernehmen. Jeder Leser hat natürlich die Möglichkeit, die folgenden Ratschläge nicht zu befolgen oder sie gar nicht erst zu lesen.

Wie verwendet man RGB-Farben?

An einigen Stellen, insbesondere beim Webdesign oder beim Umgang mit Graphiken finden sich Farbangaben in Form von sogenannten RGB-Farbwerten. Dieser Artikel soll beschreiben, was diese bedeuten und wie man in der Praxis mit ihnen arbeitet.

Die Bedeutung der Farbwerte

Zweierblöcke für Rot, Grün und Blau

Ein RGB-Farbwert besteht üblicherweise aus sechs Zeichen (oft steht vor diesen sechs Zeichen noch ein "#"-Zeichen). Diese sechs Zeichen teilen sich auf in drei Zweierblöcke, wobei der erste Zweierblock für die Farbe Rot, der zweite Block für Grün und der dritte Block für Blau steht. Dies erklärt auch den Namen dieser Farbbezeichnung: RGB steht für Rot-Grün-Blau (oder englisch: Red-Green-Blue). Ein RGB-Wert sieht also zum Beispiel wie folgt aus: #5573B9. Wer sich den Namen RGB merken kann, weiß so zugleich die Reihenfolge der einzelnen Farbblöcke. Dabei sagt jeder Zweierblock aus, mit welchem Anteil die jeweilige Farbe in der Gesamtfarbe erscheint. Je größer also die Zahl im roten Farbblock ist, desto mehr rot ist in der Ergebnisfarbe enthalten.

Zahlen und Buchstaben

Solange man Zahlenblöcke von "00" bis "99" verwendet, ist alles klar. Allerdings sind die Zahlen im Hexadezimalsystem dargestellt, das nicht nur die Ziffern "0-9" kennt, sondern auch die Ziffern "A"-"F". Dabei ist "A" soviel wert wie eine "10", "B" soviel wie eine "11" und so weiter. Der Grund für diese "komische" Schreibweise ist, dass man in jedem Block mehr als die hundert Zahlen ("00" - "99") darstellen wollte, aber trotzdem pro Block nur zwei Zeichen verwenden wollte. Durch die Blockschreibweise mit den Buchstaben und Zahlen lassen sich für jeden Farbblock 256 unterschiedliche Werte einstellen. Für die Gesamtfarbe lassen sich also 256*256*256 = 16.777.216 verschiedene Farbnuancen herstellen. Das sollte ausreichen.

Die richtigen Farbwerte finden

Selber mischen

Mit dem RGB-Farbwert kann man die Ergebnisfarbe selbst zusammenmischen, in dem man den Anteil der drei Grundfarben variiert. Wie ein Maler kann man die Farbzusammensetzung solnage verändern, bis man eine Ergebnisfarbe gefunden hat, die einem zusagt. Für den Einstieg reicht es vielleicht schon folgendes zu wissen:

• Es gibt drei Zweierblöcke in der Reihenfolge Rot-Grün-Blau
• In jedem Zweierblock hat die erste Ziffer die größte Wirkung, die zweite dient jeweils zur Feinjustierung
• "F" ist immer die größte Ziffer und "0" die kleinste.
• Je mehr Einzelfarben man hinzugibt, desto heller werden die Farben. So ergibt #000000 schwarz und #FFFFFF ergibt weiß.
• Leuchtende Farben erreicht man, indem man die gewünschte Farbe hochsetzt und die Nebenfarben weitgehend wegläßt. So ergibt etwa #FF0000 Knallrot.
• Pastellfarben erreicht man, indem man von weiß (#FFFFFF) ausgehend die "ungewünschten Farben" etwas verringert. So ergibt etwa #CCCCFF Pastellblau.
• Graustufen man, wenn jeder Zweiblock, die gleichen Zahlen hat. So ergibt etwa #838383 ein dunkles #D1D1D1 ein helles Grau.

Auf der Webseite http://chir.ag/projects/name-that-color kann man in das Feld "Your Color:" seinen Farbwert eingeben und erhält diesen dann gleich angezeigt. Über dem Feld mit der Ergebnisfarbe steht außerdem der Name der Farbe (Zusatz "solid") oder der Farbe, die der eingegebenen Farbe am ähnlichsten ist (Zusatz "approx.")

Farbkatalog anschauen

Wenn man durch Ausprobieren die richtige Farbe nicht findet, kann man die Webseite http://chir.ag/projects/name-that-color auch einfach als Farbkatalog verwenden. Wenn man einfach eine "schöne" Farbe aber keine bestimmte Farbe sucht, findet man hier eine große Auswahl von Farben mit ihren RGB-Werten. Einen besonderen Farbkatalog findet man auch bei http://www.mvps.org/dmcritchie/excel/colors.htm. Dieser listet 56 typische Excel-Farben mit ihren RGB-Farbwerten. Allerdings sind diese Geschmackssache, sofern man nicht im Excel-Farb-Style gestalten will.

Bekannte Farbe herausfinden

Falls man jedoch eine ganz bestimmte Farbe sucht (zum Beispiel die genaue Farbe einer Firma), dann braucht man ein Bild, das diese Farbe enthält. Dieses kann man dann mit einem Malprogramm untersuchen. Die meisten Malprogramme haben eine "Pipetten"-Funktion mit der man eine Farbe im Bild auswählen kann und dann auch ihren Farbwert angezeigt bekommt.

Falls dass eigene Malprogramm diese Funktion nicht anbietet, kann man das kostenlose Malprogram Paint.NET verwenden. Hier klickt man im Farbenauswahlfenster (falls dieses nicht sichtbar ist, kann man es mit dem Menupunkt "Fenster" aktivieren) auf den Button "Mehr >>" um die Farbwerte der aktuell gewählten Farbe angezeigt zu bekommen. Nun wählt man im "Tools"-Fenster (das mit den vielen kleinen Symbolen) die Pipette aus (wer es nicht findet: wenn man einige Sekunden ruhig auf ein Symbol zeigt, erscheint der Name des Werkzeugs - der Name der Pipette lautet "Farbauswahl"). Mit der Pipette klickt man im Bild auf die gewünschte Farbe und erhält dann im Farbfenster ihren Farbwert angezeigt.

Farbwerte berechnen

Wenn man die Farben nach mathematischen Gesichtspunkten berechnen will oder ausrechnen will, wie groß der Farbanteil bei einer Farbe mit einem bestimmten RGB-Farbwert ist, dann kommt man nicht um das Hexadezimalsystem herum. Darum hier noch mal die Übersetzung zum Nachgucken:

• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

Die Umrechnungsformeln lauten dabei:

• RGB --> Zahlenwert

Ziffer1*16 + Ziffer2 (wobei A als 10 zählt, B als 11 usw.)

Beispiel: der RGB-Farbwert #239AFD zerfält in die Zweierblöcke 23 (rot), 9A (grün) und FD (blau). Also gilt nach der Formel:

Rot: 2*16 + 3 = 35 Grün: 9*16 + 10 = 154 Blau: 15*16 + 13 = 253

• Zahlenwert --> RGB

Die Formel lautet Ziffer2=Wert%16; Ziffer1=(Wert-Ziffer2)/16 oder Ziffer1=round(Wert/16); Ziffer2=(Wert-Ziffer1*16)

Beispiel: um 253 aus dem vorigen Beispiel in die zwei Hexadezimalbuchstaben umzurechnen, rechnet man 253/16 = 15,8125. Die erste Ziffer ist die Zahl vor dem Komma, also die 15, also nach Liste ein "F". Die Zweite Ziffer berechnet man nun aus der Differenz von F*16 und der gesuchten Zahl Ziffer2= 253-15*16 = 13. Und damit laut Liste ein F.

• Prozentwerte

Um Farben in Prozenten auszurechnen, braucht man zusätzlich noch Prozentrechnung, um den Zahlenwert in einen Prozentwert umzurechnen. Dazu muss man wissen, dass 0 der kleinste Wert (=0%) und 255 der größte Wert (=100%) ist.

Beispiel: der Wert 253 aus dem ersten Beispiel entspricht (253/255) * 100% = 99,21%. Die Beispielfarbe hat also 99,81% das maximal möglichen Blauwert. Der Zahlenwert für ein 80%igen Blauanteil wäre (80/100) * 255 = 204

Um von RGB-Wert zu Prozentwert zu kommen, muss man zweimal rechnen. Einmal zwischen Prozent und Zahlenwert und einmal zwischen Zahlenwert und RGB-Wert.

Sonstiges

• In den meisten Fallen ist es egal, ob die Buchstaben im RGB-Wert groß oder klein geschrieben werden. #aa00bb ist also meist genauso gut wie #AA00BB
• In seltenen Fällen wird der RGB-Farbwert auf drei Zeichen gekürzt. Dann muss jeder Buchstabe gedoppelt werden: #A0B steht also in Wirklichkeit für #AA00BB. Dieser Fall kommt allerdings eher selten vor. Wenn jemand ihn benutzt führt das häufig zu Kompatibilitätsproblemen. Diese Ultrakurzschreibweise sollte man also, wenn es geht immer vermeiden.