Convert Image to Web Safe Colors
Convert images to the 216 web-safe colors with optional Floyd-Steinberg, Atkinson, or Bayer dithering. Free, offline, client-side.
Reduce any image to the 216-color web-safe palette (the 6×6×6 RGB cube with values 00/33/66/99/CC/FF). Pick hard-snap "Nearest" for stencil/poster looks, or one of three dither algorithms (Floyd-Steinberg, Atkinson, Bayer) to keep photos smooth.
How to Use Convert Image to Web Safe Colors
- Drop or upload any common image. Files stay in your browser; no server is involved.
- Pick a dither mode - Nearest gives a hard cutoff (stencil/poster look, visible banding on photos). Floyd-Steinberg gives the smoothest result for photos. Atkinson gives the iconic 1984 Macintosh feel with more contrast. Bayer 4×4 gives a deliberate retro patterning.
- See the before/after - both the original and the web-safe result render side-by-side so you can compare directly. The right pane is what you'll save.
- Read the stats - the counter tells you how many unique colors the original had (often millions for photos) and how many remain after conversion (capped at the 216 web-safe palette). Big drop = the conversion is doing its job.
- Optional - cap the max dimension for very large images. Floyd-Steinberg on 8 megapixels takes seconds; capping to 1024 px gives a near-instant result and the pixel-art aesthetic as a bonus.
- Copy or download - Copy uses the ClipboardItem API to paste an actual image into Slack/Discord/Photoshop. Download saves
web-safe-<mode>.png. Reset returns to defaults.
Frequently Asked Questions
What exactly are the web-safe colors?
216 colors formed by the cross-product of 6 RGB values per channel: 00, 33, 66, 99, CC, FF in hex (0, 51, 102, 153, 204, 255 in decimal). 6 × 6 × 6 = 216. Originally chosen so 8-bit displays could show all of them without dithering. Still useful for retro design, deliberate constraint, or stress-testing pipelines.
Why does Nearest mode produce visible banding?
Because two adjacent pixels with slightly different colors (say 200 and 215) both snap to the same level (204), the smooth gradient becomes a hard step. Photos that look smooth at 24-bit have visible bands at 216 colors – until you add dithering, which is the whole point of having Floyd-Steinberg / Atkinson / Bayer options.
What does Floyd-Steinberg dithering do?
For each pixel, it snaps to the nearest web-safe value, then pushes the rounding error to four unprocessed neighbors (7/16 right, 3/16 below-left, 5/16 below, 1/16 below-right). Over many pixels the errors balance out, so a region of mid-tone becomes a random-looking pattern of nearby palette colors whose average matches the original – smooth gradients restored.
What’s Atkinson dithering’s claim to fame?
Bill Atkinson’s algorithm for the original 1984 Macintosh. It diffuses only 6/8 of the rounding error across 6 neighbors (each 1/8). The result is sharper than Floyd-Steinberg with more contrast, but loses some detail in low-error regions. Pick it when you want the unmistakable original-Mac aesthetic.
What does Bayer 4×4 ordered dither look like?
Each pixel’s threshold is shifted by a fixed pattern (the 4×4 Bayer matrix). The result is a regular crosshatch you can actually see – recognizably “old computer” or “newspaper halftone”. Compresses well because the pattern is predictable.
How many colors are in the output?
At most 216. Usually fewer – Nearest mode typically uses 20-100 of the 216 palette colors depending on the source. The stats line reports the exact count so you can verify the conversion did what you expect.
Is the conversion really useful in 2026?
Not for production web design – modern displays handle 16M+ colors. But it’s useful for retro art (1990s websites, GIF-style limited palettes), stress-testing color pipelines, learning about quantization, and producing intentionally constrained aesthetic effects.
Is my image uploaded anywhere?
No. FileReader, Canvas 2D, dithering loops, and toDataURL all run locally in your browser. Open DevTools → Network and watch zero requests fire after the page loads. Safe for client work, brand assets, or anything private.
Does it preserve transparency?
Yes. Fully transparent pixels (alpha = 0) are left alone and don’t contribute to the dither. Semi-transparent pixels have their RGB converted to web-safe but keep their original alpha. Output is RGBA PNG.
Does it work offline?
Yes. Total bundle is under 20 KB. Once the page loads, disconnect and keep processing – perfect for air-gapped machines, travel, or proprietary image pipelines.