HEX zu HSL Konverter Wandeln Sie HEX-Farbcodes in HSL-Werte (Farbton, Sättigung, Helligkeit) um.

🎨

HEX zu HSL Konverter

Wandeln Sie HEX-Farbcodes in HSL-Werte (Farbton, Sättigung, Helligkeit) um.

HEX-Farbe eingeben

Geben Sie einen HEX-Farbcode ein oder verwenden Sie den Farbpicker, um Ihre Farbe auszuwählen.

HSL-Werte lesen

Sehen Sie Hue (0-360°), Sättigung (0-100%) und Helligkeit (0-100%) Werte sofort ein.

HSL-Ausgabe kopieren

Kopieren Sie den hsl()-CSS-Funktionwert, um ihn direkt in Ihren Stylesheets zu verwenden.

Loading tool...

What Is HEX zu HSL Konverter?

Ein HEX-zu-HSL-Konverter wandelt hexadezimale Farbcodes in das HSL-Farbmodell (Hue, Saturation, Lightness) um. Im Gegensatz zu RGB, das Farben durch die Mischung von rotem, grünem und blauem Licht beschreibt, beschreibt HSL Farben auf eine Weise, die für Menschen intuitiver ist. Die Hue ist die Farbe selbst (gemessen in Grad um einen Farbkreis: 0° ist rot, 120° ist grün, 240° ist blau). Die Saturation beschreibt die Intensität oder Reinheit der Farbe (0% ist grau, 100% ist voll lebendig). Die Lightness beschreibt, wie hell oder dunkel die Farbe ist (0% ist schwarz, 50% ist reine Farbe, 100% ist weiß). Dies macht HSL unverzichtbar für die Erstellung von Farbpaletten, die Anpassung der Helligkeit ohne Verschiebung der Hue und die Generierung harmonischer Farbschemata. Designer und Entwickler müssen häufig von HEX (dem Standard-Webformat) zu HSL konvertieren, um sinnvolle Anpassungen vorzunehmen. Zum Beispiel ist das Erstellen einer dunkleren Nuance in HSL trivial - einfach die Lightness reduzieren - während man bei HEX oder RGB alle drei Kanäle proportional anpassen müsste.

Why Use HEX zu HSL Konverter?

Sehen Sie die Farbe in intuitive Hue-, Sättigungs- und Helligkeitskomponenten aufgeteilt
Live-Farbvorschau aktualisiert sich beim Eingeben des HEX-Codes
Erzeugt CSS-fertige hsl()-Funktion für direkte Verwendung in Stylesheets
Unterstützt 3-stellige und 6-stellige HEX-Eingabecodes
Nützlich zum Verstehen und Manipulieren von Farbbeziehungen

Common Use Cases

Farbpaletten-Design

Konvertieren Sie Marken-HEX-Farben in HSL, um leicht Variationen durch Anpassung der Sättigung und Helligkeit zu erstellen.

Themen-Erstellung

Erstellen Sie hellere und dunklere Themen-Varianten, indem Sie den Helligkeitswert ändern, während die Hue konstant bleibt.

CSS-Custom-Properties

Speichern Sie HSL-Werte als CSS-Variablen für flexible Farbthemen: --primary-h, --primary-s, --primary-l.

Barrierefreiheitsanpassungen

Passen Sie den Helligkeitswert an, um ausreichende Kontrastverhältnisse zwischen Text und Hintergrund zu gewährleisten.

Technical Guide

