Is my image uploaded to a server?

No. The image is processed entirely in your browser using the HTML5 Canvas API. Nothing is sent over the network.

How does k-means color extraction work?

The algorithm samples pixels from the image, groups them into k clusters by color similarity, and returns the average color of each cluster as a palette swatch.

What is the difference between Dominant, Vibrant, and Muted?

Dominant returns the raw cluster centers. Vibrant filters for high-saturation colors. Muted filters for low-saturation, subdued tones.

What image formats are supported?

Any format your browser can display: JPEG, PNG, WebP, GIF (first frame), SVG, and BMP.

How do I use the CSS export?

Click Export CSS to get :root { --color-1: #hex; ... } variables you can paste directly into your stylesheet.

Design Free No signup

Color Palette from Image

Extract a dominant color palette from any image using k-means clustering.

Loading tool…

About this tool

Upload any image and extract its 5–10 most dominant colors using canvas pixel sampling combined with a k-means clustering algorithm — all running in your browser, no uploads to a server. Three palette styles let you filter results: Dominant (raw cluster centers), Vibrant (high-saturation colors), and Muted (low-saturation, desaturated tones). Each swatch shows the color's hex, RGB, and HSL values with a one-click copy button. Export the full palette as CSS custom properties or as a JSON array for use in design systems and code.

How to use

1 Click Upload Image or drag and drop an image file.
2 Choose the number of colors (5–10) and palette style.
3 Click Extract Palette.
4 Click any swatch to copy its hex value.
5 Use Export CSS or Export JSON to download the full palette.

Frequently Asked Questions

Related tools

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL, HSV, and CMYK — with live preview.