Tipp: Hex Codes lesen
Wenn man am Computer mit Grafiken arbeitet, kommt man um sogenannte "Hex-Codes" nicht vorbei. Es sind Farbwerte, die irgendwie in Buchstaben und Zahlen angegeben werden. Klingt wie Magie, ist aber eigentlich ganz einfach.Zunächst einmal müssen wir wissen, wie ein Hex-Code überhaupt aufgebaut ist. Er besteht aus einem # und 6 Ziffern oder Buchstaben, z.B.
#F59B42
. Ob die Buchstaben klein- oder großgeschrieben werden, spielt keine Rolle.
Was sind das also für komische Zeichenabfolgen? Man kann einen Hex-Code in drei Teile aufteilen mit jeweils zwei Ziffern. In unserem Beispiel sind das die Pakete
F5
, 9B
und 42
. Sie geben den RGB-Wert an, also Rot, Grün, Blau.
- Rot: F5
- Grün: 9B
- Blau: 42
Das Hexadezimalsystem
Aber wie kann denn ein Rot-Wert "F5" sein? Das ist der Grund, warum Hex-Codes so heißen, wie sie heißen. Es kommt vom Hexadezimalsystem, also ein Zählsystem, das auf der 16 beruht. Unsere Zahlen sind ein Dezimalsystem (wir haben 10 verschiedene Ziffern, von 0 bis 9, also beruht es auf der Zahl 10). Nun ist es schwierig, ein Hexadezimalsystem darzustellen, ohne sich sechs neue Zeichen auszudenken. Daher bedient man sich einfach den Buchstaben. Das heißt von 0 bis 9 bleiben die Zahlen gleich wie im Dezimalsystem. Dann werden Buchstaben zur Hilfe genommen:- 10 = A
- 11 = B
- 12 = C
- 13 = D
- 14 = E
- 15 = F
Sobald einem die Zahlen oder Buchstaben ausgehen, setzt man eine 1 davor. Im Dezimalsystem entspricht das 8, 9, 10, 11, 12. Im Hexadezimalsystem entspricht das E, F, 10, 11, 12. Es wird also immer die letzte Ziffer hochgezählt, bis keine Zeichen mehr vorhanden sind. Dann wird die letzte Ziffer durch eine Null ersetzt und die Zahl davor eins hochgezählt oder, falls dort noch keine Ziffer steht, durch eine 1 ergänzt. Genauso wie wenn wir ganz normal zählen.
Falls ihr noch Schwierigkeiten habt, das Hexadezimalsystem zu verstehen, hier zähle ich einfach mal für euch:
Um Farbwerte lesen zu können, interessieren uns die genauen Werte gar nicht. Wir müssen nur einschätzen können, wo eine Zahl liegt. Wenn wir
F
lesen, wissen wir, dass es die höchste Zahl ist. Eine 8
liegt im Mittelfeld und 0
ist das niedrigste.
Die doppelten Ziffern
Vielleicht habt ihr auch schon Hex-Codes gesehen, welche nur aus 3 Ziffern bestehen, z.B.#000
. Das liegt daran, dass der Computer automatisch alle Ziffern verdoppelt. Aus #FDE
wird also #FFDDEE
und aus #3AC
wird #33AACC
.
Dieses Verdoppeln machen wir uns zu Nutze. Denn uns ist es eigentlich egal, ob es
F2
oder F5
ist. Der Wert ist hoch, das reicht uns zu wissen. Die zweite Ziffer ist sozusagen die Feinjustierung.
Für unser Beispiel heißt das nun: Wir streichen jede zweite Ziffer. Aus
#F59B42
wird #F94
.
Wir können also lesen, dass Rot = F, Grün = 9 und Blau = 4. Es gibt also sehr viel Rot, relativ viel Grün und etwas Blau. Wenn ihr euch gut mit Farbenmischen am PC auskennt, reicht euch diese Information vielleicht schon.
RGB-Farbwerte
Ansonsten gibt es jetzt einen kleinen Exkurs zu diesem Thema. Am besten nutzt ihr diese Seite als Hilfsmittel. Wenn man die RGB-Werte in Dezimalzahlen angibt, reichen die Werte von 0-255. In Hexadezimalzahlen von 0-FF.Das ist ein bisschen wie das Farbenmischen mit dem Tuschkasten in der Schule. Allerdings mischen wir hier Licht, daher gelten ein paar andere Regeln. Die wichtigste: Je mehr Farben man mischt, desto weißer wird die Farbe. Denn: Weißes Licht strahlt weiß, wenn alle Lichtwellen (=Farben) darin vorhanden sind. Schwarz, also dunkel, ist es, wenn Licht fehlt.
Was als nächstes auffällt, ist, dass wir Grün benutzen statt Gelb. Das ist erst mal etwas ungewohnt. Es gelten trotzdem einfache Regeln, die ihr mit den RGB-Reglern auf der Hilfsseite ausprobieren könnt:
- Je höher die Summe der Farbwerte, desto heller die Farbe (z.B.
255, 204, 238
) - Wenn alle drei Werte gleich sind, ergibt das einen Grauton (z.B.
140, 140, 140
) - Wenn zwei Werte gleich sind, zeigen diese Sättigung (=Grauwert) an und der dritte den Farbton (z.B.
230, 100, 100
) - Alle drei Werte auf Maximum ergeben Weiß (
255, 255, 255
) - Alle drei Werte auf Minimum ergeben Schwarz (
0, 0, 0
) - Rot + Grün = Gelb (
255, 255, 0
) - Rot + Blau = Magenta (
255, 0, 255
) - Blau + Grün = Cyan (
0, 255, 255
) - Rot + halb Grün = Orange (
255, 127, 0
) - Rot + halb Blau = Pink (
255, 0, 127
) - Blau + halb Rot = Violett (
127, 0, 255
)
Unser Beispiel #F59B42
Schauen wir uns also nochmal unser Beispiel an. #F59B42
wird zu #F94
vereinfacht. Es gibt viel Rot, relativ viel Grün und etwas Blau. Sozusagen hoch, mittel, wenig.
Könnt ihr mir sagen, welche Farbe es ist? Denkt kurz nach und lest weiter, wenn ihr die Lösung wissen wollt.
Wie hell ist die Farbe? Sie ist mittelmäßig hell, weil die Summe der Farbwerte im Mittelfeld liegt. Welchen Farbton hat der Farbwert? Er ist orange, denn Rot + halb Grün = Orange. Das Blau darin macht es etwas gräulicher und heller.
Inspiriert von diesem Artikel (Englisch)