Die Konvertierung von HEX zu HSL kodiert den Hex-String zunächst in RGB-Werte (0-255) um, dann wird er in HSL transformiert. Der Algorithmus normalisiert die RGB-Werte auf einen Bereich von 0-1, findet die maximalen und minimalen Kanalwerte und berechnet: Lightness = (max + min) / 2. Wenn max gleich min ist, ist die Farbe achromatisch (grau) mit Hue = 0 und Saturation = 0. Andernfalls gilt: Saturation = delta / (1 - |2L - 1|), wobei delta = max - min ist. Die Hue hängt davon ab, welcher Kanal maximal ist: wenn rot der Maximalwert ist, H = (G-B)/delta; wenn grün, H = (B-R)/delta + 2; wenn blau, H = (R-G)/delta + 4. Das Ergebnis wird mit 60 multipliziert, um es in Grad (0-360) umzurechnen. HSL ist eine zylindrische Darstellung des RGB-Würfels, was es für die Farbmanipulation intuitiver macht. Ein wichtiger Unterschied: Eine Lightness von 50% stellt die lebendigste Form jeder Hue dar, während 0% immer schwarz und 100% immer weiß ist. Dies unterscheidet sich von HSV/HSB, bei dem ein Wert von 100% (Helligkeit) die lebendigste Farbe darstellt.

Tips & Best Practices

1
HSL-Helligkeit von 50% ergibt die reinsten Version einer jeden Hue - nützlich für Basisfarben
2
Entsättigung (Senken der S) erzeugt gedämpfte, professionell aussehende Töne
3
HSL ist ideal für CSS-Themen, da Hue, Sättigung und Helligkeit unabhängig voneinander einstellbar sind
4
Gleiche R-, G-, B-Werte in HEX ergeben immer H=0, S=0 in HSL (reines Grau)
5
Modernes CSS unterstützt hsl() nativ in allen Browsern - keine Konvertierung benötigt

Related Tools

HEX zu RGB Konverter

Konvertieren Sie HEX-Farbcodes in RGB-Werte sofort mit einer Live-Vorschau.

🎨 Color Tools

HSL zu HEX Konverter

Wandeln Sie HSL-Farbwerte in HEX-Codes mit interaktiven Reglern um.

🎨 Color Tools

RGB zu HSL Konverter

Wandeln Sie RGB-Werte in das HSL-Farbformat mit interaktiven Schiebereglern um.

🎨 Color Tools

Farbpicker

Interaktiver Farbpicker mit HEX-, RGB-, HSL- und CMYK-Ausgaben.

🎨 Color Tools

Farbnuancen-Generator

Erstellen Sie dunklere Nuancen einer beliebigen Farbe mit anpassbarer Schrittanzahl.

🎨 Color Tools

Frequently Asked Questions

Q Was ist das HSL-Farbmodell?

HSL steht für Hue (Farbwinkel 0-360°), Sättigung (Intensität 0-100%) und Helligkeit (Helligkeit 0-100%). Es handelt sich um eine zylindrische Darstellung, die für Menschen intuitiver ist als RGB.

Q Warum HEX in HSL konvertieren?

HSL ermöglicht es, leicht Farbvarianten zu erstellen. Sie können eine Farbe aufhellen, abdunkeln oder entsättigen, indem Sie einen einzelnen Wert ändern, während bei HEX alle sechs Zeichen geändert werden müssten.

Q Wird hsl() in CSS unterstützt?

Ja, hsl() wird in allen modernen Browsern unterstützt und seit IE9. Modernes CSS unterstützt auch die neue space-getrennte Syntax: hsl(217 91% 60%).

Q Wie dunkle ich eine HEX-Farbe mit HSL?

Konvertieren Sie HEX in HSL, dann reduzieren Sie den Helligkeitswert. Zum Beispiel wird hsl(217, 91%, 60%) zu hsl(217, 91%, 40%) und erzeugt eine dunklere Schattierung der gleichen Blau-Farbe.

Q Was ist der Unterschied zwischen HSL und HSV?

HSL und HSV verwenden beide Hue und Sättigung, aber unterscheiden sich im dritten Komponenten. HSL verwendet Helligkeit (50% ist reine Farbe), während HSV den Wert/Helligkeit (100% ist reine Farbe) verwendet. HSL ist in CSS häufiger anzutreffen.

About This Tool

HEX zu HSL Konverter is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.