Farbkonverter

Was ist ein Farbkonverter?

Ein Farbkonverter nimmt eine Farbe in irgendeinem gängigen Format — HEX, RGB, HSL, OKLCH — und zeigt dir alle anderen Schreibweisen derselben Farbe an. Das ist das tägliche Werkzeug für Designer und Entwickler: Markenfarben matchen, CSS-Variablen debuggen, Dark- und Light-Mode-Paletten vergleichen oder den Kontrast für Barrierefreiheit prüfen.

CSS unterstützt mehrere Farbmodelle, jedes mit eigenen Stärken. HEX und RGB beschreiben Farben über Rot-, Grün- und Blauanteile. HSL ist intuitiver (Farbton, Sättigung, Helligkeit). OKLCH ist ein perzeptives Modell — gleiche Zahlenänderungen wirken auch optisch wie gleiche Schritte. Genau deshalb ist es so praktisch, um Tints, Shades und barrierefreie Paletten zu erzeugen.

Barrierefreiheit entsteht durch Kontrast, nicht nur durch Farbe. Die WCAG definiert ein Kontrastverhältnis zwischen Text und Hintergrund — mindestens 4,5:1 für normalen Fließtext, 3:1 für große Überschriften. Ein gutes Tool zeigt beide Werte direkt neben deiner Farbe, damit du nicht aus Versehen unzugängliches UI ausrollst.

Was du beim Konvertieren von Farben lernst

• HEX ist nur eine Kurzschreibweise für RGB — #ff8800 ist dasselbe wie rgb(255, 136, 0).
• HSL trennt *Hue* (welche Farbe), *Saturation* (wie kräftig) und *Lightness* (wie hell). Eines davon zu verändern ist deutlich intuitiver, als an R/G/B zu schrauben.
• OKLCH ist perzeptiv gleichmäßig: Wenn du L um 10 % erhöhst, wirkt der Helligkeitsunterschied bei jedem Farbton ungefähr gleich. HSL verhält sich nicht so.

Farben Schritt für Schritt umrechnen und prüfen

1. 1

   Farbe eingeben

   Füge einen beliebigen HEX-, RGB-, HSL- oder OKLCH-Wert ein, oder wähle eine Farbe per Pipette / nativem Color-Picker.

2. 2

   Alle Formate auf einen Blick

   Der Konverter zeigt dieselbe Farbe in jedem unterstützten Format. Klick auf einen Wert kopiert ihn direkt in die Zwischenablage.

3. 3

   Mit HSL- oder OKLCH-Slidern feinjustieren

   Zieh den Lightness-Slider für Tints (heller) und Shades (dunkler). Nimm OKLCH-Lightness, wenn du visuell gleichmäßige Schritte willst.

4. 4

   Kontrast gegen Textfarben prüfen

   Das Kontrast-Panel zeigt das WCAG-Verhältnis sowohl gegen Weiß als auch gegen Schwarz. Ziel: ≥ 4,5 für Fließtext und ≥ 3 für große Überschriften.

5. 5

   Wert ins CSS übernehmen

   Nimm das Format, das zu deiner Codebase passt — HEX für Design-Tokens, OKLCH für moderne Paletten, HSL, wenn du mit calc() rechnen willst.

CSS-Farbformate — Kurzreferenz

Die fünf Formate, die dir im Alltag begegnen, jeweils mit Beispiel für dieselbe Farbe. Komplette Syntax-Referenz auf MDNs <color>-Seite.

Beispiele zum Ausprobieren

color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);

--brand:        oklch(67% 0.16 268);--brand-light:  oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark:   oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);

background: rgb(108 140 255 / 0.5);background: #6c8cff80;

Häufige Fehler beim Farben-Umrechnen

• HSL-Lightness über verschiedene Farbtöne hinweg vergleichen. hsl(60 100% 50%) (Gelb) und hsl(240 100% 50%) (Blau) haben dasselbe L, wirken aber gefühlt völlig unterschiedlich hell — nimm für visuelle Vergleiche OKLCH.
• Vergessen, dass die 3-stellige HEX-Form (#abc) eine Kurzschreibweise für die 6-stellige (#aabbcc) ist.
• rgba(...) statt der modernen rgb(... / alpha)-Syntax verwenden — beides funktioniert, aber die Slash-Variante ist der aktuelle Standard und in Tools besser lesbar.

FAQ zum Color Converter