HSL describes a color by hue (0-360° around the color wheel), saturation (0-100% gray to vivid), and lightness (0-100% black to white). Designers prefer it over RGB because shifting one dimension keeps the others intact — drop saturation and you get a desaturated version of the same color, no manual rebalancing. CSS supports HSL natively (`hsl(207, 87%, 56%)`) and most modern color systems (Tailwind, Material) generate palettes by varying HSL axes.
How to open
HSL values appear in CSS files, design system tokens, and color-picker tools. Chrome DevTools, Figma, and every modern design app accept `hsl()` notation directly.