The conversion, briefly
RGB describes a colour by channel intensity; HSL describes it by hue angle, saturation and lightness. The maths normalises the channels, finds the max and min, and derives lightness as their average, saturation from the delta, and hue from which channel dominates. You rarely need to do it by hand — but knowing the shape helps when a conversion looks 'off'.
Why designers think in HSL
Hue is a rotation, so complementary colours are +180°, triads +120°. Saturation controls vividness on a single axis. Lightness gives predictable tints and shades. That structure is why design systems increasingly store brand colours in HSL and emit hex at build time.
Practical uses
- Deriving a hover state without picking a new colour by eye
- Keeping brand hue while desaturating disabled states
- Building dark-mode variants by inverting lightness
- Checking whether two colours share a hue family
Rounding and gamut
HSL is a lossy round-trip through 8-bit RGB: converting hex → HSL → hex can shift a channel by one or two values. For pixel-exact brand colours, keep the original hex in your tokens and use HSL only for derived states.
Frequently Asked Questions
Why is my hue 0 for greys?
Greys have zero saturation, so hue is mathematically undefined; browsers report 0.
Can RGB values exceed 255?
Not in valid CSS. The converter clamps inputs to 0–255 so you always get a legal colour.
How do I get a tint or shade?
Raise or lower the L value in HSL. A tint moves toward 100%, a shade toward 0%.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.