UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Coloring Page from Photo

Convert any photo into a printable line-art coloring page using Sobel edge detection. Adjust threshold, line thickness, contrast boost, and download as PNG or PDF.

About Coloring Page from Photo

Coloring Page from Photo converts any photograph into a clean, printable line-art coloring page using a classic Sobel edge-detection algorithm running entirely in your browser. Upload a photo, and the tool converts it to grayscale, optionally stretches the histogram for better contrast, then applies Sobel kernels to compute gradient magnitude at every pixel. Pixels whose gradient magnitude exceeds a configurable threshold are rendered as dark lines; all others become white — producing crisp outlines suitable for printing and coloring. You can control the edge threshold (5–120, lower catches finer detail), line thickness (1–4 px amplifier), and whether to invert the result for a dark-background effect. A row-by-row progress indicator keeps the UI responsive during processing. Download the result as a PNG or as an A4 PDF via html2pdf.js (loaded on demand).

Why use Coloring Page from Photo

  • Runs 100% in your browser — no upload, no server, complete privacy.
  • Configurable Sobel threshold lets you match any photo's detail level.
  • Built-in A4 PDF export makes printing straightforward.
  • Progress indicator keeps the page responsive on large images.
  • Invert mode produces striking dark-background line art.
  • Runs 100% in your browser using HTML Canvas and JavaScript — no upload, no server, complete privacy for family photos.

How to use Coloring Page from Photo

  1. Click 'Upload photo' and select any JPEG, PNG, or WebP image.
  2. Adjust the edge threshold slider — lower values produce more detail, higher values produce bolder outlines.
  3. Optionally enable 'Enhance contrast' to improve edge clarity on low-contrast photos.
  4. Click 'Generate Coloring Page' and wait for processing to complete.
  5. Click '↓ PNG' to download the line art, or '↓ PDF (A4)' for a print-ready PDF.
  6. Click 'Upload photo' and select any JPEG, PNG, WebP, GIF, or AVIF image.
  7. Adjust the edge threshold slider — lower values (15–25) produce more detail, higher values (60–100) produce bolder, simpler outlines.

When to use Coloring Page from Photo

  • Creating custom coloring pages from family photos for children.
  • Turning pet portraits or landscape photos into adult coloring art.
  • Generating line-art stencils for crafts, T-shirt prints, or wall murals.
  • Producing simple technical illustrations from photographs.
  • Creating custom coloring pages from family photos for children's birthday parties or rainy days.
  • Turning pet portraits or landscape photos into adult coloring art for relaxation or as gifts.

Examples

Family portrait

Input: JPG family photo at 2400 × 1600 px

Output: PNG line art with clean facial outlines, hair contours, and clothing folds — printable A4.

Landscape photo

Input: JPG mountain scene at 3000 × 2000 px

Output: PNG outline of horizon, peaks, and trees — bold lines suitable for adult coloring.

Pet portrait

Input: PNG photo of a dog's face at 1500 × 1500 px

Output: PNG with crisp fur edges and feature outlines — excellent for child colouring with thick lines.

Tips

  • Portraits work best with threshold 20–40; landscapes and architecture suit threshold 40–70; macro nature shots often need 15–25.
  • Use 'Invert colors' for a dark-on-dark dramatic look, then print on black card stock with white or metallic gel pens.
  • Line thickness 2–3 produces child-friendly thick lines ideal for young colorists; 1 is best for adult coloring detail.
  • Reduce image resolution before uploading (e.g., 600–800 px wide) for faster processing on older devices.
  • Photos with strong directional lighting produce cleaner outlines than flat midday-overcast shots — Sobel responds to brightness gradients.
  • If the result is too noisy, increase the threshold first; if it loses important features, enable 'Enhance contrast' before lowering the threshold.

Frequently Asked Questions

What image formats are supported?▾
Any format your browser can decode — JPEG, PNG, WebP, GIF, AVIF, HEIC (where supported by the browser), and more.
Why do some photos produce noisy results?▾
Very textured photos (grass, fabric, wood grain) have edges everywhere. Increase the threshold slider to ignore fine texture and keep only strong outlines.
What does 'Enhance contrast' do?▾
It stretches the grayscale histogram so that the darkest pixel becomes black and the brightest becomes white, improving edge clarity on flat or low-contrast photos.
What is the line thickness slider?▾
It amplifies the gradient magnitude near detected edges, making lines appear thicker. A value of 1 gives single-pixel lines; 4 gives heavier brush-like strokes.
Does this work on mobile?▾
Yes, though processing large photos (>1200 px) may take a few seconds on older devices. The tool automatically downsamples images above 1200 px for performance.
How is the PDF generated?▾
The PDF uses html2pdf.js (loaded from CDN on demand) to wrap the output PNG into an A4 page. It is not uploaded anywhere — the conversion happens in the browser.

Explore the category

Image to ASCII Art Converter Convert any image to ASCII art in your browser. Adjust columns, character set, and download as PNG or copy the text. Brightness, Contrast & Saturation Adjuster Adjust image brightness, contrast, and saturation in real time in your browser. Download as PNG. Image to SVG Tracer Convert PNG, JPG, or GIF images to scalable SVG vectors in your browser. Adjust colors, smoothness, and download. Photo Collage Grid Maker Combine up to 9 photos into a collage using multiple layout templates. Set padding, corner radius, background color, and output resolution, then download as PNG. PDF to Text Convert any PDF document into a clean .txt file in your browser. Pick page range, preserve line breaks, copy or download. Polaroid Frame Maker Give any photo a classic polaroid look with a white frame, caption, and slight rotation. Download as PNG.
How Browsers Render a Web Page: From HTML to Pixels A browser takes HTML, CSS, and JavaScript and turns it into pixels. The steps between those two points — parsing, layout, painting, composit May 2026 · 11 min

Glossary

Sobel operator
A pair of 3×3 convolution kernels that compute the horizontal (Gx) and vertical (Gy) gradient of an image, used to detect edges.
Gradient magnitude
The strength of an edge at a pixel, computed as √(Gx² + Gy²). Higher magnitude means a sharper, more visible edge.
Threshold
The minimum gradient magnitude required for a pixel to be classified as an edge and drawn as a dark line in the output.
Histogram stretching
Remapping pixel intensities so the full 0–255 range is used, improving contrast in underexposed or overexposed photos.
Convolution
An image-processing operation that computes a weighted sum of a pixel's neighbourhood; Sobel filters are convolutions with specific 3×3 kernels.
Grayscale luminance
A single-channel brightness representation derived from RGB using the formula 0.299R + 0.587G + 0.114B; the input to Sobel detection.
html2pdf.js
A small open-source library that wraps html2canvas and jsPDF to render an HTML element as a PDF page; used here to produce the A4 download.