Farbkonverter (HEX, RGB, HSL)
Konvertiere Farben zwischen HEX, RGB, HSL und OKLCH.
Tippe eine Farbe in beliebigem Format (HEX, RGB, HSL, OKLCH) ein, und die anderen Formate aktualisieren sich live. Ideal für Design Tokens, CSS-Variablen und Brand Kits.
rgb(10 124 255)
hsl(212 100% 52%)
oklch(0.608 0.215 257.4)
Bester Kontrast gegen
schwarzer Text → Verhältnis 5.34:1 (WCAG AA verlangt 4,5:1)
So funktioniert's
Farbe in beliebigem Format eingeben
HEX, rgb(), hsl() oder oklch() ins passende Feld. Alle anderen aktualisieren sich live.
Kanäle direkt anpassen
R/G/B-Slider oder HSL-Komponenten ändern, um eine Nuance zu treffen.
Gewünschtes Format kopieren
Kopier-Button neben dem Format verwenden, das dein Ziel erwartet.
Was ist das?
Ein Farbkonverter übersetzt zwischen den Formaten, die CSS, Design-Tools und Bildbearbeitung leicht unterschiedlich verwenden. HEX (#0a7cff) ist die Legacy-Kurzform eines RGB-Tripels. RGB beschreibt rot/grün/blau-Intensitäten. HSL ist freundlicher zum Anpassen von Tönen. OKLCH ist das neue perzeptuell gleichförmige Modell aus CSS Color Level 4.
Wann verwenden
Wenn eine Farbe zwischen Kontexten wandert: Markenfarbe aus einem SVG-Logo (HEX) in ein CSS-Variablensystem (HSL oder OKLCH) übernehmen, Screenshot-Pixel (RGB) in einen Token übersetzen, barrierefreie Varianten erzeugen. Auch hilfreich für WCAG-Kontrastprüfung.
Häufige Fehler
Nimm nicht an, HSL-Helligkeit sei perzeptuell - ist sie nicht. hsl(60 100% 50%) (gelb) und hsl(240 100% 50%) (blau) haben dieselbe Helligkeitszahl, aber sehr unterschiedliche Luminanz; OKLCH korrigiert das. Und verlier keine Präzision durch zu frühes Runden der HEX-Kanäle: erst am Ende runden.
FAQ
- Warum OKLCH?
- OKLCH ist das neue Format aus CSS Color Level 4. Anders als HSL ist es perzeptuell gleichförmig: Helligkeit oder Chroma anpassen verschiebt nicht versehentlich den Farbton.