HSL Farb Generator
Praktisch, wenn du Farben systematisch über Farbton, Saettigung und Helligkeit bauen willst.
Dieses Tool ist für Mitglieder
Dieses Premium-Tool schaltest du mit einem kostenlosen Konto frei — zusammen mit allen anderen Profi-Tools und den ganzen Wissen-Artikeln.
100 % kostenlos · keine Kreditkarte · sofort freigeschaltet
Wozu dient der HSL Farb Generator?
Der HSL Farb Generator erzeugt Farben systematisch über die drei Werte Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit). Das ist besonders praktisch, wenn du Farben gezielt aufbauen oder ganze Farbsysteme konsistent halten willst, etwa für Design-Tokens oder ein Theme.
Im Gegensatz zum Hex-Code lässt sich mit HSL intuitiv steuern: Hue dreht den Farbton durch den Farbkreis, Saturation regelt die Buntheit und Lightness die Helligkeit. Du gibst die drei Werte ein und erhältst die Farbe als HSL- und Hex-Code. Die Berechnung läuft direkt in deinem Browser.
Beispiele
- Hue 210, Saturation 90%, Lightness 55% ergibt ein kräftiges Blau, etwa #2E8FF0.
- Hue 0, Saturation 80%, Lightness 50% ergibt ein sattes Rot, hsl(0, 80%, 50%).
- Hue 140, Saturation 60%, Lightness 45% erzeugt ein natürliches Grün für Akzente.
Häufige Fragen zum HSL Farb Generator
Was bedeuten die drei HSL-Werte?
Hue ist der Farbton von 0 bis 360 Grad im Farbkreis, Saturation die Sättigung von 0 bis 100 Prozent und Lightness die Helligkeit von 0 (schwarz) bis 100 Prozent (weiß).
Warum HSL statt Hex verwenden?
Mit HSL kannst du Farben gezielt aufhellen, abdunkeln oder den Farbton verschieben, ohne raten zu müssen. Das macht konsistente Farbsysteme deutlich einfacher.
Kann ich den Hex-Code direkt nutzen?
Ja, das Tool gibt zusätzlich den passenden Hex-Code aus, den du direkt in CSS oder einem Designtool einsetzen kannst.
Werden meine Eingaben gespeichert?
Nein. Alle Berechnungen laufen ausschließlich im Browser. Es werden keine Daten gesendet oder gespeichert.
Ist das Tool kostenlos?
Ja, vollständig kostenlos und ohne Registrierung.
