How does the tolerance work?

0 means only the exact source color is replaced. 10–20 catches nearby tones (anti-aliased edges, slight gradients). 30+ catches broader swaths — risky if the source color appears in multiple visually distinct places.

Will it preserve image quality?

Yes — the tool operates pixel-by-pixel on the original. No re-encoding, no quality loss in the unmatched regions. Anti-aliased edges of the replaced area may show slight color fringing where the original and new tones meet.

Can I export with transparency?

Yes — PNG output preserves any alpha channel from the input. JPG output flattens transparency to white (or a chosen background color).

image · color replace · canvas · local

Swap one image color for another

Q: Is my image uploaded?

No — runs entirely on canvas in your browser.

Pick a color in the original by clicking, choose a replacement, and tune tolerance to control how loose the match is. All pixel work runs in your browser.

Image Color Replacer

From

#ff0000

match target

#00ff00

replacement

Tolerance

RGB distance

Status

idle

click image

input · color

Image file

From color

To color

output · preview

Result

Upload an image and pick a color to replace.

Quick Start

How to swap a color in an image

Click any pixel in the original to lock the From color, pick a To color, then adjust tolerance to widen or tighten the match.

01
Upload an image
JPEG / PNG / WebP. The original is drawn into a canvas so we can read pixels.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
uploadOKLCHCSS Color 4perceptuallive
input · colorimage · sRGB
```
photo.png
```
loaded · normalisedOKLCH · ready
02
Pick From color
Click a pixel in the original to copy its HEX into the From field. Or type a HEX directly.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
pickhex · rgb · hslP3gamut-mappedlive
from · optionshex · live
```
#ff0000 → picked
```
options applied · livelive
03
Choose To color
Native swatch or HEX field. Any color you want pixels to land on.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
targetWCAG 2.2APCAAA · AAAcontrast
to · convertedhex · ready
```
#00ff00
```
converted · liveWCAG-aware
04
Tune tolerance
Higher tolerance = more pixels match. Apply re-runs the swap.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
fine-tuneclipboardCSS varspalette JSONblob
ok · copiedready · done
```
tolerance 40 ✓
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to swap an image color

Logos, mockups, brand recolors.

Logo recolor

Re-tint a brand logo without redrawing it. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Mockup variants

Show product mockups in 5 colorways from one file. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Photo edits

Swap a shirt color in seconds for previews. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Sprite atlases

Generate themed sprite variants for game assets. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Light/dark themes

Quickly produce a dark-mode version of an illustration. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Marketing variants

A/B test campaign colors without firing up Photoshop. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

What's the tolerance measuring?

Euclidean distance in RGB space between each pixel and the From color. Anything within tolerance is replaced.

Why isn't my edge clean?

Anti-aliased pixels sit between colors. Raise tolerance carefully, or use a real image editor with edge-aware selection.

Can I export?

Yes — Download PNG saves the result with full resolution.

Does it preserve transparency?

Alpha pixels are kept as-is; only RGB is modified in the match.

Is my image uploaded?

No — the swap runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!