Image Color Palette Extractor
Sample an image and find representative dominant colors. Your files are never uploaded to our servers. ToolkitPoint processes them on your own computer, so confidential documents stay with you.
Processed in your browser. Your files are not uploaded.
How to use Image Color Palette Extractor
- Load the image to analyze with the "Choose an image" field and set "Number of colours" (2 to 16).
- Press "Extract colors"; k-means clustering on a reduced copy of the image finds the dominant colours, with each colour's share of the image.
- Read each swatch's hex, RGB, HSL and OKLCH values and its nearest CSS colour name, or click the image itself to pick any exact pixel colour and add it to the palette.
- Tick "Lock" on colours you want to keep, then extract again to fill only the remaining slots.
- Check the WCAG contrast table and the colour-blind simulation rows, then export as CSS variables, SCSS, Tailwind config, JSON, hex list, a PNG swatch or an ASE file.
Worked example
Load a brand photo, set 5 colours and extract. Click the logo in the image to pick its exact pixel colour and add it, then choose "Tailwind config" to copy a colors block, and read the contrast table to see which colours pass AA against white.
When to use this tool
- Pulling a starting color scheme for a website from a hero photo.
- Matching slide accents to the colors of a product picture.
- Grabbing CSS variables from a mood-board image for a design handoff.
Important limitations
Palette extraction clusters pixels from a reduced copy of the image, so tiny details may be merged into larger colour groups; use the eyedropper for exact pixels.
Frequently asked questions
Are the swatches exact colors from the picture?
They are cluster averages of the image's pixels (from a reduced copy of at most 220 pixels on the longer side, sampled without smoothing), so they represent the picture rather than one pixel. For brand-critical values use the click-to-pick eyedropper on the original image, which reads the exact pixel.
How are the colors chosen?
K-means clustering groups similar pixels, starting from the most distinct colours. The 'accent' sampling option gives vivid pixels more weight so a small logo colour is less likely to be swallowed by a big background.
What do the contrast numbers mean?
The table shows the WCAG 2.x contrast ratio between every pair of colours plus white and black, labelled AAA (7:1), AA (4.5:1), AA large text (3:1) or Fail. It measures luminance contrast only; it does not judge whether a pair looks good.
How accurate is the colour-blind simulation?
It applies published matrices (Machado et al. 2009, full severity) in linear RGB to show an approximation for protanopia, deuteranopia and tritanopia. Real vision varies, so use it as a guide, not a diagnosis.
Are transparent pixels counted?
No. Pixels with less than half opacity are skipped, so a cut-out PNG reports only its visible content.
What are the CSS colour names?
Each colour is matched to the nearest of the 140 standard CSS named colours in OKLab space. It is a nearest match, not an official name for your exact shade.