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.
Aufbau eines HEX-Codes
Ein HEX-Farbcode wie #075CE1 (PAKU Media Blau) besteht aus drei Paaren:
| Paar | Wert | Farbe | Dezimal |
|---|---|---|---|
| 07 | Rot-Anteil | Sehr wenig Rot | 7 |
| 5C | Grün-Anteil | Mittlerer Grünanteil | 92 |
| E1 | Blau-Anteil | Hoher Blauanteil | 225 |
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-Funktionhsl(222, 94%, 45%)– HSL-Notationcolor(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:
| Farbe | HEX | Verwendung |
|---|---|---|
| Primärblau | #075CE1 | CTAs, Links, Akzente |
| Sekundärblau | #0098FA | Hover-Effekte, Gradients |
| Weiß | #FFFFFF | Hintergründe |
| Schwarz | #000000 | Haupttext |
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.