Image Hue, Saturation and Brightness

What this tool actually does

Three numeric controls are presented together: hue defaults to 0 degrees with range -360..360, saturation defaults to 100% with range 0..200%, and brightness defaults to 100% with range 0..200%. Manual values are clamped; blank or nonnumeric fields use their neutral defaults.

Checkable behavior

The browser canvas applies filters in this order: hue-rotate(angle), saturate(percent), then brightness(percent). The neutral combination 0/100/100 emits hue-rotate(0deg) saturate(100%) brightness(100%). Saturation 0 produces grayscale; brightness 0 produces black RGB while retaining the image geometry.

Controls, output and limitations

Verified implementation example: hue 45, saturation 150 and brightness 80 emits hue-rotate(45deg) saturate(150%) brightness(80%). Input hue 500, saturation -20 and brightness 250 is capped to 360/0/200. Exact output RGB is browser filter processing rather than a published HSL conversion formula.

Despite the short tool label, the third operation is CSS brightness, not direct HSL lightness. These are global whole-image adjustments: there is no channel curve, histogram, object mask, automatic white balance or ICC/RAW workflow. Strong saturation or brightness can clip visible color detail; keep the source.

Load one image, set all three values, press Generate and inspect neutrals, highlights and skin or brand colors, then download PNG. Press Generate after changing values. Processing is local to the browser canvas; output dimensions remain unchanged and there is no live automatic preview.