Web Development
web
design
colors
What is HSL Color Model?
Definition
HSL (Hue, Saturation, Lightness) is a cylindrical color model. Hue is a degree on the color wheel (0-360), saturation is a percentage of color intensity, and lightness controls how bright or dark the color is. CSS uses hsl(0, 100%, 50%) notation.
Why It Matters
HSL is more intuitive for humans than RGB. To create a lighter shade, just increase lightness. To desaturate, lower saturation. CSS custom properties with HSL make theming (dark mode, brand colors) straightforward.