Color Palette

Point this at a photo, a logo, a screenshot, or a piece of artwork and it returns the handful of colors that actually define the image — each with a hex code ready to copy. It runs entirely in your browser; the image is read as pixels and never uploaded.

How the colors are chosen

Two details make the result useful rather than arbitrary. First, the image is downsampled to at most 200 pixels on its long side before analysis. That keeps extraction fast and, more importantly, stops a few stray pixels from being promoted to a "major" color. Second, it uses median-cut quantization — the same family of algorithm old GIF encoders used to build a 256-color table. Median-cut repeatedly splits the cloud of image colors along its widest axis, so the swatches it returns are representative of large regions, not just the single most-common pixel value. A photo of a forest comes back as a spread of greens and browns rather than one flat green.

Using it

1. Choose an image. A preview appears and the palette is computed immediately.
2. Set how many colors — 4, 6, 8, 10, or 12. Fewer swatches give you the broad theme; more surface secondary and accent colors. Changing the count re-extracts from the same image instantly.
3. Click any swatch to copy its hex code (uppercase, like #3A7BD5). The label text flips to black or white automatically so it stays readable on that color.

Each swatch also shows what share of the image it covers, so you can tell a dominant background color from a small accent at a glance.

Transparent pixels are skipped

Feed it a PNG logo with a transparent background and the transparent area is ignored rather than counted as a color. That's why logos return clean, on-brand palettes instead of one dominated by the "color" of nothing. A JPG has no transparency, so its whole frame — including any white margin — counts toward the palette.

Practical notes and gotchas

• JPEG artifacts and anti-aliasing create thousands of near-duplicate colors around edges. Median-cut groups these together, which is what you want, but it's why a "two-color" graphic can still return a few subtle in-between shades.
• Because analysis runs on the 200px downsample, a tiny accent color covering well under 1% of the image may get merged into a neighboring swatch. Crop to the region you care about first if you need that exact accent.
• The hex codes are standard CSS colors — paste them straight into a stylesheet, a design tool, or a color field.

Use it to build a design palette from a mood-board photo, pull a brand's colors off a screenshot, or check that two images share a consistent look before you publish them together.