HSL adjuster — shift hue, saturation and lightness of any colour

How to use the HSL adjuster

1. Enter the Colour.
2. Drag Hue shift between −180° and +180° to rotate round the colour wheel.
3. Drag Saturation (−100 to +100) to make the colour more vivid or greyer.
4. Drag Lightness (−100 to +100) to make it lighter or darker.
5. Read the Adjusted HEX, compare HSL before and HSL after, and check the before-and-after swatches.

What it does and when to use it

HSL describes a colour as a hue angle, a saturation and a lightness, which matches how many people talk about colour: “same blue, but less intense”, “a bit warmer”, “darker”. The adjuster lets you make those changes with three sliders and see the exact numbers.

Typical uses are making a muted variant of a brand colour for backgrounds, warming or cooling an illustration colour, creating a disabled state by removing saturation, or exploring nearby hues for a chart series. For a pure lightness change with more methods, use lighten / darken. For fixed harmony angles such as triadic, see colour harmonies. To remove colour completely with a choice of formulas, the grayscale converter is more precise.

How it works

The colour is converted from RGB to HSL. Then:

• new hue = (hue + shift) wrapped into 0–360°
• new saturation = saturation + change, limited to 0–100%
• new lightness = lightness + change, limited to 0–100%

The result is converted back to RGB and HEX. Transparency is kept.

Worked examples

These are the adjuster’s own results.

Red to green. #ff0000 with a +120° hue shift gives #00ff00: hsl(0, 100%, 50%) becomes hsl(120, 100%, 50%).

Removing saturation. #3b82f6 with saturation −100 becomes #999999. HSL after reads hsl(0, 0%, 59.8%): same lightness, no colour.

Three changes at once. #3b82f6 with hue −180°, saturation −30 and lightness +10 gives #e1bd83, a sand colour. HSL goes from hsl(217.2, 91.2%, 59.8%) to hsl(37.2, 61.2%, 69.8%).

Limits and tips

• HSL lightness is not perceived lightness. If you need even-looking steps, change lightness in OKLCH with the lighten / darken tool instead.
• Large lightness changes push colours to pure white or black, which loses the hue entirely.
• Everything runs in your browser.