Minecraft Pixel Art Generator
Upload an image, pick an output width from 8 to 256 blocks, and get a block-by-block preview in a 16-color wool or concrete palette, a materials list with stack counts, and a downloadable PNG -- entirely in your browser.
8 to 256. Height follows the image's aspect ratio.
Your image is read entirely in your browser (FileReader and a canvas element) and is never uploaded anywhere.
How the conversion works
Four steps turn an arbitrary photo into a buildable grid. First, your browser decodes the uploaded file and draws it onto a hidden canvas element, which is the only way JavaScript can read a photo's raw pixel colors -- this also downscales anything larger than about 1200 pixels on a side first, so a multi-megapixel photo doesn't stall the next steps for no visual benefit. Second, the output size is fixed: you set a width in blocks (8 to 256) and the height is calculated to preserve the source image's aspect ratio, rounded to the nearest whole block -- a 1,920×1,080 photo at a 64-wide output comes out exactly 36 blocks tall. Third, each output cell doesn't just sample one pixel from the source -- it averages every source pixel that falls inside its proportional region (a box filter), so a cell covering, say, a 4x4 patch of the original photo gets that whole patch's average color, not whichever single pixel happened to land nearest the center. Pixels that are mostly transparent are excluded from that average rather than blended in, so a cutout with a transparent background doesn't drag a stray gray tint into the edges of the shape. Fourth, that averaged color is matched to whichever of the 16 palette swatches is numerically closest to it -- measured as squared Euclidean distance across the red, green and blue channels, the fastest and simplest distance metric that still produces a sensible match once you're choosing between only 16 fixed colors on a coarse grid (see the FAQ on RGB versus Lab below).
Building it in-game, row by row
Pixel art doesn't have layers the way a sphere or dome does -- it's one flat grid, so "layer by layer" here means row by row. Start at the bottom row of the preview (or the top, if you're working downward from scaffolding) and place every block across that row before moving to the next, reading colors straight off the canvas preview or the materials list's swatches. Building it as a standing wall (facing outward, one block per grid cell) reads better from a distance than laying it flat as a floor mural, which mostly only reads correctly from directly above or through an F5 top-down view. Either way, pull your block counts from the materials table rather than guessing from the picture -- it's exact, and it already sorts by which color you'll need the most of, so you know what to mine or buy first.
Worked example: an 8×8 sample cross
This example doesn't use an uploaded photo -- it's a built-in 8×8 test pattern (a Cyan cross, two blocks thick per arm, on a White background) run through the exact same quantize and materialCounts functions the tool above calls, so every number here is computed, not typed in by hand. At an output width of 8 (matching the sample's own size, so every source pixel maps to exactly one block with no averaging involved), the result uses 64 total blocks across 2 colors:
| Block | Count | Stacks needed | Loose leftover |
|---|---|---|---|
| White Wool | 36 | 1 | 36 |
| Cyan Wool | 28 | 1 | 28 |
The Cyan count (28) comes from the cross's own geometry: a vertical arm 2 blocks wide by 8 tall, plus a horizontal arm 8 wide by 2 tall, minus the 2×2 center square counted in both -- 16 + 16 - 4 = 28. Since neither color reaches a full stack of 64, both rows round up to 1 stack needed with the rest reported as loose leftover -- the same rounding logic the itemsToStacks function uses across the whole site, including on the Block Stack Calculator.
Frequently Asked Questions
Does my photo actually get uploaded anywhere?
No. The file input reads the image with the browser's FileReader API straight into memory, draws it to an off-screen canvas element, and reads the pixel data back out with getImageData -- every step happens on your own device. No network request carries the image anywhere, which you can confirm yourself in your browser's network panel while using the tool.
Why match colors in plain RGB instead of a 'perceptual' color space like Lab?
RGB distance is simpler, dependency-free, and fast enough to run on every pixel of a large photo in the browser -- and the accuracy Lab distance would add matters most when you're picking between many close, similar colors. Here the output is already snapped to just 16 fixed swatches and rendered on a coarse block grid, so the geometric approximation error from downsampling dwarfs any small mismatch RGB distance introduces versus Lab. The site's own test suite checks this matching logic against hand-worked examples, including one where the nearest match isn't the color you'd guess at a glance -- see the worked example below.
Why do wool and concrete produce the exact same colors?
Per Minecraft's own map-rendering system (see the palette note above the materials table), a colored wool block and the matching colored concrete block share one base color value -- the game itself doesn't distinguish them for this purpose, so this tool doesn't invent separate numbers to pretend otherwise. Switching the block family toggle only relabels the materials list; if you want the more saturated, glossier look concrete actually has in-game, substitute it block-for-block using the same counts.
My image has a transparent background -- what happens to those pixels?
A pixel only counts toward a block's color if it's at least half-opaque; a mostly transparent region produces empty grid cells rather than a stray colored block, and empty cells aren't uploaded to your materials list or the downloaded PNG's block count. This is why a PNG cutout of a character or logo generally works better than the same image on a solid background -- the shape comes through clean instead of dragging a filled rectangle behind it.
How wide should I set the output for a build I can actually place?
Anywhere from 16 to 48 blocks wide reads clearly at normal viewing distance and stays a reasonable size to place by hand; go past 96-128 only for a wall-sized mural you're building with scaffolding and don't mind spending several inventories of blocks on. Very small widths (under 16) tend to lose recognizable detail once a photo is averaged down that far -- simple, high-contrast source images (logos, flags, single subjects on a plain background) hold up far better at small sizes than busy photos.
Can I generate a design taller or wider than 256 blocks?
Not directly -- 256 blocks wide is the tool's cap, both to keep the browser responsive on large source photos and because a build past that size in either direction gets impractical to place by hand. For a genuinely huge mural, generate at 256 wide, then scale the resulting grid up by placing each block as a 2x2 or 3x3 cluster in-game -- the materials list's counts scale by the same multiplier (times 4 for 2x2, times 9 for 3x3).
Circle In Blocks is a set of fan-made building tools, not affiliated with Mojang or Microsoft; Minecraft is a trademark of Mojang Studios. Grids are generated from the geometry described above, not pulled from the game itself -- see the Terms.