Saturation & hue
Shift color intensity and hue.
This runs in your browser. Nothing is uploaded.
About Saturation & hue
Adjusts how vivid colours are and rotates every hue around the wheel, with sliders from -100 to 100 and -180 to 180 degrees, all computed in your browser.
Colour out of a camera rarely matches what you remember seeing, and colour out of a screenshot rarely matches a brand palette. Saturation handles the first problem — overcast light and small sensors both produce images that look drained. Hue handles the second, shifting everything around the wheel at once when a whole image needs to sit in a different colour family.
For saturation, each pixel's brightness is worked out first, then the distance between that brightness and the actual colour is scaled by your slider. At -100 the distance closes entirely and you get grey; at +100 it doubles. Hue rotation converts the pixel into a colour-difference space, spins the two colour axes by your angle, and converts back — an approximation, but a fast and long-established one.
This is a blunt instrument by design, because every pixel gets the same treatment. Push saturation beyond about +40 and skin tones go orange long before a dull sky goes blue, since they were already the most saturated thing in the frame. Hue rotation moves the colours that were fine along with the ones that weren't, which is why it suits graphics far better than photographs of people.
How to use Saturation & hue
- 1Add an image by dropping it on the panel or clicking to browse.
- 2Set Saturation anywhere from -100 to 100, and Hue from -180 to 180 degrees.
- 3Press Apply preview to render the shift.
- 4Press Download once the preview looks right.
What it won't do
- No selective colour ranges; reds and blues shift by the same amount.
- Heavy saturation clips individual channels, which drags hue along as a side effect.
- Hue rotation is an approximation, so extreme angles on already-saturated pixels can drift.
Common questions
What's the difference between saturation and vibrance?
Saturation scales every colour by the same factor, while vibrance protects colours that are already strong and lifts the weak ones more. This page does flat saturation, so vivid reds and skin tones are pushed as hard as a washed-out sky. For a vibrance-like result, stay in the 15 to 25 range instead of reaching for a large value.
Is saturation at -100 the same as the grayscale tool?
Effectively yes. Both use the same perceptual brightness weighting, so dragging saturation to its floor gives you the grey values the grayscale tool produces. Grayscale gets there in one click and skips the hue maths entirely, so it's the better pick when black and white is the whole goal rather than a step along the way.
Does hue rotation change white, grey and black areas?
No. A neutral pixel has no colour difference to rotate, so it comes through unchanged at any angle. That's useful in practice: a hue shift will recolour a subject and its background while leaving a white wall, a grey card or black text exactly where they were. Only pixels carrying actual colour move.
Can I change only one colour in the image?
Not with these sliders — both act on the entire frame. For a targeted change, the colour replace tool matches pixels within a tolerance of a colour you specify and swaps them for another, which works well on flat artwork. There's no hue-range selection here of the kind a desktop editor's Hue/Saturation panel gives you.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation