Overview
Introduction
This tool constrains an entire PNG to a custom color palette you provide, remapping every pixel to its nearest match, entirely in your browser.
It's a direct way to force an image onto a brand palette, a retro fixed palette, or any set of colors you choose.
What Is Custom PNG Color Palette Setter?
A client-side nearest-color quantizer: it reads an uploaded PNG's pixel data and a list of hex colors you supply, then replaces every pixel's color with whichever palette entry is closest by RGB distance.
Unlike the uniform Color Count Reducer (which spreads levels evenly across 0-255), this snaps to the exact colors you choose.
How Custom PNG Color Palette Setter Works
Each hex color in your palette is parsed into RGB once. Then for every pixel, the tool computes the squared Euclidean distance to each palette color and keeps whichever is smallest, replacing the pixel's RGB with that palette entry's values.
Alpha is left untouched throughout, so transparency is fully preserved.
When To Use Custom PNG Color Palette Setter
Use it to force an illustration or icon onto an approved brand palette, recreate a retro fixed-palette look (like an old 16-color game console), or simplify a busy image down to a small, deliberate set of colors.
It's also useful for previewing how an asset would look if constrained to a specific print or screen-printing color set.
Often used alongside PNG Color Palette Extractor, PNG Color Count Reducer and PNG Colors Changer.
Features
Advantages
- Gives you exact control over which colors can appear in the output, unlike automatic quantization.
- Works with any number of palette colors from 1 to 64.
- Runs entirely client-side; your image never leaves your device.
Limitations
- Nearest-color matching in RGB space doesn't always match human color perception exactly, so results can occasionally look slightly off from what you'd expect.
- Processing time grows with both image size and palette size, since every pixel is compared against every palette color.
Examples
Best Practices & Notes
Best Practices
- Use the Color Palette Extractor first to see an image's natural colors before deciding what custom palette to map it onto.
- Include a near-black and near-white entry in your palette if the source image has a wide brightness range, to avoid muddy mid-tone clustering.
Developer Notes
The nearest-color search is a pure function over a Uint8ClampedArray pixel buffer using a simple linear scan per pixel (fine for palettes up to 64 colors); each hex entry is validated and parsed once before the pixel loop runs, with no DOM dependency.
Custom PNG Color Palette Setter Use Cases
- Constraining artwork to an approved brand color palette
- Recreating a retro, limited-palette visual style
- Simplifying a busy image down to a small, deliberate set of colors for print or screen printing
Common Mistakes
- Supplying a palette with too few colors for an image with wide tonal range, producing harsh, unexpected clustering.
- Forgetting that hex codes must be exactly 6 digits — shorthand 3-digit hex codes aren't accepted.
Tips
- Combine with the Color Palette Extractor: extract an image's top colors, tweak them, and feed them back in as your custom palette for a controlled simplification.
- For a uniform, palette-agnostic simplification instead, use the Color Count Reducer.