UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Image Color Extractor

Extract dominant color palette from images

About Image Color Extractor

Great colour palettes are hidden in photos you already have — a brand photograph, a movie poster, a competitor screenshot. This tool extracts dominant colours using k-means clustering: it groups the pixels in your image into colour clusters and returns the centroid of each as a representative swatch. Unlike counting pixel frequency, clustering surfaces meaningful perceptual groups — the warm gold in a sunset, the deep navy of the sky — not just the most common background grey. Choose 5, 8, or 12 swatches; each result shows HEX, RGB, and HSL with a one-click copy and a percentage indicating how much of the image that colour represents. A full export gives ready-to-use CSS custom properties or a Tailwind colours block. Everything runs in your tab using Canvas pixel reads — no image is uploaded.

Why use Image Color Extractor

K-Means Clustering Algorithm

Rather than counting every pixel's exact colour, k-means groups pixels into perceptual clusters and returns each cluster's centroid. This surfaces meaningful colour relationships — accent oranges hidden among millions of background grey pixels — that a simple frequency count would bury under monotone backgrounds.

5, 8 or 12 Colour Palette

Pick how many swatches the algorithm should find. Five colours give a clean primary/secondary/accent/neutral/highlight structure ideal for branding. Eight suits hero section design and richer UI palettes. Twelve is useful for full brand guide generation or matching a complex illustration's entire colour story.

HEX, RGB, HSL Output

Every swatch displays in all three common formats. Click the copy icon to put the value directly on your clipboard for pasting into Figma colour styles, CSS variables, design tokens, or a Tailwind configuration file — no manual transcription between colour spaces.

Pixel-Frequency Indicators

Each swatch shows what percentage of the image's pixels belong to its cluster. This makes it easy to identify the true dominant colour (50%+), the secondary accent (10-25%), and rare-but-noticeable highlight colours (2-5%) — the structural hierarchy behind a well-composed palette.

Tailwind and CSS Variables Export

