How is this different from the PNG Hue Changer?

The Hue Changer rotates every pixel's existing hue by a chosen number of degrees, so the result still relates to the original colors. This tool replaces every pixel's hue and saturation outright with a single target color's hue and saturation, so the whole image converges on one new base tone instead of shifting relative to what was there before.

Why does the tool report an 'average hue/saturation' before recoloring?

It's purely informational: a quick summary of what the image's dominant color tone looked like before the change, for reference. The actual recoloring always uses your chosen target color's hue and saturation, not this average.

What happens to lightness?

Each pixel's original lightness (from its own HSL conversion) is kept exactly as it was, only hue and saturation are replaced. This is what preserves the image's shading, highlights, and shadows through the recolor.

What happens to grayscale or fully desaturated areas?

A pixel with zero original saturation still gets the target hue and saturation applied to its own lightness, so previously-gray areas will pick up the new base color too, not stay neutral.

PNG Base Color Changer - Recolor an Image While Keeping Its Shading

Overview

Introduction

This tool recolors a PNG to a new base tone while carefully preserving its original shading, entirely in your browser.

Instead of rotating existing colors or overlaying a tint, it rebuilds every pixel's color identity from one target hue and saturation while leaving lightness, the part that carries shape, shadow, and highlight information, completely intact.

What Is PNG Base Color Changer?

A client-side global recolor tool that converts every pixel to HSL, replaces its hue and saturation with a chosen target color's hue and saturation, and converts back to RGB using the pixel's own original lightness.

Before recoloring, it also computes the image's current average hue and saturation (via a circular mean for hue) purely as an informational reference point for what the 'old' base tone looked like.

How PNG Base Color Changer Works

The target hex color is converted to HSL once, up front, to get its hue and saturation.

Then, for every pixel in the image, the tool computes that pixel's own HSL lightness, discards its original hue and saturation, and combines the target hue/saturation with that pixel's own lightness before converting back to RGB; alpha is left untouched throughout.

When To Use PNG Base Color Changer

Use it to quickly re-theme a flat-shaded illustration, icon, or UI mockup to a new brand color while keeping its existing shading intact.

It's also useful for exploring color variants of a design asset without manually repainting shadows and highlights for each variant.

Often used alongside PNG Hue Changer, PNG Color Tone Changer and PNG to HSL Colors Converter.

Features

Advantages

Runs entirely client-side; nothing you upload leaves your device.
Preserves shape-defining lightness information (shadows, highlights, gradients) exactly.
One target color recolors the entire image consistently, rather than needing per-region edits.

Limitations

This replaces hue and saturation uniformly, so an image with multiple distinct original colors will all converge on the same new base tone rather than keeping relative color differences.
Pure black, white, and gray pixels (lightness 0 or 1, or otherwise fully desaturated) can look visually similar before and after depending on how extreme their lightness already was, even though their HSL values technically changed.

Examples

Recolor a red icon to blue

Input

A shaded red icon, target color #3366FF

Output

The same icon shape and shading, now in blue tones

Shading (lightness) carries through unchanged, so the icon's 3D-looking highlights and shadows are preserved in the new color.

Recolor a multi-color illustration to a single tone

Input

An illustration with several distinct original hues, target color #22C55E

Output

The whole illustration converges on green-based tones

Because every pixel's hue/saturation is replaced with the same target, previously different colors end up as shades of the same new base tone.

Best Practices & Notes

Best Practices

Use this on flat-shaded or gradient-shaded graphics where lightness alone carries the visual depth, for the cleanest recolor.
If you need to preserve multiple distinct original colors' relative differences, use the Hue Changer's rotation approach instead.

Developer Notes

changePngBaseColor computes each pixel's HSL lightness with a local rgbToHsl helper, discards hue/saturation in favor of the target color's own rgbToHsl-derived hue/saturation, and reconstructs RGB via hslToRgb; the pre-change average hue is computed with a proper circular mean (sum of unit vectors via sin/cos, then atan2) rather than a naive arithmetic average, since hue wraps at 360 degrees.

PNG Base Color Changer Use Cases

Re-theming a flat-shaded icon or illustration to a new brand color
Exploring color variants of a design asset while keeping its shading
Converting a multi-hued graphic to a single consistent base tone

Common Mistakes

Expecting relative color differences between originally different-colored regions to survive: they won't, since every pixel's hue/saturation is replaced with the same target.
Reading the reported 'average hue/saturation' as the new output color; that number describes the image's state before recoloring, not after.

Tips

Sample your target color directly from a brand palette for a consistent re-theme.
Try this on line art or flat vector-style graphics first; it tends to look cleanest wherever the original shading was already simple.

PNG Base Color Changer