A color model that represents colors using hue, saturation, and lightness, a more intuitive alternative to RGB for design work.
HSL stands for Hue, Saturation, and Lightness. It is a cylindrical color model that represents any color using three values:
HSL was introduced in CSS2 as a more human-readable alternative to RGB, and it remains one of the most common formats in web development and design tools.
HSL maps more naturally to how designers think about color. Instead of specifying red, green, and blue intensities, you describe a color's hue (what color?), saturation (how vivid?), and lightness (how light or dark?). This makes HSL significantly easier to manipulate by hand. You can desaturate a color by reducing its saturation, or lighten it by increasing lightness, without needing to understand how RGB channels interact.
HSL also makes it easy to generate shade scales: keep the hue and saturation constant, and vary the lightness from low (dark) to high (light).
CSS syntax: hsl(220 90% 56%) or with alpha hsl(220 90% 56% / 0.5).
Generating a simple shade scale by lightness:
hsl(220 90% 10%): very darkhsl(220 90% 30%): darkhsl(220 90% 50%): purehsl(220 90% 70%): lighthsl(220 90% 90%): very lightThis approach is convenient but has a significant limitation: it treats all hues as having equal perceived lightness, which they don't. Yellow at 50% lightness appears much brighter than blue at 50% lightness. This is why HSL-based shade scales often feel uneven and require manual correction.
hsl(0 72% 51%): a vivid redhsl(217 91% 60%): a medium blue (similar to Tailwind's blue-500)hsl(0 0% 45%): a neutral grayhsl(142 71% 45%): a vivid greenHSB (Hue, Saturation, Brightness) and HSV (Hue, Saturation, Value) are the same model with different names but the same formula. In HSB/HSV, a fully saturated color at 100% brightness is pure and vivid. In HSL, a fully saturated color at 50% lightness is pure and vivid, while 100% lightness gives white regardless of hue. HSL is standard in CSS; HSB/HSV is common in design tools like Figma and Photoshop's color pickers.
HSL defines lightness mathematically by averaging the min and max RGB channel values. This doesn't match how human vision perceives brightness. Our eyes are most sensitive to green and least sensitive to blue, so `hsl(60 100% 50%)` (yellow) looks much lighter than `hsl(240 100% 50%)` (blue) even though both have the same HSL lightness. Perceptually uniform models like OKLCH account for this by modeling lightness based on how the eye actually responds.
For most projects today, HSL is still fine and has full browser support. OKLCH is increasingly preferred for new design systems because it produces more perceptually uniform shade scales and can express wide-gamut colors (Display P3) that HSL cannot. If you're starting a new project and targeting modern browsers, OKLCH is worth the investment, but HSL remains a solid, practical choice.