Color Palette from Image

A palette pulled from a photo or logo is the fastest way to match a website, slide deck or brand kit to an image. This tool groups similar pixels and reports the main colours with their HEX, RGB and HSL values and how much of the image each one covers. You also get a palette image, CSS custom properties and a Tailwind snippet ready to paste. The analysis runs in your browser; the image is never uploaded.

How to use this tool

1. Choose one or more images.
2. Set how many colours you want (2–16).
3. Pick the method: k-means for photos, median cut for a quick result.
4. For logos and flat graphics, choose “Most common exact pixel colour” to get the precise brand colours.
5. Copy the HEX codes, CSS or Tailwind code, or download the palette PNG.

Formula

ΔE = √((L₁ − L₂)² + (a₁ − a₂)² + (b₁ − b₂)²) in CIE Lab; share = pixels in the group ÷ pixels counted

k-means places k centres with k-means++ seeding (weighted by how often each colour occurs) and then repeats “assign every colour to the nearest centre, move each centre to the mean of its group” up to 20 times. Distances are measured in Lab, where equal distances look roughly equally different to the eye. Median cut instead keeps splitting the box of colours with the widest red, green or blue range at its weighted median. Transparent pixels (alpha under 50%) are skipped when that option is on.

Example

A 120 × 80 logo with a blue (#2563EB) background and a yellow (#FBBF24) circle of radius 25 px: the circle covers π × 25² ≈ 1,964 of 9,600 pixels. With 2 colours and exact values the tool reports #2563EB at about 79.5% and #FBBF24 at about 20.5%.