How does the hue rotation work?

It applies the standard hue-rotation colour matrix to every pixel, built so grey stays grey and luminance is preserved, so colours change without the image getting lighter or darker.

Hue Shift Generator

Q: Is my image uploaded anywhere?

No. The image is decoded and transformed on the page with the Canvas API. Nothing is sent to a server.

Q: Can I get the same effect in CSS?

Yes. The tool shows the matching CSS filter, for example filter: hue-rotate(90deg) saturate(1.2), with a copy button. It uses the same maths and order as a CSS filter, so a web page shows the same colours as the downloaded image (within about 2 of 255 levels when several adjustments are combined).

Q: Does the download keep the original resolution?

Yes. The preview is scaled for the UI, but the exported file is rendered at the full pixel dimensions of the uploaded image.

Rotate an image’s colours around the colour wheel, in your browser.

Upload an image, drag the hue slider, and watch every colour shift together. Fine-tune with saturation, brightness, and contrast, compare against the original, and download at full resolution.

The image is processed on this page with the Canvas API. It is never uploaded.

Upload

Drop your image here

PNG, JPEG, WebP · up to 25 MB

Choose an image

Upload an image to start shifting its hue.

About this hue shift generator

This free tool rotates the colours of an image around the colour wheel. Move the hue slider and every colour shifts by the same angle — reds become oranges or purples, greens become teals or yellows — while brightness and the overall structure of the photo stay intact. It is handy for quick colour-way variations of a logo, product shot, or texture, and for exploring alternative palettes before committing to an edit.

Everything happens in your browser using the Canvas API. Your image is never uploaded, and there is no account, watermark, or size-gated “pro” export.

How to use it

Drop an image onto the upload area, or choose a file (PNG, JPEG, or WebP).
Drag the Hue shift slider between −180° and +180°, or type an exact value.
Optionally open the secondary controls to nudge saturation, brightness, and contrast. Keep these subtle — the tool is primarily a hue shifter.
Compare the original and adjusted versions side by side.
Pick an export format (PNG keeps transparency; JPG and WebP have a quality slider) and download.

How the hue rotation works

The tool applies the standard hue-rotation colour matrix (the same maths as an SVG feColorMatrix hue rotate) to every pixel. The matrix is built so that a neutral grey pixel is left unchanged and overall luminance is preserved, so a hue shift re-colours the image without making it lighter or darker. A shift of 0° leaves the image untouched; ±180° swaps every colour for its opposite.

Saturation, brightness and contrast then follow in that order, each step limited to valid colour values before the next — exactly how a CSS filter chain works. That is why the tool can show you a CSS filter, such as filter: hue-rotate(90deg) saturate(1.2), that gives a web page the same colours as the downloaded file.

FAQ

Is my image uploaded anywhere?

No. The file is decoded and processed on this page with the Canvas API. Nothing is sent to a server, and the analytics only records that an image was adjusted, never the image itself.

Can I get the same effect in CSS?

Yes. Below the sliders the tool shows the matching CSS filter with a copy button. It uses the same maths and order, so a web page shows the same colours as the download (in our Chrome test, identical for a hue shift and within about 2 of 255 levels when several adjustments are combined).

Does the download keep the original resolution?

Yes. The live preview is scaled down for a responsive UI, but the export is rendered at the full pixel dimensions of the image you uploaded.

Why is WebP sometimes missing from the format list?

WebP export is only offered when your browser can actually encode it from a canvas. If it is not listed, use PNG or JPG.

Can it handle a very large photo?

Large images work, but the full-resolution export is processed in one pass on the main thread, so a very large file may take a moment. If the browser runs out of memory the tool shows an error rather than freezing the page.

Related image tools

Image Color Picker — sample exact colours and build a palette.
Image Splitter — cut an image into a grid or tiles.
Social Media Image Resizer — crop and export to exact sizes.
Image Downloader — save an image from a direct URL.

From the blog

What Is Hue Shifting? How to Recolour an Image Around the Colour Wheel · 10 min read
A hue shift turns every colour in an image by the same angle: blues become purples, oranges become greens, and greys never move. Here is what hue is, where the colour wheel came from, why two hue-shift methods give different results, and how to recolour an image free in your browser.

Don't see the tool you need?

Goeroe Digital builds custom calculators, generators, and business tools on request.

Request a Custom Tool

This is a free tool provided by Goeroe Digital. All results, generated files, and figures are estimates or drafts for general informational use only. Goeroe Digital accepts no responsibility or liability for any output, outcome, loss, or decision arising from the use of these free tools — always review the results yourself before relying on them.

Was this tool helpful?