HSL describes a colour by hue, saturation and lightness instead of raw red/green/blue. Same colours as RGB — but in terms you can picture and adjust by hand.
Where you meet it
- Picking a brand colour, then needing a slightly darker version for a hover state.
- Building a palette where every swatch shares one mood — same saturation and lightness, different hue.
- Reading someone else's CSS and seeing
hsl(217 91% 60%)instead of a hex code.
What it does
It gives you three dials that map onto how people actually talk about colour: which colour (hue), how vivid (saturation), and how bright (lightness). The browser converts it to screen pixels for you.
Want a darker shade of the same colour? Drop the lightness. HSL gives you that for free — hex never will.
How it works
Hue is an angle on the colour wheel (0–360°), saturation and lightness are percentages. In CSS you write the three values separated by spaces:
.button {
background: hsl(217 91% 60%); /* a clear blue */
}
.button:hover {
background: hsl(217 91% 45%); /* same hue, just darker */
}Only the lightness changed — 60% to 45% — and you get a matching darker shade without guessing a new hex code. Add a fourth value for transparency: hsl(217 91% 60% / 50%).
Watch out
- Lightness 50% is not "the pure colour" for every hue. Equal lightness across hues doesn't look equally bright to the eye — yellow reads lighter than blue at the same number.
- Saturation 0% kills the hue entirely — you get grey, and the hue angle no longer matters.
- The modern syntax uses spaces, not commas. Commas (
hsl(217, 91%, 60%)) still work as legacy syntax, but pick one and stay consistent.
Go deeper
HSL beschreibt eine Farbe über Hue, Saturation und Lightness statt über rohes Rot/Grün/Blau. Dieselben Farben wie RGB — aber in Begriffen, die du dir vorstellen und von Hand justieren kannst.
Wo es vorkommt
- Eine Markenfarbe wählen und dann eine etwas dunklere Variante für einen Hover-Zustand brauchen.
- Eine Palette bauen, in der jede Farbe dieselbe Stimmung teilt — gleiche Saturation und Lightness, anderer Hue.
- Fremdes CSS lesen und dort
hsl(217 91% 60%)statt eines Hex-Codes sehen.
Was es tut
Es gibt dir drei Regler, die abbilden, wie Menschen tatsächlich über Farbe reden: welche Farbe (Hue), wie kräftig (Saturation) und wie hell (Lightness). Den Rest rechnet der Browser in Bildschirm-Pixel um.
Eine dunklere Variante derselben Farbe? Lightness runterdrehen. HSL schenkt dir das — Hex nie.
Wie es funktioniert
Hue ist ein Winkel auf dem Farbkreis (0–360°), Saturation und Lightness sind Prozentwerte. In CSS schreibst du die drei Werte durch Leerzeichen getrennt:
.button {
background: hsl(217 91% 60%); /* ein klares Blau */
}
.button:hover {
background: hsl(217 91% 45%); /* gleicher Hue, nur dunkler */
}Nur die Lightness hat sich geändert — von 60% auf 45% — und du bekommst eine passende dunklere Abstufung, ohne einen neuen Hex-Code zu raten. Ein vierter Wert ergänzt Transparenz: hsl(217 91% 60% / 50%).
Worauf achten
- Lightness 50% ist nicht für jeden Hue "die reine Farbe". Gleiche Lightness über verschiedene Hues wirkt fürs Auge nicht gleich hell — Gelb liest sich beim selben Wert heller als Blau.
- Saturation 0% löscht den Hue komplett — du bekommst Grau, und der Hue-Winkel spielt keine Rolle mehr.
- Die moderne Syntax nutzt Leerzeichen, keine Kommas. Kommas (
hsl(217, 91%, 60%)) funktionieren noch als Legacy-Syntax, aber entscheide dich für eine und bleib konsistent.