🎮 How to Use
- Pick grid size: 16×16 or 32×32. Pick a color.
- Click any cell to paint it. Click ↓ PNG to download.
About the Pixel Art Editor
Pixel art is the deliberate, low-resolution drawing style of the 1980s arcade and home-console era: every pixel is placed by hand on a small grid, colours come from a tight palette, and the artist works in raster (not vector) form. The aesthetic was a hardware constraint at the time, when consoles like the NES and Game Boy had a few kilobytes of video RAM and could not afford photorealism, but it has since become an independent art form used across modern indie games (Stardew Valley, Celeste, Dead Cells), favicons, app icons, and emoji. This editor gives you a 16 by 16 or 32 by 32 grid, a colour picker, click-to-paint cells, and a download-as-PNG button. The whole thing runs in your browser.
Why a small grid? Because pixel art has to read at thumbnail size. A 16 by 16 sprite is 256 pixels of expression; every one is a deliberate decision about silhouette, contrast, and colour. The constraint is the discipline.
How the editor works
- Pick a grid size. 16 by 16 gives 256 cells; 32 by 32 gives 1024 cells. Larger means more detail but slower to fill.
- Pick a colour. Use the colour input to choose any RGB. For authentic retro work, stick to a 4 to 16 colour palette.
- Click cells to paint. Single click fills one cell with the active colour. Click again to overwrite.
- Download. The PNG button exports a pixel-perfect file at the source resolution. Use CSS image-rendering pixelated when displaying it to keep edges crisp.
The canvas state lives in browser memory and is discarded when you close the tab. Save your PNG before leaving.
Worked example: a smiley face on a 16x16 grid
To draw a Smiley in 16 by 16 you only need three colours and roughly 60 painted cells:
- Outline first. Pick the darkest colour. Trace the face circle by clicking the ring of edge cells. This silhouette is what readers see at icon size.
- Fill the interior. Pick yellow. Click every cell inside the outline. A flood-fill is faster but this editor uses single-click; expect about 40 clicks.
- Eyes. Pick black. Paint two 1x1 cells at roughly the (5,6) and (10,6) positions, where columns and rows count from 0.
- Mouth. Paint a 5-cell arc near the bottom of the face, slightly curved upward. Three pixels for the mouth body and two for the corners.
- Cell count check. 28 outline + 28 fill + 2 eyes + 5 mouth = 63 painted pixels of 256 total. That is the entire icon.
Common grid sizes and their use
| Grid | Cells | Typical use | Console reference |
|---|---|---|---|
| 8 x 8 | 64 | Tiny icons, font glyphs | NES sprite tile, Game Boy tile |
| 16 x 16 | 256 | Mobile icons, sprite avatars | NES enemy, classic emoji |
| 32 x 32 | 1024 | Desktop icons, player sprites | SNES character, taskbar icon |
| 64 x 64 | 4096 | Detailed character portraits | Modern indie game character |
| 128 x 128 | 16384 | App icons, large sprite art | macOS dock icon at base size |
Common pitfalls
- Anti-aliased exports. Browsers default to bilinear scaling, which blurs hard pixel edges. Export at native resolution and apply image-rendering pixelated in CSS to keep crisp edges.
- Too many colours. Beginners load up palettes with 50 or more colours and the art looks muddy. Pick 4 to 16, force yourself to mix tones, and the piece will gain cohesion.
- Working at the wrong zoom. Drawing at 1:1 is impossible; the editor scales each cell to roughly 20 to 30 screen pixels for click accuracy. If your display looks pixelated when previewed elsewhere, that is the intended look.
- Skipping the silhouette pass. The most legible sprites are designed silhouette-first, with the dark outline placed before any colour. Reading at icon size depends on silhouette clarity.
- Forgetting to save. The editor does not autosave. Download your PNG before refreshing or closing the tab.
- Anti-pattern: jagged 45-degree lines. Most beginners draw diagonals as single-pixel staircases (1-1-1-1). The classic pixel-art convention is the 2-1 or 1-2 ladder (two pixels horizontal then one vertical, repeated), which reads as a smoother diagonal at viewing distance.
Frequently asked questions
What grid sizes do retro consoles actually use?
The Atari 2600 character sprites were 8 by 8 pixels. NES sprites were 8 by 8 or 8 by 16, and the entire display was 256 by 240. Game Boy sprites were 8 by 8 or 8 by 16 on a 160 by 144 screen. SNES allowed sprites up to 64 by 64. Most pixel-art icons used today on desktop apps and websites follow the 16 by 16, 32 by 32, 64 by 64, and 128 by 128 power-of-two grid because operating systems scale them cleanly. This editor offers 16 by 16 and 32 by 32, the two most common sizes for sprite work.
What is a palette and why do pixel artists limit colours?
A palette is the fixed set of colours used in a piece of pixel art. The NES had a hardware palette of 64 colours but only 4 colours per 8 by 8 tile; the Game Boy had 4 shades of grey-green; PICO-8 uses a famous 16-colour palette. Modern artists impose self-restrictions to force good colour choices, ensure visual cohesion, and replicate retro aesthetics. Smaller palettes also dramatically reduce file size and load time and force you to think about contrast rather than colour shopping.
How do I scale pixel art without blurring it?
Browsers and image editors default to bilinear or bicubic interpolation, which blurs hard pixel edges. Use nearest-neighbour scaling instead: in CSS apply image-rendering pixelated (Chrome, Edge, Firefox 80 and later) or image-rendering crisp-edges. Export at integer multiples (2x, 4x, 8x) of the source size for the sharpest result. Non-integer scales like 3.5x will produce uneven pixel widths and look wrong.
What file format should I export pixel art as?
PNG is the universal choice. It supports alpha transparency, uses lossless compression that is extremely efficient for indexed-colour images, and renders identically across every modern browser and operating system. Avoid JPEG, which adds compression artefacts around sharp edges; avoid WebP and AVIF only if you need older browser support; avoid GIF unless you need animation, in which case modern animated PNG or WebP is usually a better choice.
Is my drawing saved if I close the tab?
No. The editor keeps the canvas state in the page's JavaScript memory, which is discarded when you close or refresh the tab. There is no autosave, no cloud sync, and no account. To preserve work, use the export or download button to save the PNG locally before closing. This privacy-first design means your drawing never leaves your device.