Dithering Studio

About the Dithering Studio

Dithering is a technique that simulates more colors than a palette technically contains by arranging pixels in carefully calculated patterns that trick the human visual system into perceiving smooth gradients. It's been essential to computer graphics since the 1970s, appearing in everything from early Mac desktop wallpapers to NES game sprites and Game Boy camera photos.

This studio applies two classic families of dithering algorithms to your image, combined with any of Station255's retro console palettes. For a related effect without dithering, try the Demake tool, which uses direct nearest-color matching instead of error diffusion.

Algorithms

Bayer ordered dithering (2×2, 4×4, 8×8) — uses a pre-computed threshold matrix (the Bayer matrix) to determine whether each pixel rounds up or down. The result has a geometric, cross-hatch pattern. Larger matrices produce more gradual tonal transitions. This is the algorithm used in many retro game consoles and early desktop computers for grayscale simulation.

Floyd-Steinberg error diffusion — processes pixels left-to-right, top-to-bottom. The quantization error at each pixel (the difference between the original color and the nearest palette color) is distributed to the four neighboring pixels (right, lower-left, below, lower-right) using coefficients 7/16, 3/16, 5/16, 1/16. The result is organic and noise-like, with excellent tonal accuracy — this is what Photoshop's "dither" export uses.

Use cases

Constrained-palette pixel art — achieve smooth gradients within the hard color limits of NES, Game Boy, or PICO-8 palettes.

Retro game asset prep — pre-dither sprites and backgrounds before importing into a game engine that uses indexed color.

Artistic effect — Bayer dithering at large matrix sizes creates a distinct hatched aesthetic popular in zine art and pixel-art communities.

Print — convert a color image to a monochrome dithered version for inkjet or risograph printing.

FAQ

Which algorithm should I use? Floyd-Steinberg for photographs and smooth gradients. Bayer for a stylized retro pattern or when you want predictable, geometric dithering.

What does the "spread" slider do? For Bayer algorithms, spread controls how much the threshold matrix perturbs each pixel's color before palette-matching. Lower = subtle dithering; higher = coarser, more visible pattern.

Is my image uploaded? No. All dithering runs locally in your browser using HTML5 Canvas and JavaScript typed arrays.

Can I combine dithering with upscaling? Yes — dither first, then use the Pixel Upscaler for nearest-neighbor enlargement to a crisp final size.