image tool
Image colour changer
Matching a colour by eye against a swatch is guesswork. Tap the image instead and a magnifier shows you the pixel you are actually on, the mask view shows exactly which pixels will change, and the compare handle wipes between the original and the result.
Runs on your device. Nothing is uploaded.
Loading the tool…
How to use it
- 1
Drop the image
It is drawn on a canvas here. The tool starts on the boldest colour it finds rather than the background, so the first result means something.
- 2
Tap the image to sample
A magnifier follows your finger showing the pixels underneath and their hex value, so you take the colour you meant rather than the one next to it.
- 3
Switch to the mask
White is what changes, black is what does not. It is the fastest way to see whether the tolerance is catching the whole shape or spilling into its neighbours.
- 4
Drag the compare handle
The compare view puts a draggable divider over the image so you can wipe between the original and the recoloured version at any point.
- 5
Add more swaps
Each swap is a chip showing its two colours and the share of the image it covers. They all run in one pass, so nothing is applied twice.
The mask is the control, the slider is just a number
Tolerance is impossible to set blind. Nudge it and something changes somewhere in the image, and you find out later whether you caught the whole logo or half the sky with it. The mask view removes the guessing: white pixels change, black pixels do not, and the tolerance slider redraws it live. Photoshop's replace colour dialog has offered the same thing for decades and it remains the reason that tool is usable, so it is a view here rather than a checkbox buried in the options.
Why the match is measured in Lab
Distance in RGB does not match what the eye sees. Two dark colours can sit far apart numerically and look identical, while two pale ones can be numerically close and look obviously different. Lab was built so that equal distances look roughly equally different, which means one tolerance setting behaves the same on a dark navy as on a pale cream. As a rough guide, a distance of about 2.3 is the point at which a difference becomes noticeable at all, under 10 catches near identical pixels, and 20 to 30 covers a flat colour with anti aliased edges.
Sampling beats a colour picker
The colour you think is in the logo and the colour that is actually in the file are rarely the same, especially after a JPEG has been through a few hands. Tapping the image takes the value from the pixels themselves, and by default it averages a three by three block so a single stray pixel does not set your target. The magnifier shows what is under your finger at eight times size with the hex printed beneath it, which is the difference between picking a colour and hoping.
It is a pixel operation, so think about the source
A PNG export of a logo has flat colour and recolours cleanly. The same logo saved as a JPEG has thousands of slightly different values around every edge, so it needs more tolerance and gives a softer result. If the vector file still exists, recolour it there and export again. This tool is for the common case where the vector is long gone and a PNG in somebody's downloads folder is all that is left.
Limits
- Matching is per pixel, so a colour that appears in two places changes in both. There is no notion of a region or a subject.
- A JPEG's compression smears colours, so a flat area is never quite one value and needs more tolerance than the same artwork as a PNG.
- Very large images take a moment, because every pixel is converted to Lab and compared against every swap.
- The hue, saturation and lightness shift under advanced options moves every remaining pixel, greys included, which can tint what should stay neutral.
- The magnifier needs a pointer over the image, so on a touch screen it appears while you are dragging rather than before you touch.
What it does not do
- It does not recolour an SVG's fills. It works on pixels, so a vector has to be rasterised first.
- It does not select a subject or a region. Matching is by colour, not by area.
- It does not use AI to guess what you meant by the colour you tapped.
Questions people ask
Does the image leave my device?
No. It is decoded and redrawn on a canvas in your browser, and the page makes no network request after it loads. That is worth knowing when the image is an unreleased logo or a client's artwork, and you can confirm it by watching the network panel while you work.
What is the mask view for?
It shows exactly which pixels your current settings will change: white where they change, black where they do not, grey in the feathered band between. Switch to it, then drag the tolerance slider until the white area covers the shape you want and stops at its edge. It is much faster than judging the result.
Can I recolour a transparent PNG?
Yes. Fully transparent pixels are skipped and the alpha channel is preserved in the output, so a logo on a transparent background stays that way. Semi transparent edge pixels are recoloured in proportion to how well they match, which is what keeps an anti aliased edge smooth rather than jagged.
Can I change more than one colour?
Yes. Add another swap and you get a second chip, each with its own pair of colours. Every swap runs in the same pass, and each pixel goes to whichever target it is closest to in Lab, so two swaps never fight over the same pixel. Each chip shows the share of the image it covers.
Why does the edge look jagged?
Feather is too low. The pixels around any curve are blends between the shape and its background, so a hard cutoff catches some and misses others. Raise feather under advanced options and the replacement fades across that band. The mask view shows the band as grey, so you can see it working.
What does keeping the shading do?
It maps the lightness of each original pixel onto the new colour instead of flooding the area flat. A logo with a gradient or a shadow keeps its form rather than turning into a solid blob. Turn it off under advanced options when you genuinely want one flat colour, such as replacing a background.
Will it work on a photograph?
For a broad change, yes. The hue and saturation shift is good for warming or cooling a whole photo. Replacing one colour in a photograph rarely works well, because a red jumper is hundreds of reds under different light, and a tolerance wide enough to catch them all also catches skin tones.
What size is the output?
The same pixel dimensions as the input, saved as a PNG so nothing is recompressed. A photograph will therefore come out larger than the JPEG you put in. Run it through the image compressor afterwards if it is going onto a web page where the file size matters.
Put this artwork on a flyer
Take what you made here into flyers.
Create a flyer with OneCraftRelated tools
- Palette extractorCluster a photograph in CIE Lab and get the colours it is made of, each with its share of the pixels and a suggested design role. Runs in your browser.
- Colour converterPick a colour on a live OKLCH plane and read it in nine notations at once, with the sRGB gamut boundary drawn and the contrast on white and black shown.
- Colour picker from imageDrag a magnifier across a picture and read the pixel under it as hex, RGB, HSL and OKLCH, with sample averaging, arrow key nudging and a history of picks.
- Image cropperCrop with a draggable box and 44 pixel handles, locked shapes for square, 4:5, 9:16 and 16:9, thirds guides, quarter turns and arrow key nudging.
- SVG to PNGRasterise an SVG at any size in your browser. It reads the declared width, height and viewBox, and warns about the fonts and links that will not survive.
Written and checked by the OneCraft team. Last checked .