HEX-Farbcode

Ein HEX-Farbcode (Hexadezimal-Farbcode) ist eine kompakte Schreibweise für digitale Farben, die im Webdesign und in CSS als Standard gilt. Der Code besteht aus einem Rautezeichen (#) gefolgt von sechs Zeichen, die den RGB-Farbwert in Hexadezimalnotation darstellen. Die sechs Zeichen gliedern sich in drei Paare für Rot, Grün und Blau, jeweils von 00 (kein Farbanteil) bis FF (maximaler Farbanteil). Das ergibt 256 Stufen pro Kanal und insgesamt 16,7 Millionen darstellbare Farben. HEX-Codes sind in der Praxis unentbehrlich: Jedes CSS-Stylesheet, jedes Design-Tool und jedes Corporate-Design-Dokument arbeitet mit dieser Notation. Im Styleguide einer Marke sind alle Farben in HEX dokumentiert, weil sich der Wert ohne Konvertierung direkt im Code verwenden lässt. Ein bekanntes Beispiel: #075CE1 ist das Primärblau von PAKU Media, #0098FA die Sekundärfarbe. Wer im Webdesign mit Farben arbeitet, muss HEX-Codes lesen und notieren können, da sie in Browsern, Figma, Photoshop und jedem anderen gängigen Tool als Standardformat auftreten.

Was ist ein HEX-Farbcode?

Ein HEX-Farbcode ist eine sechsstellige Schreibweise für digitale Farben, die im Webdesign und in CSS als Standard gilt. Das Kürzel "HEX" steht für Hexadezimal, also das 16er-Zahlensystem. Der Code beginnt mit einem Rautezeichen (#), gefolgt von sechs Zeichen, die die Farbinformation in drei Paaren kodieren: die ersten zwei Stellen für Rot, die mittleren zwei für Grün und die letzten zwei für Blau (#RRGGBB). Jedes Paar nimmt Werte von 00 (kein Farbanteil) bis FF (maximaler Farbanteil) an, was 256 Stufen pro Kanal und insgesamt 16,7 Millionen mögliche Farben ergibt. Im professionellen Webdesign sind HEX-Codes unverzichtbar: Jede Unternehmensfarbe wird mit ihrem exakten HEX-Wert im Styleguide festgehalten, damit sie auf Websites, Apps und digitalen Werbemitteln konsistent erscheint. PAKU Medias Primärblau ist #075CE1, das Sekundärblau #0098FA. Alternativ lassen sich dieselben Farben als RGB-Werte ausdrücken, HEX ist aber die kompakteste und gängigste Schreibweise in der täglichen Webentwicklung.

Aufbau eines HEX-Codes

Ein HEX-Farbcode wie #075CE1 (PAKU Media Blau) besteht aus drei Paaren:

Die Hexadezimalzahlen reichen von 00 (kein Anteil, = 0) bis FF (maximaler Anteil, = 255). Das ergibt 256 Stufen pro Kanal und insgesamt 16,7 Millionen mögliche Farben.

Kurzschreibweise

Wenn alle drei Paare aus identischen Zeichen bestehen, lässt sich der Code auf drei Zeichen kürzen:

• #FFFFFF → #FFF (Weiß)
• #000000 → #000 (Schwarz)
• #FF6600 → #F60 (Orange)
• #075CE1 → keine Kurzform möglich (Zeichen nicht doppelt)

HEX-Codes in CSS

Im Webdesign sind HEX-Codes die kompakteste Art, Farben zu definieren:

.button {
  background-color: #075CE1;
  color: #FFFFFF;
  border: 2px solid #0098FA;
}

Alternative CSS-Notationen für die gleiche Farbe:

• rgb(7, 92, 225) – RGB-Funktion
• hsl(222, 94%, 45%) – HSL-Notation
• color(display-p3 0.03 0.36 0.88) – Display P3 Farbraum

HEX mit Transparenz (Alpha)

Moderne Browser unterstützen 8-stellige HEX-Codes mit Transparenzwert:

• #075CE1FF = 100 % deckend
• #075CE180 = ca. 50 % deckend
• #075CE100 = vollständig transparent

Alternative: Die CSS-Funktion rgba(7, 92, 225, 0.5) für 50 % Transparenz.

HEX im Corporate Design

Im Styleguide eines Corporate Designs werden Farben in mehreren Formaten dokumentiert. HEX ist der Standard für alle digitalen Anwendungen:

HEX-Farben finden und konvertieren

Nützliche Tools für die Arbeit mit HEX-Codes:

• Browser DevTools: Farbwähler direkt im Inspektor
• Coolors.co: Farbpaletten generieren und konvertieren
• Adobe Color: Harmonische Farbschemata erstellen
• Figma / Sketch: Design-Tools zeigen HEX-Codes direkt an
• ColorZilla: Browser-Extension zum Aufnehmen von Farben

Best Practices

• Konsistenz wahren: Immer die exakten HEX-Werte aus dem Styleguide verwenden
• Groß- oder Kleinschreibung: #075CE1 und #075ce1 sind identisch – einigen Sie sich auf eine Konvention
• Barrierefreiheit prüfen: Kontrastwerte mit Tools wie WebAIM testen – mindestens 4,5:1 für Text
• Variablen nutzen: In CSS Custom Properties definieren: --color-primary: #075CE1;

HEX-Farbcodes sind die Lingua franca des Webdesigns. Jeder Designer und Entwickler sollte sie lesen, verstehen und sicher einsetzen können.