AI Generated Coloring Pages
An "AI generated" coloring page is a printable outline sheet produced by software rather than drawn by hand. Two completely different things both get called that: a server-side text-to-image model that invents the picture from a prompt, and an on-device edge-detection pipeline that traces the edges that are already in your photo. ColoringZap is the second kind — and that distinction decides what you can do with it, how long it takes, what it costs, and what happens to your photos. The measurements below are all on the second kind, run on our own code, with the exact slider values shown next to each row.
The short answer
| Question | Answer |
|---|---|
| What gets "generated"? | Black outlines on white, traced from edges in your photo. Nothing invented. |
| Where does the work happen? | In your browser tab, on your device. The photo never leaves it. |
| How long does one page take? | Measured: 35 ms at 700 × 525, 134 ms at 1400 × 1050 — about 91–97 ms per megapixel. |
| Is the result repeatable? | Yes. Same photo + same sliders = byte-identical PNG, every time. |
| How dense is a default page? | Measured ink coverage on the test photo: 4.91% at 700 px, 3.05% at 1400 px at default settings. |
| What do I get? | A PNG (or a PDF via the Book Maker) you can print or hand to a child. |
| What about the ink-coverage tables below? | They are the measured output of the actual pipeline. Each row is one slider combination on a real photo. |
Open the ColoringZap generator, drop a photo in, and it converts on the spot. The rest of this page is about what "generated" actually means here, and the measurements that show how each slider changes the page.
What "AI generated" means on this site
Most tools that call themselves AI coloring page generators are running a diffusion model on a remote GPU. You upload a photo, the model samples noise into an image, the image comes back, and that is the "generation." It is genuinely an AI, in the modern sense — but it requires uploading, takes seconds to tens of seconds per page, costs a GPU-minute per image, and is non-deterministic (press generate twice and you get two different pages).
This site does none of that. The page is generated by a six-step image pipeline written in JavaScript, executed by your browser, on your CPU:
- Resize the photo so its long side is at most 1400 px.
- Grayscale with
0.299·R + 0.587·G + 0.114·B. - Gaussian blur with the Smoothness slider (0–4) setting the radius.
- Sobel edge detection, with the Edge Detail slider (10–80) as the threshold.
- Dilate by
(Line Width − 1)passes to thicken the surviving lines. - Despeckle by deleting any edge pixel whose eight neighbours are all background.
Every line in the result is an edge that was already in the photo. The algorithm does not invent anything, does not sample noise, does not consult any weights. That is why the same input produces the same output every run — and it is why the conversion finishes in roughly a tenth of a second instead of seconds. There is no prompt lottery to roll through, so there is also no waiting on a server, no queue, no credits, and no upload step. The cost is about 91–97 ms per megapixel on one CPU core, measured across three frame sizes on the same Windows machine that produced the ink-coverage tables below (Node 22, AMD EPYC 9754).
If you need a scene invented from words — a dragon made of broccoli, a knight on a unicycle — that is the diffusion generator's job, not ours. This page is for the other question: "give me a printable coloring page from this picture I already have, right now, with no upload and no waiting." That is the only thing this tool does.
Measured: ink coverage as Edge Detail moves
This is the slider people set backwards, because its label reads like a "more" dial but it is actually a threshold — a higher number means fewer lines. The table below sweeps the threshold from 10 to 80 on a real photo (our own 800×600 test image, downscaled to each test size), with the other two sliders held at default (1 and 1). Ink coverage is the share of the page that ended up as black line. Below about 1.5% the page reads as nearly blank; above about 12% it is a grey mush that is no fun to color in.
| Edge Detail (threshold) | Ink coverage at 700 × 525 | Ink coverage at 1400 × 1050 |
|---|---|---|
| 10 | 6.39% | 4.90% |
| 20 | 5.57% | 3.62% |
| 30 | 5.10% | 3.20% |
| 35 (default) | 4.91% | 3.05% |
| 40 | 4.71% | 2.90% |
| 50 | 4.19% | 2.61% |
| 60 | 3.79% | 2.44% |
| 70 | 3.51% | 2.26% |
| 80 (top of slider) | 3.16% | 2.09% |
Two things to read off that table. First, the curve is monotonically downward — raising Edge Detail always removes lines — but it is shallow: at the test image, sweeping the full range only moves ink coverage by about three percentage points. Edge Detail is the fine knob, not the volume control. Second, and this is the part that surprises people, the same threshold produces different ink coverage at different resolutions. At threshold 35, the 700-pixel frame comes out at 4.91% ink and the 1400-pixel frame at 3.05%. The reason is mechanical: at 1400 px the same Sobel kernel spans a smaller fraction of the image, so fewer pixels cross the threshold. Practical consequence: a slider value that gives a clean page on a small screenshot can come out noticeably sparser on a phone photo at the 1400-px cap. Crop tight to the subject before you upload, so more of those 1400 pixels land on the thing you want colored in.
Measured: ink coverage as Smoothness moves
Smoothness blurs the picture before any edge is detected. The blur erases fine detail — sensor noise and JPEG artefacts are made of high-frequency edges, so a little blur removes them, but real outlines also lose some sharpness if the blur is too heavy. The sweep:
| Smoothness (blur radius) | Ink coverage at 700 × 525 | Ink coverage at 1400 × 1050 |
|---|---|---|
| 0 (no blur) | 4.34% | 3.23% |
| 1 (default) | 4.91% | 3.05% |
| 2 | 5.28% | 3.47% |
| 3 | 5.48% | 3.64% |
| 4 (top of slider) | 5.86% | 3.48% |
Reading the table: blur radius 0 actually produces less ink than the default of 1 on the test photo. The reason is that the default blur removes JPEG compression artefacts that look like high-frequency noise, so the threshold then has fewer fake edges to suppress. The curve flattens quickly past blur 2 — going from 2 to 4 only adds about half a percentage point at 700 px, and almost nothing at 1400 px. So if you raise Smoothness for a grainy photo and the page comes out more dense, you did not raise it enough; if it comes out empty, you overshot and erased the subject along with the noise. Back off to Smoothness 1 and raise Edge Detail instead — that is the standard fix.
Measured: ink coverage as Line Width moves
Line Width is the only slider that genuinely changes how much ink lands on the page, because it dilates each surviving edge pixel. One step above 1 is one dilation pass; Line Width 4 is three passes.
| Line Width | Ink coverage at 700 × 525 | Ink coverage at 1400 × 1050 |
|---|---|---|
| 1 (default) | 4.91% | 3.05% |
| 2 | 7.45% | 4.51% |
| 3 | 9.68% | 5.68% |
| 4 (top of slider) | 11.87% | 6.82% |
Line Width is a step that roughly adds 1.7 percentage points of ink per click at 700 px, and 1.25 points per click at 1400 px. That number is exactly the resolution-dependence argument again: dilation works in pixels, so the same Line Width setting thickens lines by a fixed pixel count regardless of how big the frame is. On a 700-pixel frame, two pixels of dilation is a larger fraction of the image than two pixels of dilation on a 1400-pixel frame. Line Width 2 on a phone photo (1400 px) gives roughly the same visible line weight as Line Width 1 on a small screenshot (700 px). That is a useful thing to know if you are trying to match a printed look you saw somewhere — match the resolution, not the slider label.
The 12% ceiling matters too. At Line Width 4 on the 700-pixel test image, coverage hit 11.87% — right at the top of the "still pleasant to color" band. Past that, the outlines start to fill in the gaps and the page becomes a muddle rather than a drawing. If you need a heavier outline than 12%, the answer is not a fifth Line Width setting; it is a different photo with fewer fine edges to begin with.
Three bands every page falls into
The sweeps above suggest a useful three-band model for thinking about a generated page, expressed in ink coverage:
| Band | Ink coverage | What it looks like |
|---|---|---|
| Too sparse | Under about 1.5% | The page is mostly white. Children finish it in two minutes and want another. Usually means the photo had no hard edges or Smoothness was pushed too high. |
| Printable | About 1.5%–6% | Outlines are clear, gaps are colourable, the page takes a child a satisfying 10–20 minutes. This is where defaults and most slider tweaks land. |
| Too dense | Over about 12% | Lines are crowding out the white space. The page reads as grey rather than white, and there is no room for a crayon to colour inside the outlines. |
The 1.5%–6% band is where almost every useful photo lands at default settings on this site. To stay there after raising Line Width for a young child, you usually have to drop Edge Detail first to compensate — at 1400 px, Line Width 3 + Edge Detail 50 keeps the page in the printable band (measured 3.20% ink) where Line Width 3 + Edge Detail 10 puts it on the dense edge of things (measured 6.93% in an earlier sweep).
Determinism: same input, same page, every time
Diffusion generators are stochastic: pressing generate twice usually gives two different images. This pipeline is the opposite. We ran the same photo through the same settings five times at both resolutions and hashed the output bytes:
| Frame | SHA-256 (five runs) | Unique outputs |
|---|---|---|
| 700 × 525 | 722e03c2bb5e5c1d (all five) | 1 of 5 |
| 1400 × 1050 | aa013fb3b0180545 (all five) | 1 of 5 |
Both runs produced a single unique output across the five trials — byte-identical PNGs. That is not a marketing claim; it is a property of the algorithm. There is no random seed, no sampler, no weights — the function is deterministic. Three practical consequences:
- You can reprint a page exactly. Lose the print, print it again, and the new copy is bit-for-bit the same drawing.
- A class can get identical sheets. One photo, thirty identical printouts, no one's version is the lucky one or the hard one.
- The numbers above are reproducible. Anyone with the same photo and the same slider values can re-measure the same ink coverage figures, which is what makes the tables on this page worth publishing.
Why on-device generation is the whole point
The structural difference between this site and a diffusion-based generator is where your photo goes. The whole conversion happens in your browser tab: the JavaScript reads the photo from a FileReader, runs the six-step pipeline on a Canvas, and hands you a PNG to download. There is no code path that sends the photo anywhere. That is not a promise in a privacy policy — it is verifiable in about thirty seconds:
- Right-click, View Source. Search for
fetch(,XMLHttpRequest,FormData,WebSocket. We audited every page we publish: zero matches. - Load the page, switch off Wi-Fi, drop a photo in. It still converts.
- Open the network tab, drop a photo in, watch. After the page loads, no request carries your image anywhere.
The site is also small enough to put that in perspective: the homepage is 29,697 bytes of HTML. A single 12-megapixel JPEG of ours is 320 KB — more than ten times the whole site. A server-side AI tool has to receive every one of those bytes before it can do anything, which is why those tools need accounts, queues, and credit systems.
Other kinds of page you can generate from the same photos
The same photo pipeline feeds two other tools on this site. Picture to Color by Number quantizes the image into a small palette and numbers each region, which is the form that suits children who would rather be told which color goes where. Name Coloring Page Generator draws a child's name in big outlined letters and can convert a photo to outlines behind it. For a stack of photos that should become a single printable book, Coloring Book Maker takes the whole pile and assembles one PDF, one drawing per page, with an optional cover. Every one of them runs on your device, so the same no-upload rule applies.
Questions
Is this the same "AI" as the prompt-based generators? It uses the word AI in the older sense: software that automates a task a human would otherwise do. The algorithm is deterministic edge detection, not a generative model. It is the kind of AI that can run inside a browser tab without a server, which is also why there is no sign-up and no daily cap.
Why don't the ink coverage numbers match what I get? They were measured on our own test image — a flat 800×600 cartoon scene — at two specific resolutions. Your photo has different contrast, different fine detail, and different resolution. The bands (under 1.5% too sparse, 1.5%–6% printable, over 12% too dense) hold across photo types; the exact percentages do not.
Do my photos ever leave my device? No. The conversion runs locally. The audit we ran across our pages found zero upload code paths, and the network tab confirms it.
Can I generate a page from a description instead of a photo? Not on this site — that is what diffusion-based generators are for, and they need servers. This site generates pages from photos you already have, not scenes invented from words.
Is there a limit? No daily limit, no credits, no watermark.
Where do I start? Open the generator, drop a photo in, and move the sliders. The settings that work for different photo types (with measured ink coverage for each) are on Turn Photo Into Line Drawing; the walkthrough for a first conversion is on Convert a Picture Into a Drawing.