Limiting your palette to 8-16 colors keeps shapes clean, but leaves you short on colors for areas that shift gradually, like a sky or a metal surface. Dithering mixes pixels of two colors in a regular pattern to trick the eye into seeing an intermediate color that isn't really there. This guide covers how it works and how to use it without making a mess.
Why dithering exists
The eye averages small pixels together when they're packed densely - alternating black and white pixels in a checkerboard reads as gray from a distance. Use that, and you can create "fake in-between steps" between two colors without adding to your palette. Since more colors means more file management and animation-consistency headaches, handling wide, gentle transitions with dithering is often the more efficient choice.
The three base patterns
The workhorse is the 2x2 checkerboard (50%). Add a sparser 25% pattern and a denser 75% pattern and you get three intermediate density steps between two colors. Increasing the density in order - 25% then 50% then 75% - as you move from a lighter area to a darker one smooths the transition.
Rules for using it naturally
- Let the pattern flow one direction - arranging dither pixels along a surface's curvature keeps the form readable; locking them to the grid flattens it.
- Hand-tune the boundaries - where two density regions meet, shift pixels one at a time so the density changes gradually instead of stepping.
- Don't use it on small areas - dithering a 24px icon or a character's face just reads as noise. It only works over large areas.
- Be careful on scrolling backgrounds - dense dithering on a continuously moving background causes shimmering.
Practical checklist
- 1. Consider a mid-tone firstif adding one mid-tone to the palette is cleaner, do that instead of dithering.
- 2. Three steps: 25/50/75these three densities build most gradients.
- 3. Flow along the curvaturearrange the pattern to follow the surface's shape.
- 4. Check at real sizeview it shrunk to in-game size, not zoomed in, and check for shimmering.
If you need to resize an image with dithered gradients, scale it by an integer factor in the image resize tool so the pattern doesn't break.
Frequently asked questions
When should I use dithering and when should I avoid it?
It's useful for wide, gentle gradients like skies and metal surfaces, or for an old-console texture. Avoid it on small important areas like a character's face, and on backgrounds that scroll often, where it can look noisy.
Can I use my art tool's automatic dithering?
It's fine as a base pass, but left as-is the pattern looks mechanical. The most natural approach is to lay it in automatically, then hand-tune the density around the boundaries.
How many patterns do I actually need?
A 2x2 checkerboard (50%) plus sparser 25% and denser 75% patterns cover most situations. For smoother transitions, look at a 4x4 Bayer matrix.
Related guides: Choosing a color palette · Outlines and shading · Sprite size