🖍️ Color-by-Number Maker
Drop in a photo and get back a printable worksheet and a matching answer key. The hard part is not posterizing the image — it is inventing regions that are actually colorable: large enough for a pencil, wide enough to hold a legible number, and tiling the page with no gaps. Everything runs in your browser, so nothing is uploaded and it works offline.
Drag in a photo · pick colors and area size · touch up by hand · print or save SVG
Superpixels, a perceptual palette in CIELAB, and a Markov random field turn continuous tone into flat, colorable regions. Boundaries are weighted toward real edges, so the result follows the subject instead of drifting off it.
Clipart, logos and vector exports are detected automatically and take a different path entirely — the artist's exact colors are read straight out of the image and reproduced, rather than re-invented by a clustering step that could only degrade them.
Every threshold is physical: the smallest area you will be asked to color, and the smallest digit that stays readable. Changing the detail resolution sharpens the tracing without quietly changing what lands on paper.
Faces are the hard case — palette entries get spent on a large jacket while an entire face receives two or three skin tones. Paint over a face and that area gets finer regions, more palette, and less smoothing. Eyes and mouths survive.
Click an area to recolor it, merge it into a neighbour, or absorb it entirely. Drag a number somewhere better. Undo and redo throughout. Automatic output always makes a few bad calls; these take seconds to correct.
There is no server and no API. The whole pipeline is about a hundred kilobytes of JavaScript that runs on your machine, so family photos stay on your machine — and the tool keeps working offline.
How it works
A photograph is smoothed with an edge-preserving filter, divided into several thousand superpixels, and reduced to a palette by area-weighted k-means in CIELAB. Each superpixel is then labelled by a Markov random field whose smoothness term is contrast-sensitive, so disagreement is cheap where the image already has an edge and expensive where it does not. Regions below the physical minimum are merged into the neighbour they share the most border with, boundaries are traced by following the lattice cracks between regions — which makes neighbours tile exactly — and each number is placed at its region’s pole of inaccessibility, the point furthest from any edge and therefore the largest circle a digit can sit inside. Areas too narrow for their own number get one outside on a pointer line, the way printed paint-by-number kits have always done it.
Prints at exactly US Letter · worksheet on page 1, answer key on page 2 · SVG export.