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.

1.00
HEX

#0a7cff

CSS rgb()

rgb(10 124 255)

CSS hsl()

hsl(212 100% 52%)

HSV

hsv(212 96% 100%)

CMYK

cmyk(96% 51% 0% 0%)

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)

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.

So funktioniert's

  1. Eingabeformat wählen

    HEX, RGB, HSL, HSV/HSB, CMYK, OKLCH oder CSS-Name im Format-Auswahlfeld.

  2. Farbe eingeben oder einfügen

    Wert eingeben - oder Farbwähler und Alpha-Regler nutzen - und alle anderen Formate aktualisieren sich live.

  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.

Dieses Tool bewerten

Teile deine Erfahrung, um anderen zu helfen.

Farbkonverter (HEX, RGB, HSL)

Konvertiere Farben zwischen HEX, RGB, HSL, HSV, CMYK und OKLCH.

Ausprobieren →

Mehr in dieser Kategorie