Format guide

HSL

Hue Saturation Lightness color model

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 a HSL file

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.

Primary use

Designer-friendly color specification where you want to vary one dimension.

Convert other formats to HSL

HEX → HSL
RGB → HSL

Convert HSL to other formats

HSL → HEX
HSL → RGB

Looking for something else? Browse the full list of 192 converters.