Uwarp

Or try an example

Hue displacement

Help Us Improve

—

(—)

Hue shift online

Shift image hue online with displacement 0–100. Image hue changer for uniform color shifts—live preview, side-by-side compare, PNG download in your.

What is a hue changer / hue shifter?

A hue changer (also called a hue shifter) rotates every color in an image around the color wheel—the same outcome whether you search for “hue changer”, “hue shifter”, “hue shift”, or “hue shifting”. Each pixel converts to HSV, rotates hue by your displacement value, then converts back to RGB. Displacement 0 leaves the file unchanged; 100 completes a full cycle. Upload a PNG or photo, slide, preview, and download—all processing runs in your browser. For selective from→to color swaps, use Change Color of Image; for hue plus saturation and lightness, use Adjust HSL Image.

Hue controls

Hue displacement slider for uniform color shift and rotation.

  1. Hue displacement 0 to 100: Full wheel rotation at 100; fine shifts at low values.

  2. HSV color space: Shift hue while preserving per-pixel saturation and value.

  3. Live preview: Preview updates as you drag—see results before download.

  4. Side-by-side comparison: Original and hue-shifted images shown together.

  5. PNG download: Save the result as adjust-hue-image.png.

  6. Multiple formats: Upload PNG, JPEG, WebP, or GIF files.

How to change hue of an image

Steps for hue shift and color rotation online.

  1. Upload or pick an example

    Drop your file, or click a sample thumbnail to try hue shift instantly (15 MB max).

  2. Set hue displacement

    Move the slider: try 15–30 for subtle shifts or 50+ for strong recolors.

  3. Preview the result

    Compare original and shifted colors side by side.

  4. Download PNG

    Save when the preview matches your goal.

Tips for hue shifts

Get better results when using the hue changer slider.
  • 01

    Move in small steps

    Try 10–25 first—large jumps can swap complementary colors abruptly.

  • 02

    Pair with saturation

    After hue, use a saturation tool if recolored areas look flat.

  • 03

    Watch skin tones

    Large hue shifts on portraits can look unnatural—keep displacement moderate.

  • 04

    Use PNG for overlays

    Alpha is preserved when shifting icons or cutouts.

  • 05

    Compare at zero

    Reset to 0 to judge how far you rotated the palette.

  • 06

    Try 25 increments

    Steps of 25 approximate 90° rotations for quick quadrant tests.

Hue changer tools compared

How this free hue shifter stacks up against other popular online tools for shifting image colors.

  • Online PNG Tools (change PNG hue)

    Competitor ranking for “hue changer” and “hue shifter”. Same uniform wheel-rotation intent for PNGs—this page adds live compare, HSV-preserving shift, and no-upload privacy.

  • Hue.ImageOnline.co

    Simple single-slider hue shift with instant processing. Clean UI for quick color rotation. Limited comparison UX versus a dedicated before/after preview.

  • Fotor.com

    Full photo editor with HSL including hue. Powerful but heavier than a single-purpose hue shifter for a quick PNG hue change.

  • This hue changer

    One focused 0–100 displacement slider, HSV-preserving shift, side-by-side compare, free PNG download in the browser. Best for hue shift / hue shifting without an account.

When to shift image hue

Typical uses for hue changers and color shifters.

  • Creative recoloring

    Explore alternate color palettes on photos or illustrations.

  • Fix color casts

    Nudge hue to counter unwanted green or magenta tints.

  • Brand mockups

    Preview product shots in different accent colors quickly.

  • Social graphics

    Match campaign colors without rebuilding assets from scratch.

  • Texture tweaks

    Shift seamless pattern hues for variation tiles.

  • Quick experiments

    Test hue ideas before opening a full photo editor.

Why use this hue shifter

Benefits of uniform hue shift in the browser.

  • Uniform shift

    Every color rotates together—consistent recolor across the frame.

  • Preserves contrast

    HSV workflow keeps relative lightness and saturation structure.

  • Private

    Images stay on your device—no server upload.

  • Instant preview

    See wheel shifts in real time as you adjust.

  • No install

    Works in any modern browser.

  • Free

    Unlimited adjustments and downloads.

Technical details

How hue displacement works in this tool.
Algorithm
RGB → HSV; hue = (hue × 100 + displacement) mod 100; HSV → RGB. Matches classic CamanJS hue filter scaling.
Color channels
Hue shift on color pixels; alpha unchanged.
Rendering
Canvas 2D getImageData / putImageData.
Input limits
15 MB; longest edge 8192 px.
Output format
PNG download with optional transparency.
Browser support
Chromium, Firefox, Safari with Canvas 2D.

Sources & References

Authoritative references on hue, color perception, and browser-based image processing technology.
  • “Hue is one of the main properties of a color, defined technically as the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow.”
    — Wikipedia — Hue

    Hue in color theory: This article defines hue as the color family attribute that this hue shifter tool rotates around the color wheel — the fundamental concept behind every hue adjustment. en.wikipedia.org/wiki/Hue

  • “The Canvas API provides a means for drawing graphics via JavaScript and the HTML canvas element.”
    — MDN Web Docs — Canvas API

    Canvas API (client-side hue processing): This tool uses Canvas 2D getImageData and putImageData to convert each pixel to HSV, rotate the hue value by the displacement amount, and render the result. developer.mozilla.org/en-US/docs/Web/API/Canvas_API

  • “PNG supports lossless data compression, making it useful for storing graphics that need to be edited repeatedly without losing quality.”
    — W3C — PNG Specification (overview)

    PNG image format: PNG is the output format — its lossless compression preserves the shifted color values without introducing compression artifacts after hue rotation. w3.org/TR/PNG/

  • “Color balance is the global adjustment of the intensities of the colors.”
    — Wikipedia — Color balance

    Color balance adjustment: Hue shifting is a related technique to color balance — while color balance adjusts channel intensities, hue shift rotates the entire palette around the color wheel. en.wikipedia.org/wiki/Color_balance

Frequently Asked Questions

Quick answers about this tool—open a question to read more.