What Is Hue Shifting? How to Recolour an Image Around the Colour Wheel

A hue shift recolours an image by turning every colour by the same angle around the colour wheel. Blues become purples, greens become teals, oranges become greens, and the shapes, shading and detail stay exactly where they were. It is one of the quickest ways to make a colour variant of a logo, a product photo or a game sprite.

This guide explains what hue is, where the colour wheel came from, the two common ways software rotates hue (and why they give different results), what a hue shift can and cannot do, and how to shift an image's hue free in your browser with our Hue Shift Generator. Every colour value below was produced by the tool's own code.

What is hue?

Designers usually describe a colour with three properties:

• Hue: which colour it is (red, yellow, green, blue and so on), measured as an angle on the colour wheel from 0° to 360°.
• Saturation: how intense or pure the colour is. At 0% saturation every hue becomes the same grey.
• Lightness (or value/brightness): how light or dark the colour is.

Because hue is an angle, the wheel wraps around: 360° is red again, and a shift of +180° lands in the same place as −180°. Colours directly opposite each other (180° apart) are called complementary.

A short history of the colour wheel

• 1704, Isaac Newton: in Opticks, Newton bent the spectrum from a prism into a circle of seven colours, joining red back to violet. This is the first colour wheel.
• 1802, Thomas Young: proposed that the eye has three kinds of colour receptors. Hermann von Helmholtz developed the idea in the 1850s, and it is the basis of every RGB screen.
• 1810, Johann Wolfgang von Goethe: his Theory of Colours explored how colours look and feel to people, including how opposite colours affect each other.
• 1861, James Clerk Maxwell: made the first colour photograph by combining red, green and blue filtered images.
• 1905, Albert Munsell: described colour by hue, value and chroma, an early version of the three properties above.
• 1978, HSV and HSL: Alvy Ray Smith (HSV) and George Joblove and Donald Greenberg (HSL) published ways to describe screen RGB colours by hue, saturation and value or lightness. Colour pickers still use them, and CSS has hsl().
• 2000s, SVG and CSS filters: the SVG 1.1 specification (2003) defined a hue-rotate colour matrix, later reused by the CSS filter: hue-rotate() function. Our tool uses this same matrix.

What a hue shift does to real colours

Here are four colours shifted by three angles in the Hue Shift Generator. Notice that grey and white do not move at all.

Two ways to rotate hue: HSL vs the colour matrix

Method 1: convert to HSL, add degrees, convert back

The obvious approach is to convert each pixel to HSL, add the angle to its hue and convert back. The hue lands exactly where you asked, but the image's perceived brightness can change a lot. HSL treats pure yellow and pure blue as equally light, yet to the eye yellow is far brighter. So an HSL shift can turn a dark blue into a bright gold, or a mid green into a dark plum, and the picture's light and shade fall apart.

Method 2: the luminance-preserving matrix (what our tool uses)

The alternative mixes the red, green and blue channels with a 3×3 matrix built from the cosine and sine of the angle. Its weights (0.213, 0.715, 0.072) match how bright the eye finds red, green and blue, and every row sums to 1. Two useful results follow: grey stays grey, and for most colours the brightness stays almost the same, so the shading of a photo survives the shift.

The table compares a +180° shift both ways. Luma is a quick measure of perceived brightness (Rec. 709 weights on the 0–255 values; higher is lighter).

The matrix has trade-offs too. Its angle is approximate: shifting the blue above by +60° moves its HSL hue by about 68°, not exactly 60°. And very saturated colours can push a channel past 0 or 255, so they are clipped and lose some brightness accuracy. Pure red #FF0000 shifted +60° becomes a brown #6C3B00, not yellow, and pure yellow shifted +180° becomes a pale lavender #DADAFF, not a strong blue. Most real photos and designs are not made of pure primaries, so this rarely shows.

Saturation, brightness and contrast

The tool also has three optional sliders, each from 0% to 200% (100% means unchanged). They run in this order after the hue shift:

1. Saturation mixes each pixel toward its own grey (luma). 0% gives a black-and-white image: the blue #2563EB becomes grey #606060.
2. Brightness multiplies every channel. At 120% the same blue becomes #2C77FF; the blue channel is already at its 255 maximum.
3. Contrast pushes values away from mid-grey (127.5). At 150% the blue becomes #0055FF.

Transparency is never changed: the alpha channel of every pixel is left exactly as it was.

What hue shifting is used for

• Product colour variants. Show a coloured bag, shoe or T-shirt in several colourways from one photo. It works only when the product is already coloured (see the limits below).
• Logos and brand palettes. Try a logo or illustration in different colours before you commit to a palette, or make a seasonal version.
• Icons and UI themes. Make matching icon sets in several accent colours from one design.
• Game sprites and palette swaps. Early console games often reused one sprite in several palettes to make new characters and enemies. A hue shift is a quick way to make such variants.
• Pixel art shading. In pixel art, "hue shifting" also means a shading technique: each darker shade moves its hue slightly toward blue or purple and each lighter shade toward yellow, which looks livelier than only darkening. Our tool shifts the whole image, so use it to explore colour ideas rather than to build a single shading ramp.
• Backgrounds and social media graphics. Turn one background or texture into a set of matching colours for a series of posts.
• Creative effects. Large shifts (90° to 180°) give surreal, pop-art results: green skies, purple forests, blue fire.

What a hue shift can't do

• It can't recolour white, black or grey. A white T-shirt stays white at every angle. To colour a neutral object you need a colour overlay or tint in an image editor.
• It shifts everything at once. Skin, sky and background turn along with the object you care about. To shift only one area, crop it out first, or use an editor with masks or selective colour.
• It isn't colour correction. A photo with a yellow or blue cast needs white-balance correction. A hue shift rotates the cast along with everything else.
• Stacking shifts on a saved file can lose colour. Because saturated colours can clip, shifting a saved result back again does not always return the original. Pure red shifted +90° and then −90° comes back as #823400. Inside the tool this doesn't happen, because every slider position is calculated fresh from your original image. Just move the slider back or press Reset.
• JPEG has no transparency. If your image has a transparent background, export as PNG (or WebP) to keep it. A JPG export places the image on white.

How to shift an image's hue with the Hue Shift Generator

1. Open the Hue Shift Generator and drop in a PNG, JPEG or WebP image of up to 25 MB, or choose a file.
2. Drag the Hue shift slider anywhere from −180° to +180°, or type an exact angle. The preview updates as you drag.
3. Optionally open the secondary controls to adjust saturation, brightness and contrast (0–200%).
4. Compare the original and adjusted image side by side. Press Reset to start again.
5. Choose PNG, JPG or WebP (WebP appears when your browser can create it; JPG and WebP have a quality slider, default 92%) and download. The file is saved at the original pixel dimensions, even though the preview is scaled down to stay fast.

Everything happens on the page with the browser's Canvas API: the image is never uploaded, and there is no account or watermark.

Quick tips for better results

• Start with small angles. 15° to 40° gives natural-looking variants; larger shifts quickly look artificial on photos.
• Check skin and food. People and food look strange in unusual hues. Crop them out or keep the shift small when they are in the picture.
• Lower saturation slightly after a big shift. Some shifted colours look harsher than the original. A saturation of 85–95% often makes them sit better.
• Need an exact colour? Use our Image Color Picker to read the hex code of the original and shifted colours, then adjust the angle until you hit your brand colour.
• Resize for the platform afterwards. Use the Image Resizer for exact social media sizes, or the Image Splitter to cut the result into an Instagram grid.