Farben im Web: HEX, RGB, HSL, oklch

CSS-Farbformate sind standardisierte Notationen zur Definition von Farben im Web; die gängigen Formate HEX, RGB, HSL und das moderne oklch unterscheiden sich in Anwendbarkeit, Lesbarkeit und Präzision der Farbdarstellung.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Einsteiger Synonyme / Auch bekannt als: CSS Color Values, Farbnotation, Webfarben, Color Tokens

Was sind Farbformate im Web?

In Printmedien werden Farben in CMYK oder Pantone definiert. Im Web gibt es mehrere Formate, die alle dasselbe Ziel haben: eine Farbe eindeutig zu beschreiben, die ein Browser auf einem Bildschirm darstellen soll. Designer begegnen diesen Formaten täglich – in Figma, beim Handoff an Entwickler: Figma, Zeplin, Storybook und in Design-System-Dokumentationen.

Jedes Format hat seine Stärken und ist für bestimmte Kontexte geeignet. Die Wahl des richtigen Formats beeinflusst nicht nur die Lesbarkeit des Codes, sondern auch die Möglichkeiten bei der Farbinterpolation, beim Theming und bei der Darstellungsqualität auf modernen Wide-Gamut-Displays.

Erklärung

HEX – Hexadezimale Farbe

Das bekannteste Format. Eine Farbe wird als sechsstelliger hexadezimaler Wert ausgedrückt: #RRGGBB. Jedes Paar beschreibt die Intensität eines Farbkanals (Rot, Grün, Blau) auf einer Skala von 00 (0) bis FF (255).

Beispiele:

• #000000 – Schwarz
• #FFFFFF – Weiß
• #FF0000 – Reines Rot
• #3B82F6 – Tailwind Blue 500

Kurzform: #RGB ist gleichbedeutend mit #RRGGBB, also #F0A = #FF00AA.

Mit Transparenz: #RRGGBBAA – die letzten zwei Stellen sind der Alpha-Kanal. #3B82F680 = Blue 500 mit 50 % Transparenz.

Vorteile: Kompakt, universell verbreitet, leicht kopierbar. Nachteile: Nicht intuitiv lesbar. Welches Blau ist #1D4ED8? Schwer zu sagen ohne Tool.

RGB – Rot, Grün, Blau

RGB beschreibt Farbe durch drei Werte (0–255) oder Prozentwerte:

• rgb(59, 130, 246) – Blue 500
• rgb(100%, 0%, 0%) – Reines Rot
• rgba(59, 130, 246, 0.5) – Blue 500 mit 50 % Transparenz

Modernes CSS vereinfacht die Syntax: rgb(59 130 246 / 50%) ist die neue Schreibweise, die rgba() überflüssig macht.

Vorteile: Intuitiver als HEX, direkte Kanalsteuerung. Nachteile: Keine Beziehung zur menschlichen Farbwahrnehmung. „Wird es heller, wenn ich den dritten Wert erhöhe?" – nicht unbedingt.

HSL – Hue, Saturation, Lightness

HSL ist das designer-freundlichste klassische Format, weil es der menschlichen Farbwahrnehmung entspricht:

• H (Hue): Farbton, 0°–360° auf dem Farbkreis
• S (Saturation): Sättigung, 0 %–100 %
• L (Lightness): Helligkeit, 0 % (Schwarz) bis 100 % (Weiß)

hsl(217, 91%, 60%) – ein lebhaftes Blau (entspricht Tailwind Blue 500).

Vorteile: Intuitiv. Eine Farbe mit 10 % mehr Helligkeit? L um 10 erhöhen. Eine abgesättigte Variante? S reduzieren. Ideal für die Erstellung kohärenter Farbpaletten. Nachteile: HSL ist nicht perceptually uniform – gleiche S/L-Werte bei verschiedenen Farbtönen wirken optisch unterschiedlich hell.

oklch – Das moderne Format

oklch ist das neueste und wissenschaftlich präziseste CSS-Farbformat (ab CSS Color Level 4). Es basiert auf dem Oklab-Farbraum, der für gleichmäßige Wahrnehmung (perceptual uniformity) optimiert ist:

• L: Helligkeit (0–1)
• C (Chroma): Farbintensität/Sättigung
• H (Hue): Farbton, 0°–360°

oklch(0.65 0.18 250) – ein mittelhelles Blau.

Der entscheidende Unterschied: In HSL erzeugen Gelb und Blau mit gleichen L-Werten optisch unterschiedlich helle Farben. In oklch sind gleiche L-Werte tatsächlich gleich hell wahrgenommen. Das macht oklch ideal für systematische Farbpaletten.

