Image Color Palette Extractor – Turn Any Picture into a Usable Palette
A photo, a logo or a screenshot already contains a colour scheme. This image color palette extractor finds it: drop in an image and it returns the handful of colours that make it up, how much of the picture each one covers, and where each one sits. You can then copy the HEX codes, CSS variables, SCSS or Tailwind tokens, or download an Adobe .ase swatch file, a GIMP .gpl palette or a PNG palette card. Everything happens on a canvas in your browser, and the image never leaves your device.
How palette extraction works
The image is first sampled at up to 512 pixels on its longest edge with smoothing turned off, so every sample is a real pixel rather than a blend of two neighbours. Transparent pixels are skipped. If a few exact colours cover 98% of what is left, as they do in logos, icons and flat illustrations, those exact colours become the palette, so a brand mark comes back with its true hex values. Otherwise the colours are grouped with weighted k-means clustering, seeded deterministically, so the same image always gives the same palette.
An average of a group is often a colour that never appears in the image, for example the muddy blend along the edge of a shape. So each swatch is the group’s weighted medoid: the real image colour that sits closest to everything else in its group. Swatches closer than one just-noticeable difference are merged.
Why a perceptual colour space beats RGB
Distances in RGB do not match what people see. Two blues 40 RGB units apart can look almost identical, while two greens the same distance apart look clearly different. Clustering in RGB therefore wastes swatches on shades you cannot tell apart. This tool clusters in OKLab, a perceptually uniform space designed by Björn Ottosson in 2020 and now the basis of CSS oklch(). In OKLab, a distance of about 0.02 is one just-noticeable difference, which is the threshold the tool uses to merge colours and to report how faithful the palette is.
Dominant colours versus vibrant colours
An area-based palette shows the colours that dominate a picture, which is what you want for backgrounds and large surfaces. It can miss a small striking accent, such as a red jacket in a green landscape. The vibrant and muted picks fill that gap. Adapted from the default targets of Android’s Palette API, they score candidate colours by saturation, lightness and population to find a Vibrant, Light Vibrant, Dark Vibrant and three muted roles. The palette map view repaints the image with only the current swatches, so you can see what a six-colour version of the picture looks like, and hovering a swatch highlights where it lives. For anything still missing, the eyedropper reads exact full-resolution pixels and pins them to the palette.
Building a UI theme from a photo
Colours that look good together are not always readable together. The WCAG contrast grid pairs every palette colour, plus white and black, as text on background. Normal body text needs at least 4.5:1 (AA), large text and interface components need 3:1, and 7:1 earns AAA. Use the passing pairs for text and buttons, and keep the rest for decoration and illustration.
Which format does each app import?
- Illustrator, Photoshop, InDesign, Affinity: the Adobe Swatch Exchange
.asefile, imported as one colour group. - GIMP, Inkscape, Krita: the
.gplpalette. - Web projects: CSS custom properties, SCSS variables, a Tailwind v4
@themeblock or a Tailwind v3 config. - Figma and everything else: the HEX list or the JSON file, which also carries RGB, HSL, OKLCH and coverage.
:root {
--sky-blue: #87CEEB;
--gray: #8D6E63;
}Want to convert a swatch to CMYK or LAB? Open it in the Color Space Converter. Need harmonies built from one colour? The Random Color Generator creates complementary and analogous schemes.