🎨 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.

Copied!

What is Color Palette Generator?

Color Palette Generator is a free online utility designed to help developers, designers, and technical professionals work more efficiently. This tool runs entirely in your browser — no installation required, no data sent to any server.

How to Use Color Palette Generator

Paste or type your input in the editor area above.
Click the action button to process your content.
Copy the output or download the result.

Key Features

100% Free — No registration or payment required.
Client-side Processing — Your data never leaves your browser.
Instant Results — Get output in milliseconds.
No Installation — Works directly in your web browser.
Mobile Friendly — Works on phones, tablets, and desktops.

Who Uses Color Palette Generator?

This tool is widely used by web developers, software engineers, data analysts, students, and IT professionals who need a quick and reliable way to process data without setting up complex software environments.

Frequently Asked Questions

Is Color Palette Generator free to use?

Yes, Color Palette Generator is completely free. There are no hidden charges, no subscription fees, and no account required.

Is my data safe when using Color Palette Generator?

Absolutely. All processing happens locally in your browser. No data is uploaded to any server, making it completely private and secure.

Can I use Color Palette Generator on mobile devices?

Yes, Color Palette Generator is fully responsive and works on all modern browsers and devices including smartphones and tablets.

Do I need to install anything to use Color Palette Generator?

No installation is required. Simply open the page in your browser and start using it immediately.

How accurate is Color Palette Generator?

Color Palette Generator uses industry-standard algorithms to ensure accurate and reliable results every time.