Extract a usable palette from a pixel-art PNG

Start here

Choose Visible decoded RGBA, press Extract colors, and save the ZIP. The original 8×8 control produced 12 colors, four pixels each, and a 48×4 swatch. Its 16 fully transparent pixels were excluded from the visible palette.

Expected result:

The actual saved report, swatch and manifest matched an independent calculation from the browser readback, and their standalone bytes matched all three ZIP members. This verifies decoded colors, not hidden RGB retention from the original file.

What you need

Use the original 8×8 PNG or the CC0 project download. The project runs independently on Node 24 with no npm install; its generated images and reports are labelled source references, distinct from the actual browser exports below.

Download the original palette inputs and standalone Node 24 reference project

Tested with: Desktop Google Chrome 154.0.8037.44; browser UAData reports macOS platformVersion 27.0.1 and arm/64. Actual Cloudflare bundle cccc66d; independent window OffscreenCanvas reference and Python 3.14.8/Pillow 12.3.0 verification. No production-worker raw capture or physical-device acceptance.

1. Extract the known palette

Open the palette extractor, use Choose PNG to select opaque-12.png, and keep Visible decoded RGBA. Press Extract colors.

The result contains 64 total pixels: 48 opaque, zero partial-alpha and 16 transparent. Visible mode includes only alpha above zero. Each of the 12 entries in the actual report occurs four times.

Actual twelve-color swatch exported from the original opaque control — 48×4px. Actual tool export with twelve 4×4 cells; not a GUI capture.

2. Save the report and reusable swatch

Download ZIP saves palette.zip containing manifest.json, palette.json and palette-swatch.png, in that order. Individual report and PNG anchors save the same bytes. Keep the JSON with the swatch so transparent cells and frequency ties remain interpretable.

Entries sort by decreasing pixel count, then increasing RGBA for ties. This control has equal counts, so RGBA determines its swatch order. The actual manifest records pixelBasis: worker-canvas-readback, source size, output size and report length; it is not a record of original-file channel preservation.

3. Keep exact-color and transparency boundaries explicit

Visible mode still distinguishes nonzero alpha values. Choose All only when you intend to inspect alpha-zero tuples too. A separate actual fully transparent control produced a report-only ZIP with no swatch; an empty visible palette is a successful result.

The extractor supports at most 256 included exact RGBA keys. It does not quantize similar colors. A high-color image may exceed that limit even if it looks simple at display size.

In this 8×8 control, independent source-to-browser comparison found 16 hidden-RGB changes and no alpha or visible-RGBA changes. Every saved swatch pixel matched the decoded reference. Keep the original PNG when hidden channel values matter; compare RGB and RGBA counting bases before describing an image as having a particular palette size.

4. Reproduce the separate source reference

node generate.mjs
node generate.mjs --check
node --test --test-concurrency=1 --test-timeout=30000 fixture.test.mjs

Run these commands inside the extracted project. They reproduce fixed raw RGBA controls, eight PNGs (three inputs and five references) and four reports; they do not rerun the browser. The offline providers retain their original explicit TypeScript imports for Node 24 and are never imported by the application.