Zum Inhalt springen
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

HEX-Farbe in HSL umwandeln

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

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

HSL

hsl(173, 82%, 24%)

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

    Geben Sie den Hex-Code ein, mit oder ohne Raute.

  2. 2

    HSL kopieren

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

Technische Details

  • Akzeptiert 6-stelliges HEX (#3B82F6) oder die 3-stellige Kurzform (#38F), mit oder ohne #, in Groß- oder Kleinbuchstaben. Transparenz (#RRGGBBAA) wird nicht unterstützt.
  • Ausgegeben werden Farbton in Grad (0–360) sowie Sättigung und Helligkeit in Prozent, auf ganze Zahlen gerundet: #3B82F6 ergibt hsl(217, 91%, 60%).
  • Durch die Rundung ist der Rückweg nicht immer exakt: hsl(217, 91%, 60%) wird wieder zu #3C83F6. Brauchen Sie die exakte Farbe in CSS, behalten Sie den HEX-Wert oder nutzen Sie Dezimalstellen in hsl().
  • Verwendet wird die Standardformel auf sRGB, dieselbe wie in Browsern.

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ügen Sie 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.

Ähnliche Tools

← Farben & Design