HSL Interactive Wheel
Tune hue, saturation, and lightness with live CSS output.
Tune color by hue, saturation, lightness
HSL describes color the way people think about it — pick a hue, then adjust how vivid and how light it is — which makes it ideal for building related shades. This tool lets you tune hue, saturation, and lightness with live CSS output.
Working in HSL makes it easy to darken a color without changing its hue, or desaturate it for a muted variant. Adjust the sliders, watch the color respond, and copy the HSL (or converted) value into your styles.
Building around a hue
Fixing the hue and adjusting saturation and lightness is the natural way to build tints and shades of one color. The wheel runs in your browser, nothing uploaded.
Frequently asked questions
What does the HSL interactive wheel do?
It lets you adjust HSL values and see the resulting color in hex, RGB, and HSL formats.
What do hue, saturation, and lightness control?
Hue picks the position on the color wheel from 0 to 360 degrees (0 is red, 120 green, 240 blue), saturation sets how vivid it is, and lightness runs from black at 0% to white at 100%.
Why does 100% lightness always give white?
In HSL, full lightness is white and zero is black regardless of hue. The most vivid version of any hue is at 50% lightness and 100% saturation.
Which format should I paste into CSS?
Any of the three works in all browsers. The hsl() value is easiest to tweak later, since you can nudge lightness for hover states without converting back to hex.
Related tools
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.