Zum Inhalt springen
Arnaud.app

HEX-zu-HSL-Konverter (Farbcode)

HEX-Codes sofort und kostenlos in HSL umrechnen. z. B. #3B82F6 → hsl(217, 91%, 60%). Besser zum Anpassen von Nuancen, mit Live-Vorschau.

1.00
CSS hsl()

hsl(212 100% 52%)

HEX

#0a7cff

CSS rgb()

rgb(10 124 255)

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 beschreibt eine Farbe über Farbton (0-360°), Sättigung (0-100 %) und Helligkeit (0-100 %) - für Designer viel intuitiver als HEX oder RGB. HEX einfügen, wir liefern das HSL-Äquivalent mit Live-Vorschau.

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