Hex, RGB, HSL: Ein Schnellguide für alle anderen
Farbcodes entschlüsselt für Entwickler und Nicht-Designer, die einfach den richtigen Blauton brauchen.
Ein Designer schickt dir eine Farbe: #3B82F6. Du brauchst sie in RGB für eine Bibliothek. Oder du willst eine etwas dunklere Version. Oder du versuchst herauszufinden, warum sie auf deinem Monitor anders aussieht.
Farbsysteme sind nicht kompliziert, aber niemand erklärt sie gut. Hier ist, was du wirklich wissen musst.
HEX: Der Web-Standard
#3B82F6 gliedert sich so:
3B= Rot (59 in Dezimal)82= Grün (130 in Dezimal)F6= Blau (246 in Dezimal)
Jedes Paar ist eine Hexadezimalzahl von 00 bis FF (0-255 in Dezimal). Mehr = heller. #000000 ist schwarz. #FFFFFF ist weiß.
Kurzform existiert: #FFF = #FFFFFF, #09C = #0099CC. Drei Zeichen werden zu sechs erweitert, indem jedes verdoppelt wird.
RGB: Die Offensichtliche
rgb(59, 130, 246) ist dieselbe Farbe, nur anders geschrieben. Rot 59, Grün 130, Blau 246.
Einige Formate wollen Prozentangaben: rgb(23%, 51%, 96%). Dasselbe, andere Notation.
RGBA fügt Transparenz hinzu: rgba(59, 130, 246, 0.5) ist dieses Blau mit 50% Deckkraft.
HSL: Die tatsächlich nützliche
hsl(217, 91%, 60%) beschreibt Farbe anders:
- Hue/Farbton (217): Position auf dem Farbkreis. 0=rot, 120=grün, 240=blau.
- Saturation/Sättigung (91%): Intensität. 0%=grau, 100%=lebendig.
- Lightness/Helligkeit (60%): Helligkeit. 0%=schwarz, 50%=rein, 100%=weiß.
Warum HSL wichtig ist: Farben anzupassen ist intuitiv.
Willst du eine dunklere Version? Verringere die Helligkeit. Willst du eine gedämpfte Version? Verringere die Sättigung. Willst du eine völlig andere Farbe mit demselben „Gefühl"? Ändere den Farbton, behalte Sättigung und Helligkeit.
In HEX oder RGB erfordern diese Anpassungen Mathematik oder Raten. In HSL sind es einzelne Zahlenänderungen.
Zwischen ihnen konvertieren
Die Zahlen repräsentieren dieselbe Farbe unterschiedlich. #3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%).
Verwende einen Konverter, wenn du ein bestimmtes Format brauchst. Die meisten Design-Tools zeigen alle drei. CSS akzeptiert alle drei.
Häufige Situationen
„Mach diese Farbe dunkler" Konvertiere zu HSL, reduziere die Helligkeit um 10-20%, konvertiere zurück.
„Ich brauche Variationen für Hover-Zustände" Konvertiere zu HSL. Button: 60% Helligkeit. Hover: 55%. Active: 50%.
„Diese Farbe sieht ausgewaschen aus" Die Sättigung könnte zu niedrig sein. Versuche, sie in HSL zu erhöhen.
„Markenfarbe exakt treffen" Hole dir den Hex-Code aus den Markenrichtlinien. Schätze nicht nach Augenmaß.
„Farbe sieht auf verschiedenen Bildschirmen anders aus" Willkommen in der Farbkalibrierungs-Hölle. Verwende denselben Hex-Code; akzeptiere, dass Monitore variieren.
Barrierefreiheits-Hinweis
Farbkontrast ist wichtig. Heller Text auf hellem Hintergrund = unleserlich für viele Menschen.
Es gibt ein Verhältnis: 4,5:1 für normalen Text, 3:1 für großen Text. Es gibt Tools, um das zu überprüfen. Im Zweifel ist mehr Kontrast besser.
Weißer Text auf diesem #3B82F6-Blau? Das Kontrastverhältnis beträgt etwa 4,6:1 – gerade noch bestanden. Dunkleres Blau wäre sicherer für Fließtext.
Du musst kein Designer sein. Du musst nur zwischen Formaten konvertieren können und wissen, dass HSL Anpassungen einfacher macht. Alles andere sind Details.