Hexadezimale Farben im Webdesign

Jeder Webdesigner begegnet Codes wie #FF5733 oder #2C3E50. Diese hexadezimalen Farbcodes sind eine kompakte Methode, Farben mit demselben Zahlensystem anzugeben, das Programmierer für Binärdaten verwenden. Das Verständnis von Hex-Farben ermöglicht präzise Farbkontrolle im Webdesign.

Wie Hex-Farben funktionieren

RGB-Farbmodell

Digitale Bildschirme erzeugen Farben durch Mischung von rotem, grünem und blauem Licht.

• Jeder Kanal hat 256 Intensitätsstufen (0-255)
• 0 = kein Licht, 255 = volle Intensität
• 256 × 256 × 256 = 16,7 Millionen mögliche Farben

Hexadezimale Darstellung

• 256 Werte = FF in Hex (zwei Hex-Ziffern)
• Kompakter als Dezimal (255,128,0 vs. FF8000)
• Einfach einzugeben und zu merken

Beispiel: #FF5733

• FF = 255 Rot (Maximum)
• 57 = 87 Grün (mittel)
• 33 = 51 Blau (niedrig)
• Ergebnis: Leuchtend orange-rote Farbe

Häufige Farbwerte

Hex-Farben in Kurzschreibweise

CSS erlaubt eine 3-stellige Kurzschreibweise, wenn beide Ziffern in jedem Paar gleich sind.

Funktionsweise

• #RGB wird zu #RRGGBB erweitert
• Jede Ziffer wird verdoppelt

Beispiele

• #FFF = #FFFFFF (Weiß)
• #000 = #000000 (Schwarz)
• #F00 = #FF0000 (Rot)
• #369 = #336699 (Stahlblau)

Einschränkung

#FF5733 kann nicht gekürzt werden (57 ≠ 55 oder 77)

Hex mit Alpha (Transparenz)

8-stelliges Hex: #RRGGBBAA

Modernes CSS unterstützt das Hinzufügen eines Alpha-Kanals:

• AA = Deckkraft (00 = transparent, FF = undurchsichtig)
• #FF573380 = 50 % transparentes Orange-Rot

Häufige Alpha-Werte

• FF = 100 % undurchsichtig
• CC = ~80 % undurchsichtig
• 80 = 50 % undurchsichtig
• 40 = 25 % undurchsichtig
• 00 = vollständig transparent

Hex in RGB umwandeln

Methode

1. Jedes 2-stellige Paar nehmen
2. Von Hexadezimal in Dezimal umrechnen

Beispiel: #4A90D9

• 4A = 4×16 + 10 = 74 Rot
• 90 = 9×16 + 0 = 144 Grün
• D9 = 13×16 + 9 = 217 Blau
• RGB: rgb(74, 144, 217)

Kurzreferenz

• 00 = 0
• 40 = 64
• 80 = 128
• C0 = 192
• FF = 255

RGB in Hex umwandeln

Methode

1. Jeden Dezimalwert (0-255) in Hex (00-FF) umrechnen
2. Mit dem Präfix # zusammensetzen

Beispiel: rgb(100, 200, 150)

• 100 = 64 (6×16 + 4)
• 200 = C8 (12×16 + 8)
• 150 = 96 (9×16 + 6)
• Hex: #64C896

Schnelle Berechnung

• Durch 16 teilen = erste Ziffer
• Rest = zweite Ziffer
• 100 ÷ 16 = 6 Rest 4 → 64

Hex-Farben in CSS verwenden

Standardverwendung

color: #FF5733;

background-color: #2C3E50;

border: 2px solid #E74C3C;

Alternative CSS-Farbformate

• rgb(255, 87, 51) – RGB dezimal
• rgba(255, 87, 51, 0.5) – RGB mit Alpha
• hsl(9, 100%, 60%) – Farbton, Sättigung, Helligkeit

Wann welches Format verwenden

• Hex: Am häufigsten, kompakt
• RGB/RGBA: Wenn Farben dynamisch berechnet werden
• HSL: Wenn Helligkeit/Sättigung angepasst werden

Beliebte Farbpaletten in Hex

Material Design

• Primärblau: #2196F3
• Grün: #4CAF50
• Rot: #F44336
• Lila: #9C27B0

Flat-UI-Farben

• Türkis: #1ABC9C
• Smaragd: #2ECC71
• Nassasphalt: #34495E
• Alizarin: #E74C3C

Fazit

Hexadezimale Farbcodes sind eine kompakte Methode, RGB-Farben im Basis-16-Zahlensystem auszudrücken. Jedes Ziffernpaar (00-FF) repräsentiert die Intensität eines Farbkanals von 0-255. Das Verständnis von Hex-Farben hilft Webdesignern, effizient mit Farbwählern, Stylesheets und Design-Tools zu arbeiten. Auch wenn Tools die Umrechnung übernehmen können, ermöglicht das Wissen über die Funktionsweise von Hex-Farben bessere Farbmanipulation und schnelleres Debugging.

Verwandte Artikel

• Zahlensysteme umrechnen: Schritt-für-Schritt-Anleitung
• Binär, Dezimal und Hexadezimal: Zahlensysteme verstehen
• Binär in der Informatik
• Bits vs. Bytes