Boneyard Tools

Using the HSL color model in CSS

Why HSL makes tints, shades and palettes easier than hex, what each channel controls, and how rounding and grays behave when you convert.

Open the HEX to HSL →

Why HSL is easier to reason about

A hex code like #3b82f6 tells you the exact red, green and blue mix but nothing about how the color looks to a person. HSL splits that same color into three human-friendly dials: hue for which color it is, saturation for how vivid, and lightness for how bright. Because the dials map to how we describe color out loud, HSL lets you nudge a shade in a predictable direction instead of guessing which hex digits to change.

Building tints, shades and palettes

The real payoff comes when you build a set of related colors. Keep the hue and saturation fixed and raise the lightness to make a tint, or lower it to make a shade, and every color stays in the same family. Rotate the hue by 30 or 60 degrees for analogous colors, or by 180 degrees for a complement, while leaving saturation and lightness alone. Designers lean on this to generate hover states, disabled states and full theme ramps from a single base color.

How the conversion works

Under the hood the hex code is parsed into red, green and blue channels from 0 to 255, then mapped into hue, saturation and lightness. Lightness is the midpoint of the brightest and darkest channels, saturation depends on the spread between them, and hue comes from which channel leads. This tool rounds each of the three HSL values to a whole number so the result stays compact, which is why a busy blue like #3b82f6 lands neatly on hsl(217, 91%, 60%).

Grays and edge cases

When all three RGB channels are equal the color is a neutral gray with no dominant hue. In that case hue and saturation are both 0 and only lightness carries information, so #808080 becomes hsl(0, 0%, 50%). Pure black is hsl(0, 0%, 0%) and pure white is hsl(0, 0%, 100%). Knowing this helps when a palette tool spits out a hue of 0 for something that clearly is not red: it simply means the color has no saturation to place on the wheel.

Frequently asked questions

Will a hex to HSL and back round trip give the same code?

Almost always. The only source of drift is rounding each HSL channel to a whole number, which can shift a value by at most one unit. For the vast majority of colors the round trip returns the exact hex you started with.

Is HSL the same as HSB or HSV?

No. HSL and HSV share a hue but differ on the third axis. HSL uses lightness, where 50 percent is the pure hue and 100 percent is white, while HSV uses value, where 100 percent is the pure hue. Do not swap the numbers between the two models.