Zum Inhalt springen

HEX-Farbe in HSL umwandeln

Wandle eine Hexadezimalfarbe in HSL (Farbton, Sättigung, Helligkeit) um, das intuitivste Format zum Anpassen von Farbtönen in CSS.

Wird auf Ihrem Gerät verarbeitet. Es wird nichts an einen Server gesendet.

HSL

hsl(173, 82%, 24%)

Wandelt eine Hexadezimalfarbe in HSL (Farbton, Sättigung, Helligkeit) um, das intuitivste Format, um hellere oder dunklere Varianten derselben Farbe zu erstellen.

Berechnet Farbton (Winkel von 0 bis 360), Sättigung und Helligkeit aus den RGB-Kanälen nach dem Standard-HSL-Farbmodell.

Anwendungsfälle

  • Farbvarianten erstellen, indem nur die Helligkeit angepasst wird.
  • Ein CSS-Farbsystem mit hsl() definieren.
  • Die Zusammensetzung einer Markenfarbe verstehen.

So funktioniert's

  1. 1

    HEX eingeben

    Gib den Hex-Code ein, mit oder ohne Raute.

  2. 2

    HSL kopieren

    Der Wert hsl(h, s%, l%) wird sofort berechnet.

Häufige Fragen

Warum HSL statt HEX verwenden?

Mit HSL lassen sich hellere oder dunklere Töne derselben Farbe erstellen, indem nur der Helligkeitswert geändert wird – etwas, das mit HEX schwer mit bloßem Auge zu erreichen ist.

Wie verwende ich den HSL-Wert in CSS?

Füge ihn direkt in jede Farbeigenschaft ein: background-color: hsl(210, 80%, 50%); Alle modernen Browser unterstützen ihn nativ, eine Umwandlung in HEX ist nicht nötig.

Farben & Design