The export feature generates ready-to-paste CSS custom properties (--color-1: #…) or a Tailwind colours config block you can drop directly into tailwind.config.js. This bridges the gap between visual inspiration and production code without manually retyping a single hex value from the palette swatches.

Browser-Local Analysis

The photo is drawn onto a Canvas element, pixels are read via getImageData, and clustering runs in JavaScript — all inside your browser tab throughout the analysis. Unreleased brand mockups, client photos, and confidential design assets never leave your device during the colour extraction process.

How to use Image Color Extractor

  1. Upload a photo, screenshot, product mockup, or inspiration image in JPG, PNG, or WebP format.
  2. Pick the palette size — 5 colours for a focused hero/accent/neutral palette, 8 or 12 for a full brand palette.
  3. Watch the k-means clustering run and swatches appear with their percentage of the image they represent.
  4. Click any swatch to cycle between HEX, RGB, and HSL display, then click the copy icon to put the value on your clipboard.
  5. Use the Export button to download the full palette as CSS custom properties or a Tailwind config object.
  6. Save the palette JSON if you are building a design system or want to compare palettes across multiple images.

When to use Image Color Extractor

  • Building a brand colour palette from a product photo, logo, or inspiration image for a new design system.
  • Extracting accent colours from a hero image to use as UI colours that feel native to the visual content.
  • Matching CSS colours to a client's existing photography for a web redesign proposal or mood board.
  • Reverse-engineering a competitor's or inspiration site's colour palette from a screenshot.
  • Creating a Tailwind or CSS tokens palette directly from a brand photography shoot without manual colour-picking.
  • Identifying the dominant colour in a product photo for dynamically themed e-commerce product pages.

Examples

Sunset photo → 5-colour palette

Input: Sunset JPG: 1920×1080

Output: [#1B2845 (38%), #E08E45 (24%), #F2D478 (18%), #6B3232 (12%), #FFF6E0 (8%)]

Brand mockup screenshot

Input: Figma export PNG: 2400×1500

Output: [#FFFFFF (52%), #0F172A (24%), #3B82F6 (12%), #F59E0B (8%), #10B981 (4%)]

Movie poster

Input: Poster JPG: 1080×1620

Output: [#000000 (40%), #C4271A (28%), #F1B963 (16%), #FFFFFF (10%), #4D2818 (6%)]

Tips

  • Five colours map naturally to a classic brand palette: primary, secondary, accent, neutral background, and highlight — a good starting structure for any design system.
  • If a photo contains many skin tones or subtle gradients, raise the cluster count to 8 or 12 to prevent them from collapsing into a single averaged flesh tone.
  • Treat colours with under 4% frequency as rare accents or highlights — great for interactive states and hover effects, but too subtle for primary brand application.
  • Run the extractor on three or four inspiration images and compare the palettes — the colours that appear across all of them are the strongest candidates for a brand palette.
  • Crop out large uniform backgrounds (white walls, grey studio backdrops) before extracting — dominant background colours can drown out the more interesting foreground hues.

Frequently Asked Questions

How does the colour extractor pick which colours matter?▾
It uses k-means clustering, which groups all the pixels in the image into k colour clusters based on perceptual similarity. The centre point (centroid) of each cluster becomes a swatch. This approach finds the most representative colours, not just the most frequent, so accent colours that appear in smaller regions are still surfaced if they form a distinct visual group.
What's the difference between dominant colour and average colour?▾
The average colour of an image is a single value calculated by averaging every pixel's RGB values, which typically produces a muddy neutral. Dominant colours (via clustering) are the distinct colour groups that actually appear in the image — the blue sky, the red jacket, the green grass — which are far more useful for palette generation.
Can I export the palette to Figma or Tailwind?▾
Yes. The export function provides a CSS custom properties block and a Tailwind colours configuration snippet. For Figma, use the HEX values with the one-click copy button to add each colour as a colour style manually — Figma does not currently support palette import via files.
How many colours should my palette have?▾
Five colours is a strong default for branding: primary, secondary, accent, neutral, and highlight. Use 8 if the image is rich with distinct hues or if you need enough variety for a full UI design system. Use 12 only for comprehensive brand guides or when working with complex illustrations or movie poster aesthetics.
Why do similar shades sometimes get merged?▾
K-means clustering collapses nearby colours into a single cluster centroid. If your image has many similar tones — for example, various shades of blue sky — they may appear as one swatch. Increasing the number of clusters (try 12) gives the algorithm more groups to work with and may separate the subtle shades.
Will the palette be the same every time I run it?▾
K-means uses random initialisation, so there can be minor variation between runs on the same image, especially for clusters of similar colour. For consistent results across sessions, save the exported palette JSON after the first run. The variation is typically cosmetic — the major dominant colours will always be found.
Can I extract colours from a transparent PNG?▾
Yes, but transparent pixels are typically ignored during clustering since they have no colour data. The palette will reflect the colours of opaque pixels only. This is the correct behaviour for icons and logos on transparent backgrounds.
Is my image uploaded?▾
No. The image is drawn onto an HTML Canvas element in your browser, pixels are read with getImageData, and all clustering runs in JavaScript in your tab. Nothing is sent to any server — the tool works entirely offline once the page has loaded.

Explore the category

Image to Text OCR Extract text from images using Tesseract.js OCR in your browser. Supports 10 languages. No uploads. Image Compressor Compress images with quality control Image Resizer Resize images to exact dimensions Image Mirror & Flip Flip images horizontally or vertically in your browser. No upload to server. Image Rotate Tool Rotate images 90° CW, 90° CCW, or 180° in your browser. Canvas-based, instant PNG download. Image Border & Frame Adder Add a custom border with color and rounded corners to any image. Browser-only, download as PNG.
Color Spaces Explained: RGB, HSL, CMYK, and HEX for Developers RGB and HEX are the same thing in different notations. HSL is much more intuitive for humans. CMYK lives in print. Understanding these disti Apr 2026 · 8 min Understanding Image Metadata: What EXIF Data Reveals About Your Photos Every photo your phone takes embeds GPS coordinates, device model, lens serial number, and timestamp — all invisible but readable by anyone Apr 2026 · 7 min Image Formats Explained: JPEG, PNG, WebP, AVIF, GIF Compared Choosing the wrong image format can double your page weight or break compatibility in older browsers. This guide cuts through the noise with Apr 2026 · 9 min

Glossary

K-means clustering
A machine learning algorithm that partitions a dataset into k groups (clusters) by iteratively assigning each data point to its nearest cluster centroid and recalculating centroids until convergence. In colour extraction, each pixel's RGB values are the data points, and the resulting centroids are the palette swatches.
Colour palette
A curated set of colours selected to work harmoniously together in a design. In branding, a palette typically includes a primary colour, secondary colour, accent colour, neutral background, and highlight — usually 5-8 values that cover all major UI and marketing use cases.
HEX / RGB / HSL
Three common representations of the same colour. HEX (#3B82F6) is used in CSS and design tools. RGB (59, 130, 246) separates red, green, and blue channels. HSL (217°, 91%, 60%) uses Hue, Saturation, and Lightness, which is more intuitive for adjusting colours programmatically.
Dominant colour
The colour (or colour cluster) that occupies the largest proportion of pixels in an image. Dominant colour is distinct from average colour — it represents the actual most-prevalent hue rather than a blended average that might not visually appear in the image at all.
Pixel frequency
The percentage of total image pixels that belong to a given colour cluster. A high-frequency swatch is visually dominant; a low-frequency swatch may be a rare but visually important accent. The extractor displays this as a percentage next to each swatch.
Tailwind config
A JavaScript configuration object in tailwind.config.js that defines custom colours available as utility classes in a Tailwind CSS project. Exporting a palette directly as a Tailwind config block lets you copy the extracted colours straight into your project's design tokens without manual entry.