About

Dithering is a controlled injection of quantization noise that tricks the human visual system into perceiving more tonal gradations than the output palette actually contains. The technique dates to newspaper halftone printing and became critical in early computer graphics where displays were limited to 2 - 16 colors. Getting it wrong produces banding artifacts, moiré interference, or muddy detail loss - problems that no amount of post-processing can fix. This tool implements seven production algorithms: threshold, ordered (Bayer matrices up to 16×16), Floyd-Steinberg, Atkinson, Stucki, random noise, and radial halftone. Each operates on actual pixel data via the Canvas API; no server round-trip, no simulation.

Palette quantization uses a median-cut partitioning of the RGB cube, or you can select historically accurate palettes (Game Boy 4-color, CGA 4-color, Commodore 64 16-color). Note: error-diffusion algorithms assume a left-to-right, top-to-bottom scanline order. Serpentine scanning is not implemented, which may produce slight directional bias on high-frequency textures. All processing runs in a Web Worker; images up to roughly 4000×4000 pixels are practical before memory pressure becomes a factor.

Formulas

Ordered dithering constructs a Bayer threshold matrix recursively. For a matrix of size 2n:

M_2n = 14n² 4M_n4M_n + 24M_n + 34M_n + 1

where M₁ = 0231. A pixel at position (x, y) is set to the nearest palette color if its luminance exceeds the normalized threshold M[x mod n][y mod n].

Floyd-Steinberg error diffusion distributes quantization error e = old − new to four neighbors:

pixel(x+1, y) += e × 716
pixel(x−1, y+1) += e × 316
pixel(x, y+1) += e × 516
pixel(x+1, y+1) += e × 116

Atkinson uses the same principle but spreads only 68 of the error (18 to each of 6 neighbors), deliberately discarding 25% of error. This produces the characteristically sharp, high-contrast look seen in original Macintosh screenshots.

Luminance for grayscale conversion uses ITU-R BT.601 coefficients:

L = 0.299R + 0.587G + 0.114B

where R, G, B are channel values in the range [0, 255]. Palette matching uses Euclidean distance in RGB space: d = √(r₁ − r₂)² + (g₁ − g₂)² + (b₁ − b₂)².

Reference Data

Algorithm	Type	Error Spread	Neighbors	Character	Best For
Threshold	Point	None	0	Hard, high contrast	Logos, line art
Random Noise	Point	None	0	Film grain texture	Photographic feel
Bayer 2×2	Ordered	None (threshold map)	0	Coarse cross-hatch	Retro pixel art
Bayer 4×4	Ordered	None (threshold map)	0	Classic dither grid	Game Boy style
Bayer 8×8	Ordered	None (threshold map)	0	Fine ordered pattern	General purpose
Bayer 16×16	Ordered	None (threshold map)	0	Smooth gradient ramps	Large tonal range
Floyd-Steinberg	Error Diffusion	100%	4	Natural, organic noise	Photographs
Atkinson	Error Diffusion	75%	6	Sharp, high contrast	Mac Classic style
Stucki	Error Diffusion	100%	12	Smooth, wide spread	Large prints
Halftone	Amplitude Modulation	None (radial map)	0	Newspaper dot pattern	Print reproduction
Reference Palettes
Monochrome	Black & White		2 colors: #000, #FFF
Game Boy	4-shade green		#0F380F, #306230, #8BAC0F, #9BBC0F
CGA Mode 4 Hi	4 colors		#000, #55FFFF, #FF55FF, #FFF
Commodore 64	16 colors		Full C64 palette (MOS 6567/6569 VIC-II)
EGA	16 colors		Standard IBM EGA 64-color subset (16 default)
Grayscale 4	4 shades		#000, #555, #AAA, #FFF
Grayscale 8	8 shades		Linear 0 - 255 in 8 steps
Custom N	Median-cut		User-defined 2 - 64 colors from source image

Frequently Asked Questions

Floyd-Steinberg processes pixels strictly left-to-right, top-to-bottom. Quantization errors accumulate along that scan direction, creating visible worm-like artifacts on shallow gradients. Serpentine (bidirectional) scanning mitigates this by alternating scan direction each row. This tool uses unidirectional scanning for algorithmic transparency. For production use on large gradients, consider Stucki dithering which spreads error across 12 neighbors, diffusing directional bias more effectively.

Floyd-Steinberg distributes 100% of the quantization error to 4 neighbors. Atkinson distributes only 75% (6/8) to 6 neighbors, deliberately losing 25% of the error. This makes Atkinson produce sharper, higher-contrast results with more pure black and pure white areas. Atkinson excels at text and UI screenshots but loses subtle shadow detail in photographs. Floyd-Steinberg preserves more tonal fidelity.

Larger Bayer matrices produce finer, less visible dithering patterns at the cost of larger repeating tile units. A 2×2 matrix has only 4 threshold levels, creating obvious checkerboard patterns. An 8×8 matrix provides 64 threshold levels, approaching the perceptual smoothness of error diffusion while maintaining the regular, artifact-free structure of ordered dithering. The 16×16 matrix with 256 levels can reproduce virtually all perceptual gray tones in monochrome.

Median-cut partitions the RGB color cube by recursively splitting the longest axis of the bounding box of remaining colors at the median. If your image is dominated by a single hue (e.g., a sunset with 80% orange), most palette slots will be allocated to variations of that hue, leaving few slots for minority colors (sky blue, shadow black). This is statistically correct but perceptually surprising. Increasing palette size to 16 or more usually resolves the issue for most photographic content.

Dithered images must be scaled with nearest-neighbor interpolation only. Bilinear or bicubic interpolation will blur the carefully placed pixel patterns into muddy gray, destroying the dithering effect entirely. This tool exports at 1:1 pixel ratio. Scale the exported PNG in any editor using nearest-neighbor (called "Hard Edges" in Photoshop, "None" in GIMP) to maintain crisp pixel boundaries.

The halftone mode in this tool uses a single-channel circular threshold map that simulates amplitude-modulated (AM) screening. It operates on the luminance channel, not separated CMYK plates. Real print halftoning uses four rotated screens (typically at 0°, 15°, 45°, 75°) to avoid moiré. This tool's halftone is a visual approximation suitable for artistic effect, not prepress proofing.