Convert Image to Color Mosaic
Convert images to color mosaics - 4 tile shapes, color quantization, adjustable gaps. Free, offline, client-side, instant.
Turn any photo into a color mosaic - squares, circles, diamonds, or honeycomb hexagons. Adjustable tile size, gap, sampling method (average / median / center pixel), and optional color quantization. Runs entirely in your browser.
How to Use Convert Image to Color Mosaic
- Drop or upload an image - PNG, JPG, GIF, BMP, WebP. The image stays in your browser; no server ever sees it.
- Adjust the tile size - 4 px gives fine pixel-art, 40 px gives bold abstract blocks. The preview updates in real time (200 ms debounce).
- Pick a tile shape - Square for classic pixelation, Circle for stained-glass, Diamond for rotated squares, Hexagon for honeycomb. Non-square shapes leave gaps showing the background color.
- Choose a sampling method - Average takes the mean of each tile (smoothest), Median is noise-resistant (good for grainy photos), Center uses just the tile's center pixel (sharpest, preserves edges).
- Optional - quantize the colors - posterize to 2/3/4/6 levels per channel (8/27/64/216 colors total). 6 levels is the classic "web-safe" palette. Off keeps full 24-bit color.
- Tune the gap - 0 for seamless tiles, 1-8 for grout lines (pick your own gap color - default is slate). With circle/hexagon shapes, the gap color shows between tiles automatically.
- Copy or download - Copy uses the ClipboardItem API (paste into Slack/Discord as an actual image); Download saves
color-mosaic-<shape>.png. Stats show tile grid dimensions, unique color count, and processing time.
Frequently Asked Questions
How is this different from a pixelation filter?
A pixelation filter just downscales and upscales the image (every tile is a square of the region’s mean color). This tool does the same thing in “Square” mode, but adds three alternative tile shapes, three sampling methods (average/median/center), a configurable gap color, and optional color quantization. Pick Square + Average + Gap 0 + Full color to get classic pixelation.
What’s the difference between the sampling methods?
Average computes the mean RGB of every pixel in the tile (smooth gradients). Median sorts each channel and takes the middle value (resists noise and outliers – great for JPEG artifacts). Center pixel takes only the one pixel at tile center (fastest, and preserves sharp edges better than mean).
What does color quantization do?
It posterizes the RGB of each tile by snapping each channel to a fixed number of evenly-spaced levels. “2 levels/ch” gives 8 colors total (pure corners of the RGB cube). “3 levels/ch” gives 27. “6 levels/ch” gives 216 – the classic “web-safe” palette from the 256-color days. Off leaves full 24-bit color.
Why do circle/hexagon/diamond shapes leave gaps?
Because the tiles don’t fully cover their bounding box – there’s geometric space outside a circle inscribed in a square. We fill those gaps with the background color you chose (default slate #0f172a). For edge-to-edge coverage without gaps, use Square shape.
Is my image data uploaded anywhere?
No. FileReader, Canvas 2D, and the mosaic loops all run locally in your browser. Open DevTools → Network and watch zero requests fire after the page loads. Safe for proprietary art, personal photos, or client work.
Why would I cap the max dimension?
Processing an 8000×8000 image with a 5 px tile size means ~2.5 million tiles, each sampled. Even on a fast laptop this takes several seconds. Capping to 1024 or 2048 gives near-instant results and often looks better artistically (fewer, chunkier tiles).
Can I copy the result as a real image, not a data URL?
Yes, if your browser supports the async Clipboard API’s ClipboardItem with image/png (Chromium 76+, Safari 13.4+, Firefox 127+). Paste lands as an actual image. If not supported, we fall back to copying the base64 data URL as text.
What image formats are supported?
Anything the browser’s <img> element can load: PNG, JPG, GIF, BMP, WebP, SVG, AVIF (where supported). Animated GIFs use only the first frame. HEIC works only in Safari unless converted externally.
Does the tool handle transparent images?
Yes. Transparent pixels contribute to the tile’s sample (their RGB still read as 0). Gap areas fill with your chosen background color. If you want transparent gaps, pick a background color matching your target and delete it in an editor – or post-process with any PNG alpha tool.
Does it work offline?
Yes. Total bundle is under 20 KB. Once loaded, disconnect and keep processing. Useful for travel, air-gapped machines, or proprietary image pipelines.