How to use Image Hue Rotate
- Choose one or more images.
- Set Hue shift from −180° to 180°. The default is 90°.
- Choose Save as and, for lossy formats, a Quality.
- Press Apply and download the recoloured image.
What it does and when to use it
A hue shift recolours a whole picture at once while keeping its shading and detail. It is handy for:
- Colour variants of an icon, badge, button or illustration: make the blue one, then the green and purple ones from it.
- Theme testing, to see how a design would look in another brand colour.
- Creative effects, such as swapping warm and cool tones with 180° or giving a landscape an alien sky.
Because greys stay grey, black text and white backgrounds survive the shift. To adjust colour strength rather than colour, use Image Saturation. For a single colour swap, Image Color Replace is more precise. For a two-colour look from any photo, try Image Duotone.
How it works
The tool applies the colour matrix that the W3C Filter Effects specification defines for CSS hue-rotate(). For an angle θ it uses cos θ and sin θ to mix red, green and blue into new values, rotating colours around the grey axis while keeping the brightness weights (0.213, 0.715, 0.072). Results are clipped to 0–255, and transparency is unchanged. Because the maths matches CSS, a shift of 90° here looks like filter: hue-rotate(90deg) in a browser, apart from rounding.
The picture is processed in a background worker on your device. It is not uploaded.
Worked examples
These values come from the tool’s own function.
| Pixel | 90° | 180° | −90° |
|---|---|---|---|
| Pure red (255, 0, 0) | (0, 91, 0) | (0, 109, 109) | (109, 18, 255) |
| Sky blue (100, 150, 200) | (200, 122, 186) | (186, 136, 86) | (86, 164, 100) |
| Warm brown (200, 100, 50) | (50, 146, 35) | (35, 135, 185) | (185, 89, 200) |
| Middle grey (128, 128, 128) | unchanged | unchanged | unchanged |
- Swap warm and cool with 180°. The sky-blue pixel becomes a tan (186, 136, 86) and the warm brown becomes a mid blue (35, 135, 185).
- Make a green variant of a red badge with 90°. Pure red becomes a dark green (0, 91, 0). If it looks too dark, raise brightness or gamma afterwards.
Limits and tips
- Bright, pure colours can come out darker or clipped, as the red examples show.
- Skin tones look unnatural after most shifts; use it on graphics more than on portraits.
- Save icons and badges as PNG to keep their edges and transparency clean.
Frequently asked questions
Why did red turn dark teal and not bright cyan at 180°?
Can I change only one colour, such as a red shirt?
What is the difference between +90° and −90°?
Will my logo's grey text change?
How do we know nothing is uploaded? Test it yourself on the privacy proof page.