Color Palette Extractor

The extractor looks for the colours that cover most of your image:

• It shrinks a copy to 200 pixels on its longest side, which is enough to find the main colours quickly.
• It skips pixels that are more than half transparent, so the empty background around a logo doesn’t count as a colour.
• It groups similar shades, counts the pixels in each group and picks the most common, skipping any too close to one it already has. You get distinct colours, not six versions of the same blue sky.

Each percentage is how much of the image is closest to that colour, so together they make about 100%, largest first. Flat artwork gives exact colours: a logo filled with #E11D48 gives #E11D48. In a photo, each colour is the average of a group of very similar shades.

Because it counts pixels, a four-colour graphic gives four colours even if you ask for 12, and a small bright detail on a large plain background barely registers, so crop to the part you want first. Shares of 0% or 1% are often edge pixels where two colours blend.

For brand colours, start from the original PNG or SVG of your logo rather than a screenshot or a JPG: JPEG compression and screenshots can shift colours slightly. Crop away anything that isn’t the logo, set the number of colours to match it, and extract. If your brand guidelines list official hex codes, those are the final word.

Figma, Canva, Photoshop and most other design apps accept hex codes. Click a colour here, paste it into the app’s colour picker, and save it as a style or swatch for next time.

The CSS export gives you CSS variables. This is its output for a test image of a blue sky and green hills, with a small red square in one corner:

:root {
  --color-1: #81b0d4;
  --color-2: #639be5;
  --color-3: #438c43;
  --color-4: #415f41;
  --color-5: #236a23;
  --color-6: #fe0000;
}

Paste it into your stylesheet, rename the variables to say what they’re for, such as --brand, and use them as var(--brand). Change a hex code once and every use updates. The other exports:

• SCSS gives Sass variables ($color-1 and so on).
• Tailwind gives a colors block for tailwind.config.js, as used up to Tailwind CSS 3. Tailwind 4 sets colours in CSS instead: add them to an @theme block with names like --color-brand to get classes such as bg-brand.
• JSON lists each colour’s hex code, RGB values and percentage.

Colours from photos are often mid-tones, which can be hard to read as text or behind it. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios. For level AA, normal text needs 4.5:1 against its background; large text (about 24 px, or 19 px bold), icons and button outlines need 3:1.

In the palette above, white text on #438c43 scores 4.1:1, fine for a large heading but not for body text, while white on #415f41 scores about 7:1. Check each pair with a contrast checker (the colour picker in Chrome’s developer tools shows the ratio), and don’t let colour alone carry meaning.

The colours are worked out by your browser, on your own device, so your image is never uploaded. That matters for unreleased designs and client work.

You can check this yourself: open your browser’s developer tools, watch the Network tab and extract a palette. The only requests are anonymous page-view counts, described in our privacy policy.