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.

Läuft in deinem Browser

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.

CSS hsl()

hsl(212 100% 52%)

CSS rgb()

rgb(10 124 255)

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