CodeKitHub
Why we added automatic palette extraction to the color picker

Why we added automatic palette extraction to the color picker

Published Aug 5, 2026

Our color picker has always let you upload an image and click any pixel to get its exact HEX, RGB and HSL value. That answers “what color is this specific point?” — useful, but not the question most people actually have when they upload a photo. Usually it’s “what’s the overall color scheme of this image?” — pulling a brand palette from a logo, or matching the mood of a reference photo for a website’s color scheme.

Single-pixel sampling can’t answer that. So we added palette extraction: upload an image, and the tool now automatically pulls out the eight most dominant colors and shows them as clickable swatches.

How it works

There’s no AI model involved and nothing is uploaded anywhere — it’s a straightforward frequency-counting algorithm that runs in a few milliseconds:

  1. The image is downsampled to an 80×80 canvas. Full resolution isn’t needed for color statistics, and downsampling keeps the whole thing instant even for large photos.
  2. Every pixel is bucketed by a coarsened version of its color — the top 5 bits of each RGB channel, so pixels that are visually near-identical land in the same bucket instead of each counting as a unique color.
  3. Buckets are sorted by how many pixels landed in them, and the eight largest become the palette, each one shown as the average color of everything in that bucket.

That’s it. No machine learning, no external service — just downsampling and counting, which is why it’s instant and never leaves your browser.

Click a swatch, get the code

Each palette swatch is clickable: click one and it becomes the tool’s active color, with HEX, RGB and HSL populated automatically and the hex copied to your clipboard in the same click. There’s also a “copy all” button if you want the whole palette as a comma-separated list, useful for pasting straight into a design tool or a CSS custom-properties block.

Try it

Upload any image — a screenshot, a logo, a photo — on the color picker page and the palette appears automatically underneath.

← Back to Blog