🎨 Design ✅ 100% Free ⚡ Instant

Image Color Tool

Two tools in one — automatically extract a dominant colour palette from any image using k-means clustering, or switch to Pixel Inspector mode to click any pixel and get its exact colour values. Export to CSS, SCSS, or Tailwind.

Choose mode

Upload image

🖼️

Drop an image here, or click to browse

Supports JPEG, PNG, WEBP, GIF — Max 15 MB

JPEGPNG WEBPGIF

Number of colours

Sort by

Running k-means clustering…

Sampling pixels and grouping colours

⚠️

Extraction Failed

An error occurred.

👆 Click any pixel on the image above to pick its colour

Picked

No colours yet

🎯 Current Colour

Pick a pixel or extract a palette

📊 Palette Stats

—

Colours

—

Sampled

—

Width px

—

Height px

🔒

Palette extraction runs server-side but never stores your image. Pixel inspection is entirely client-side — your image never leaves your browser.

💡 How to use

🎨

Palette mode: Upload any photo and click "Extract". The k-means algorithm groups similar colours and returns the most dominant ones.

🔍

Pixel mode: Upload, then click anywhere on the image to get the exact hex, RGB, and HSL of that pixel. A magnifier loupe helps with precision.

📋

Click any value to copy it instantly. Export the full palette as CSS custom properties, SCSS variables, or a Tailwind config snippet.

🔗 Related Tools

Two Colour Tools in One

This tool combines two complementary workflows that designers reach for constantly. The Palette Extractor analyses your entire image and uses k-means clustering — the same algorithm used in professional design tools like Adobe Color — to find the most statistically dominant colours. The Pixel Inspector lets you click any exact point on the image and read its precise colour values, with a magnifier loupe for pixel-perfect accuracy.

Frequently Asked Questions

K-means is an algorithm that groups data points into k clusters based on similarity. For colour extraction, it samples pixels from your image and iteratively assigns each pixel to the nearest colour centroid, then recalculates centroids until the groupings stabilise. The result is the set of colours that most accurately represent the image's colour distribution — not just the most frequent individual pixel colours.

K-means finds mathematically dominant colours, which may differ from colours that are visually prominent. A large sky area will dominate even if the subject has more interesting colours. Try increasing the colour count to capture more subtle palette members. Also, very similar adjacent colours (like slight skin tone variations) get merged into one centroid.

Yes. The image is drawn to an HTML5 Canvas at its original pixel dimensions, then scaled visually for display. When you click, the tool maps your cursor position back to the full-resolution canvas coordinates and reads the exact pixel from the original image data. The magnifier loupe shows a 8× zoom of the original pixels around your cursor.

The JSON export gives you a structured colour list you can use with Figma plugins like "Import Colors" or "Palette". The CSS custom properties export works directly with any CSS-in-JS setup. For Tailwind, paste the output into your tailwind.config.js colors section. In Adobe XD, you can add colours manually from the hex values shown on each swatch.