Wide Gamut: oklch kann Farben darstellen, die im sRGB-Farbraum nicht existieren – die lebhafteren Farben moderner OLED-Displays und HDR-Bildschirme. oklch(0.7 0.3 120) – ein leuchtendes Grün jenseits von sRGB.

Browser-Support: oklch wird von allen modernen Browsern unterstützt (2023+). Für ältere Browser kann ein CSS-Fallback in HEX/RGB angegeben werden.

Design Tokens und Farbsysteme

In modernen Design Systems: Von Figma zu Code-Projekten werden Farben nicht direkt als HEX-Werte in den Code geschrieben, sondern als Design Tokens – semantische Variablen mit sprechenden Namen:

```css / Basis-Tokens / --color-blue-500: #3B82F6; --color-blue-600: #2563EB;

/ Semantische Tokens / --color-primary: var(--color-blue-500); --color-primary-hover: var(--color-blue-600); ```

Semantische Tokens entkoppeln die Designentscheidung vom konkreten Farbwert und ermöglichen Dark Mode Design: Farben und Kontraste-Themes:

```css / Light Mode / --color-background: #FFFFFF; --color-text-primary: #111827;

/ Dark Mode / @media (prefers-color-scheme: dark) { --color-background: #121212; --color-text-primary: #E0E0E0; } ```

Farbpaletten-Generierung mit oklch

oklch ist ideal für die systematische Palette-Generierung: Eine Basisfarbe wird definiert, dann werden Helligkeitswerte systematisch variiert (z. B. L von 0,95 bis 0,2 in 11 Stufen). Das Ergebnis ist eine wahrnehmungsgleichmäßige Palette, bei der die Stufen optisch ähnlich weit auseinanderliegen – unabhängig vom Farbton.

Das Tool oklch.com von Andrey Sitnik ermöglicht interaktive Farb-Exploration im oklch-Farbraum.

Beispiele

Primärfarbe eines Projekts:

• HEX: #2563EB
• RGB: rgb(37 99 235)
• HSL: hsl(221, 83%, 53%)
• oklch: oklch(0.55 0.22 250)

Alle vier beschreiben dieselbe Farbe. Die Wahl des Formats ist eine Frage des Verwendungszwecks.

Farbpalette mit oklch: Eine Blau-Palette von sehr hell bis sehr dunkel, bei der alle Stufen visuell gleichmäßig abgestuft sind – möglich mit oklch, schwierig mit HSL.

In der Praxis

Farben in Figma

Figma unterstützt HEX, RGB und HSL in der Color-Picker-Oberfläche. oklch wird ab Figma 2024 unterstützt. Beim Export von Design Tokens (z. B. mit Style Dictionary oder dem Tokens Studio Plugin) können Farbwerte in beliebige Formate konvertiert werden.

Kontrast und Barrierefreiheit

Kontrastverhältnisse werden unabhängig vom Farbformat berechnet. Barrierefreiheit im Web (WCAG 2.2) für Designer beschreibt die WCAG-Anforderungen. oklch hat einen Vorteil: Kontrast kann durch L-Differenz abgeschätzt werden, weil L linear der Wahrnehmung entspricht.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Welches Format soll ich für mein Projekt verwenden? HEX oder HSL für die meisten bestehenden Projekte. oklch für neue Projekte mit modernen Anforderungen (Wide Gamut, systematische Paletten, Dark Mode).

Können Browser oklch nicht darstellen? Alle modernen Browser (Chrome, Firefox, Safari, Edge ab 2023) unterstützen oklch. Für Fallbacks kann @supports (color: oklch(0 0 0)) genutzt werden.

Was ist der Unterschied zwischen oklch und oklab? Beide sind Farbraumformate basierend auf dem Oklab-Modell. oklab nutzt kartesische Koordinaten (a, b-Achsen), oklch polare (Chroma, Hue). oklch ist intuitiver für Designer.

Verwandte Einträge

• Dark Mode Design: Farben und Kontraste – Farbsysteme für Light und Dark Mode
• Barrierefreiheit im Web (WCAG 2.2) für Designer – Kontrast-Anforderungen
• Design Systems: Von Figma zu Code – Design Tokens und Farbsysteme
• Handoff an Entwickler: Figma, Zeplin, Storybook – Farbwerte übergeben

Weiterführend

• Sitnik, A. (2022). oklch.com – Interactive Colour Picker.
• Lea Verou (2023). LCH colors in CSS: what, why, and how?
• CSS Color 4 Specification, W3C (2024).
• Zack Leatherman (2022). Using oklch in CSS.
• Google Material Design (2023). Color system.