Zum Inhalt springen
arnaud.app

HSL-zu-HEX-Konverter (Farbcode)

HSL-Werte sofort und kostenlos in HEX-Code umrechnen. z. B. hsl(217, 91%, 60%) → #3B82F6. Akzeptiert hsl() oder drei Zahlen, mit Live-Vorschau.

Läuft in deinem Browser

HSL-Wert wie hsl(212 95% 52%) einfügen und wir liefern den 6-Zeichen-HEX-Code. Praktisch, wenn ein in HSL prototypisiertes Design für eine alte CSS-Variable als HEX ausgeliefert werden muss.

CSS rgb()

rgb(10 124 255)

CSS hsl()

hsl(212 100% 52%)

CSS oklch()

oklch(0.608 0.215 257.4)

#0A7CFF

Bester Kontrast gegen

schwarzer Text → Verhältnis 5.34:1 (WCAG AA verlangt 4,5:1)

So funktioniert's

  1. Farbe in beliebigem Format eingeben

    HEX, rgb(), hsl() oder oklch() ins passende Feld. Alle anderen aktualisieren sich live.

  2. Kanäle direkt anpassen

    R/G/B-Slider oder HSL-Komponenten ändern, um eine Nuance zu treffen.

  3. 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.

Farbkonverter (HEX, RGB, HSL)

Konvertiere Farben zwischen HEX, RGB, HSL und OKLCH.

Ausprobieren →

Mehr in dieser Kategorie