Getting started

Select a color from the palette or pick a custom color, then click or drag on the canvas to draw. Use the grid size selector to set the canvas dimensions, the fill bucket to flood-fill a region, and the eraser to remove pixels.

Tools

Pencil: draw individual pixels one at a time.
Fill (Bucket): flood-fills a contiguous region of the same color.
Eraser: removes color from pixels (sets to transparent).
Color picker / Eyedropper: sample a color from the canvas.

About pixel art

Pixel art is a form of digital art created at the individual-pixel level, typically at low resolutions (8×8 to 64×64 pixels). It originated from early video game graphics in the late 1970s and 1980s when hardware constraints limited screen resolution and color depth. Despite modern hardware eliminating those constraints, pixel art thrives as an artistic style in indie games, icons, and digital illustration.

Export tips

Export as PNG to preserve transparency and lossless quality. When scaling up pixel art for display, use nearest-neighbor interpolation (not bilinear or bicubic) to keep crisp pixel edges. In CSS: image-rendering: pixelated; achieves this in modern browsers.

Color palette design

Professional pixel artists typically work with a limited, curated palette of 8–32 colors. Constraints force cohesion and make the artwork feel intentional rather than noisy. Popular community palettes include:

Pico-8: 16-color palette used in the Pico-8 fantasy console
DB16 / DB32: DawnBringer's palettes designed for natural-looking pixel art
Famicube: 64-color palette designed to evoke NES-era aesthetics
Game Boy (DMG): 4-color monochrome green palette

Pixel art animation basics

Classic pixel art animation in games ran at 8–15 frames per second, not the 24–60fps of modern video. This lower frame rate, combined with hold frames (repeating a key pose for 2–4 frames) gives pixel animation its characteristic snappy feel. When creating sprite animations:

Draw on a consistent canvas size (e.g., 16×16 or 32×32 per frame)
Use an onion-skin view to see adjacent frames when drawing in-betweens
Prioritize silhouette clarity - the outline should read clearly at small sizes