Farbformate erklärt: HEX, RGB, HSL Konvertierungsleitfaden

Jeder Pixel auf Ihrem Bildschirm wird durch Zahlen definiert. Aber dieselbe Farbe kann in mehreren Formaten ausgedrückt werden — HEX, RGB, HSL, HSB und mehr. Diese Formate zu verstehen und zu wissen, wann man welches verwendet, macht Sie zu einem effektiveren Entwickler und Designer.

Die Farbmodelle

RGB (Rot, Grün, Blau)

RGB ist ein additives Farbmodell, das auf der Funktionsweise von Bildschirmen basiert. Jeder Pixel ist eine Kombination aus rotem, grünem und blauem Licht in unterschiedlichen Intensitäten.

color: rgb(59, 130, 246);       /* Einfarbiges Blau */
color: rgba(59, 130, 246, 0.5); /* 50% transparentes Blau */

Jeder Kanal reicht von 0 (keins) bis 255 (maximale Intensität):

rgb(0, 0, 0) = Schwarz (kein Licht)
rgb(255, 255, 255) = Weiß (alles Licht)
rgb(255, 0, 0) = Reines Rot

Wann RGB verwenden: Programmatische Farbmanipulation, Canvas-Operationen, Bildverarbeitung. RGB bildet direkt auf Hardware ab, was Berechnungen unkompliziert macht.

HEX (Hexadezimal)

HEX ist einfach RGB in hexadezimaler Notation geschrieben. Jedes Zeichenpaar repräsentiert einen Kanal (00-FF):

color: #3B82F6;   /* Gleiches Blau wie rgb(59, 130, 246) */
color: #3B82F680; /* Mit 50% Alpha (8-stelliges Hex) */

Die Umrechnung ist direkt: 3B = 59, 82 = 130, F6 = 246.

Kurzschreibweise: Wenn jedes Paar identische Ziffern hat, können Sie kürzen: #AABBCC → #ABC

Wann HEX verwenden: CSS-Stylesheets (häufigstes Format), Design-Übergaben, Markenrichtlinien. HEX ist kompakt und universell verständlich.

HSL (Farbton, Sättigung, Helligkeit)

HSL repräsentiert Farben so, wie Menschen sie wahrnehmen. Anstatt Lichtkanäle zu mischen, beschreiben Sie die Farbe anhand ihrer Eigenschaften:

Farbton: Der Farbwinkel auf dem Farbkreis (0-360°). 0° = Rot, 120° = Grün, 240° = Blau
Sättigung: Wie lebhaft die Farbe ist (0% = Grau, 100% = volle Farbe)
Helligkeit: Wie hell die Farbe ist (0% = Schwarz, 50% = reine Farbe, 100% = Weiß)

color: hsl(217, 91%, 60%);       /* Gleiches Blau */
color: hsla(217, 91%, 60%, 0.5); /* Mit Alpha */

Wann HSL verwenden: Erstellen von Farbpaletten, programmatisches Anpassen von Farben (z.B. Hover-Zustände durch Anpassung der Helligkeit erstellen), barrierefreies Farbdesign. HSL ist das intuitivste Format für menschliches Nachdenken über Farbe.

HSB/HSV (Farbton, Sättigung, Helligkeit/Wert)

HSB ähnelt HSL, definiert aber die Helligkeit anders. Bei maximaler Helligkeit erhält man die reine Farbe; bei minimaler Schwarz. Dieses Modell wird von Design-Tools wie Figma, Sketch und Photoshop verwendet.

Hauptunterschied zu HSL: In HSL ergibt Helligkeit 50% die reine Farbe. In HSB ergibt Helligkeit 100% die reine Farbe. Das macht HSB für einige Aufgaben intuitiver, aber weniger nützlich in CSS (das HSB nativ nicht unterstützt).

Konvertierung zwischen Formaten

Die Konvertierung zwischen Formaten beinhaltet einfache Mathematik. Hier sind die wichtigsten Beziehungen:

HEX zu RGB

Teilen Sie die Hex-Zeichenkette in Paare und konvertieren Sie jedes in Dezimal:

#3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB zu HSL

Der Algorithmus normalisiert RGB-Werte auf 0-1, findet die maximalen und minimalen Kanäle und berechnet dann den Farbton basierend darauf, welcher Kanal dominant ist, die Sättigung aus dem Bereich und die Helligkeit aus dem Durchschnitt.

Anstatt diese Konvertierungen manuell zu implementieren, verwenden Sie unseren Farbkonverter, um sofort zwischen jedem Format zu übersetzen.

Praktische Anwendungen

Farbpaletten mit HSL erstellen

HSL eignet sich hervorragend zur Erzeugung konsistenter Paletten. Halten Sie den Farbton konstant und variieren Sie Sättigung und Helligkeit:

:root {
  --blue-100: hsl(217, 91%, 95%);  /* Hellste */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* Basis */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* Dunkelste */
}

Dieser Ansatz garantiert wahrnehmbar konsistente Abstufungen. Eine komplette Palette von Hand erstellen? Unser Farbpaletten-Generator automatisiert diesen Prozess.

Hover- und Fokus-Zustände

Mit HSL ist das Erstellen interaktiver Zustände trivial:

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* 5% dunkler */
}
.button:active {
  background: hsl(217, 91%, 50%); /* 10% dunkler */
}

Barrierefreiheit und Kontrast

WCAG 2.1 erfordert ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Die Helligkeitskomponente in HSL gibt Ihnen eine intuitive Möglichkeit, ausreichenden Kontrast sicherzustellen:

Helle Hintergründe (Helligkeit > 90%) passen gut zu dunklem Text (Helligkeit < 30%)
Dunkle Hintergründe (Helligkeit < 20%) passen gut zu hellem Text (Helligkeit > 80%)

Moderne CSS-Farbfunktionen

CSS unterstützt jetzt leistungsstarke Farbmanipulationsfunktionen:

/* Relative Farbsyntax (CSS Color Level 4) */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch - Wahrnehmungsgleichmäßiger Farbraum */
color: oklch(0.7 0.15 250);

Das oklch-Format gewinnt an Verbreitung, da es wahrnehmungsgleichmäßig ist — gleiche numerische Änderungen erzeugen gleich wahrgenommene Änderungen, im Gegensatz zu HSL, wo eine 10%ige Helligkeitsänderung bei verschiedenen Farbtonwerten unterschiedlich aussieht.

FAQ

Welches Farbformat sollte ich in CSS verwenden?

Für die meisten Projekte verwenden Sie HEX für einfache Farben und HSL, wenn Sie Variationen erstellen oder Farben programmatisch manipulieren müssen. HEX ist das kompakteste und am weitesten verbreitete Format. HSL ist besser lesbar beim Aufbau von Farbsystemen. Modernes CSS unterstützt alle Formate austauschbar.

Was ist der Unterschied zwischen HSL und HSB?

HSL und HSB verwenden beide Farbton und Sättigung, definieren aber die Helligkeit unterschiedlich. In HSL ist Helligkeit 0% Schwarz, 50% die reine Farbe und 100% Weiß. In HSB ist Helligkeit 0% Schwarz und 100% die reine Farbe (kein Weg zu Weiß allein durch Helligkeit). CSS unterstützt HSL nativ; HSB wird hauptsächlich in Design-Tools wie Figma und Photoshop verwendet.