How daubday Turns a Photo Into a Color-by-Number Puzzle

When you choose a photo on the My photo page, a numbered outline appears beside it a moment later. In between, daubday runs six short steps. Knowing them makes it easier to see why one photo becomes a lovely puzzle while another turns into confetti, and which setting to change when that happens.

Everything happens in your browser

The work runs inside your browser, on your own device, and your photo is never sent to daubday or anyone else. When you press Color this puzzle, the photo and your settings are saved in this browser's storage, and the puzzle is rebuilt from them each time you open it. Because the color grouping always starts from the same fixed point, the same photo with the same settings always gives the same areas and numbers, so your saved progress lines up when you return. It is also why the puzzle opens only on the device where you made it. Anywhere else, the link says the photo can't be found.

Step 1: Shrinking the photo to a grid

First the photo is scaled down to a small grid of cells, set by Detail: 90 cells along the long side for Easy, 130 for Medium and 170 for Detailed.

If Smoothing is above None, a slight blur is applied at this point, from under one cell at A little to about one and a half cells at Most. It is deliberately small, just enough to melt grain and texture.

Step 2: Choosing the colors

Next, daubday picks the palette with a method called k-means. It starts with candidate colors, gives every cell to the nearest candidate, then moves each candidate to the average of its cells. After twelve rounds, the candidates settle on colors that represent the photo well. Their number is your Colors setting, from 6 to 28.

The starting candidates are chosen with a variant called k-means++. The first is a random cell, and each next one is more likely to come from cells that look very different from those already chosen. That gives a small but distinct color, like a red collar on a brown dog, a better chance of getting its own number. Differences in green also count a little more than red or blue, because our eyes are most sensitive to green.

The colors are then numbered: near-grays first, from light to dark, then the rest around the color wheel, from reds through yellows, greens and blues to purples. Neighboring numbers therefore tend to be related shades.

Step 3: Tidying stray cells

A majority filter then cleans up the noise. Each cell looks at the 3×3 block around it, and if one color holds at least five of those nine cells, the middle cell switches to that color. Lone stray cells disappear and ragged edges straighten. This runs once, or twice when Smoothing is on.

Step 4: Finding the areas

Now neighboring cells of the same color are joined into areas. Cells count as neighbors only if they share a side. This is where texture becomes costly: grass that flips between two greens every few cells turns into dozens of separate areas.

Step 5: Merging specks

Any area smaller than about a dozen cells is merged into the neighbor it shares the longest border with, preferring a large neighbor over another small one, and takes on that neighbor's color. This has two side effects. A tiny detail with a color all its own, such as the glint in an eye, can vanish here. And a color left with no areas at all is dropped, which is why the preview can show fewer colors than you asked for.

Step 6: Placing the numbers

For every cell, daubday works out how far it is from the nearest edge of its area, and the number goes on the cell deepest inside. That is why a number sits in the thickest part of a crescent or an L-shape, not at a center point that may lie outside the area. The same distance sets the number's size, and a number is drawn only when it fits on screen, so very small areas show theirs once you zoom in.

Softening the outlines

A grid makes staircase edges. Before drawing, daubday traces each area's border as a chain of points one cell apart and softens it by averaging each point with its neighbors six times. Points on the picture's edge and where three or more areas meet stay fixed, so a shared border comes out identical from both sides, with no gaps. Taps, though, are still matched to the cells underneath, so in a tight spot, tap near the middle of an area, close to its number.

Why some photos come out messy, and what helps

Most messy results trace back to one step:

• Busy texture such as leaves, gravel or knitwear creates many areas in step 4. Lower Colors or raise Smoothing.
• A small subject gets too few cells in step 1. Crop the photo closer before choosing it, or raise Detail.
• Low contrast lets subject and background share colors in step 2. Choose a photo with clearer light.
• Thin lines and text are narrower than a cell, so they get lost in steps 1 and 5.

Smoothing deserves one caution. It calms noise and fur, but on a photo with crisp edges between bright colors, like food on a white plate, the blur can create in-between shades along those edges that survive as thin extra areas. More Smoothing can then mean more areas, not fewer.

The preview rebuilds a moment after each change and shows a line such as "16 colors · 140 areas", so change one setting at a time and watch it. Even at the lowest settings, a photo usually makes more areas than an Easy picture in the gallery. For starting combinations, see the photo settings guide, and for choosing the photo itself, picking a good photo.