Dieses Video ist über 1 Jahr alt und kann von der heutigen Qualität abweichen.

HTML Farbcodes / Hex-Codes erklärt

Inhalt

In diesem Video möchte ich euch eine Anwendung des Hexadezimalsystems zeigen, nämlich die Farbcodes.

Vor einiger Zeit hat Börni von brainfaqk gemeinsam mit den Jungs von TheSimpleClub das Hexadezimalsystem erklärt. Einleitend sprach er da von sogenannten Hexcodes oder HTML Farbcodes.

Diese schauen wir uns nun mal genauer an!

Man findet am häufigsten im Internet. So benutzt man sie z.B. im Webdesign für die Farbgestaltung, in Foren für Beiträge oder auch auf Twitter um bestimmte Bereiche oder Texte mit einer Farbe zu versehen.

Aber was sind eigentlich Farbcodes? Farbcodes sind entweder 3 einzelnen oder 3 zweistelligen aufeinander folgende Hexadezimalzahlen die jeweils für das Mischverhältnis der drei Grundfarben Rot, Grün und Blau stehen. Vorranggeführt werden sie immer mit einem Hashtag.

Diese Verwendung des Doppelkreuz existiert übrigens schon viel länger als die des Hashtags.

Die einzelnen Zahlen repräsentieren die jeweilige Leuchtkraft der Grundfarbe. So lassen sich verschiedene Farben vermischen.

Mit jeweils drei einzelnen Hexadezimalzahlen lassen sich 16*16*16 = 4096 verschiedene Farben darstellen.

Haben wir sechs Hexadezimalzahlen in 2er Blöcken lassen sich sogar 16*16*16*16*16*16 = 256*256*256 = 16.777.216 (16 Millionen) über 16 Millionen Farben darstellen.

Bei 16 Millionen Farben spricht man auch von „True Color“ da bei dieser Anzahl von Farben die Bilder für das menschliche Auge natürlich wirken.

Mit dem Alphakanal, der zusätzlich die Transparenz eines Pixels einstellen kann, sind bis zu 4.294.967.296 Farben möglich (4,2 Milliarden)!

Was die Anzahl der Farben für unsre Fotos bedeutet zeige ich euch an einem Beispiel!

Hier seht ihr ein Foto von „Isle of Skye“ mit über 16 Millionen Farben. Nämlich 256 Farbtöne pro Grundfarbe: Rot, Grün, Blau. Darunter ist zusätzlich ein Verlauf von Weiß nach Schwarz.

Hier dasselbe Bild mit nur 16 Helligkeitsabstufungen pro Grundfarbe, also 4069 Farben.

Haben wir nur noch 2 Farben, also z.B. schwarz und weiß, pro Grundfarbe zur Verfügung sieht das ganze so aus:

Aber kommen wir nun zurück und schauen uns einige Codes an.

Wir erinnern uns: um nun eine Farbe darzustellen müssen wir die die Leuchtkraft der Grundfarben Rot, Grün und Blau von 0 bis 255 wählen. Bei einem dreistelligen HTML-FarbCode haben wir dafür nur 16 verschiedene Abstufungen zur Verfügung.

Anschließend müssen die jeweiligen Zahlen der Grundfarben noch in Hexadezimalzahlen umgewandelt werden.

Ist bei allen die Leuchtkraft auf 0 so sind alle Farben dunkel, also haben wir die Farbe Schwarz: #000000.

Wenn wir die Leuchtkraft aber nun bei allen Farben voll aufdrehen so bekommen wir Weiß: #FFFFFF.

Das F steht hier bei für die 16 im Hexadezimalsystem.

Möchten wir nun z.B. eine Grundfarbe haben müssen wir einfach alle anderen Grundfarben ausblenden und nur die letzten beiden Ziffern komplett darstellen. #0000FF.

Wenn wir nun zwei Farben vermischen wollen müssen wir die jeweilige Leuchtkraft der 3 Farben erhöhen. Möchten wir z.B. die Farbe Gelb haben, so müssen wir Rot und Grün mischen: #FFFF00.

Um einen Orangeton zu bekommen brauchen wir alles Rot und etwas Grün: #FF8800.