Was ist ein HEX-Farbcode?
Ein HEX-Farbcode (auch Hex-Wert oder Hexadezimalfarbe) ist eine Darstellung von Farben im hexadezimalen Zahlensystem. Er wird im Webdesign, in CSS und in Grafikprogrammen verwendet und beginnt immer mit einem Rautezeichen (#), gefolgt von sechs Zeichen (0-9 und A-F).
Der Code setzt sich aus drei Paaren zusammen, die jeweils den Rot-, Grün- und Blauanteil (RGB) der Farbe repräsentieren. Beispiel: #FF5733 bedeutet maximales Rot (FF), mittleres Grün (57) und wenig Blau (33) – ergibt ein kräftiges Orange.
HEX zu RGB umrechnen
Die Umrechnung von HEX zu RGB ist einfach, wenn du das Prinzip verstehst: Jedes Zeichenpaar im HEX-Code entspricht einem Dezimalwert zwischen 0 und 255.
So funktioniert die Umrechnung: Nimm ein Zeichenpaar (z.B. „FF"). Wandle jeden Buchstaben in seinen Dezimalwert um (A=10, B=11, C=12, D=13, E=14, F=15). Berechne: Erste Ziffer × 16 + zweite Ziffer. Für „FF": 15 × 16 + 15 = 255.
Beispiel #3498DB: 34 = 3×16+4 = 52 (Rot), 98 = 9×16+8 = 152 (Grün), DB = 13×16+11 = 219 (Blau). Ergebnis: RGB(52, 152, 219) – ein schönes Blau.
RGB zu HEX umrechnen
Der umgekehrte Weg funktioniert genauso: Teile jeden RGB-Wert durch 16. Der ganzzahlige Teil ist die erste Ziffer, der Rest die zweite. Wandle Werte über 9 in Buchstaben um (10=A, 11=B usw.).
Beispiel RGB(255, 128, 0): 255÷16 = 15 Rest 15 = FF, 128÷16 = 8 Rest 0 = 80, 0÷16 = 0 Rest 0 = 00. Ergebnis: #FF8000 (Orange).
HEX vs RGB: Wann was verwenden?
HEX-Codes sind kompakter und werden traditionell in CSS und HTML bevorzugt. Sie lassen sich leicht kopieren und sind in Farbpaletten und Design-Tools Standard.
RGB-Werte sind intuitiver lesbar – du siehst direkt, wie viel Rot, Grün und Blau enthalten ist. RGB ermöglicht zudem die Angabe von Transparenz als RGBA (z.B. rgba(255, 0, 0, 0.5) für halbtransparentes Rot).
Beide Formate beschreiben exakt dieselben Farben und können beliebig ineinander umgerechnet werden. Die Wahl ist meist Geschmackssache oder Projektvorgabe.
Die HEX-Kurzschreibweise
Wenn alle drei Farbpaare aus identischen Zeichen bestehen, kann die 3-stellige Kurzform verwendet werden: #FFAA00 wird zu #FA0, #112233 zu #123. Der Browser verdoppelt automatisch jede Ziffer.
Diese Notation ist in CSS vollständig unterstützt und spart Zeichen im Code. Nicht jede Farbe lässt sich kürzen – #FF5733 hat keine Kurzform, da die Paare unterschiedlich sind.
Wichtige Farbcodes für Webdesign
Schwarz: #000000 oder #000, Weiß: #FFFFFF oder #FFF, Rot: #FF0000 oder #F00, Grün:#00FF00 oder #0F0, Blau: #0000FF oder #00F,Grau (50%): #808080.
CSS bietet auch 140 benannte Farben wie „red", „blue", „coral" oder „steelblue". Für präzise Kontrolle sind HEX- oder RGB-Werte jedoch die bessere Wahl.
Tipps für die Farbwahl
Kontrast beachten: Text sollte sich deutlich vom Hintergrund abheben. Tools wie der WebAIM Contrast Checker helfen bei der Prüfung. Farbharmonien nutzen: Komplementärfarben, analoge Farben oder Triaden erzeugen ansprechende Designs.Weniger ist mehr: Eine begrenzte Farbpalette wirkt oft professioneller als viele verschiedene Farben.