Posterize an image

Reduce each RGB channel to a selected number of evenly spaced tone levels.

freeworks offlinenothing uploaded
ToolPosterize Image
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Each channel maps to the nearest level using step 255 ÷ (levels−1), while alpha is preserved. The quantized pixels are encoded as PNG.

  • Four levels provide the initial poster effect.
  • The levels are evenly spaced and not sampled from the image.

Worked example

Posterize to four levels
Input
											Input: data:image/png;base64,iVBORw0KGgo=
Levels: 4
Output
												PNG data URL with four evenly spaced RGB levels

When to use this

Poster mock-ups flatten photographs, game assets limit palettes, and compression lessons show colour quantization.

Edge cases

  • One level is outside the intended range because it divides by zero.
  • Smooth gradients develop visible banding.
  • Alpha remains continuous while RGB is quantized.

References