Color Palette From Image
Extract the dominant colors of a photo with k-means clustering, see what percentage each covers, and copy HEX codes, CSS variables or JSON.
Runs entirely in your browser. Your data is never uploaded.
What is Image Color Palette?
This tool finds the main colors of an image and shows them as a palette, sorted by how much of the image each color covers. Choose between 2 and 12 colors and copy them as HEX codes, CSS custom properties or JSON with RGB values and percentages.
How to use Image Color Palette
- Drop, choose or paste an image.
- Select the Number of colors.
- Read the palette bar and the list with HEX, RGB and percentage for each color.
- Copy a single HEX code, or use Copy as CSS variables, Copy as JSON or Copy HEX list.
Example
40×20 image split into red, green, blue and white quadrants, 4 colors
#FF0000 25%, #00FF00 25%, #0000FF 25%, #FFFFFF 25%
When to use Image Color Palette
Use it to build a color scheme from a photo or artwork, match a website theme to a hero image, or analyze a brand’s imagery. Cluster averages can differ slightly from any single pixel; to read one exact pixel color, use the Image Color Picker.
How Image Color Palette works
The image is downscaled to at most 256 px on its longest side and fully transparent pixels are ignored. The remaining pixels are grouped with k-means clustering in RGB space: initial centers are chosen deterministically (the pixel closest to the mean color, then repeatedly the pixel farthest from all chosen centers), and up to 12 iterations reassign pixels and move each center to the average of its cluster. Each palette color is a cluster average; its percentage is the share of pixels in that cluster.
Common Use Cases
- Creating a website color theme from a header photo.
- Pulling brand colors from a logo or product shot.
- Generating CSS variables for a design system mood board.
- Comparing the color balance of different images.
Security Note
Images are decoded, processed and encoded locally in your browser with the Canvas API. Nothing is uploaded to a server.
FAQs
Why are the colors slightly different from the image?
Each palette color is the average of a group of similar pixels, so it may not match any single pixel exactly, especially in photos with gradients.
Will I get the same palette every time?
Yes. The algorithm uses deterministic seeding, so the same image and color count always produce the same palette.
Are transparent pixels counted?
No. Pixels with less than 50% opacity are ignored, so a logo on a transparent background gives the logo colors only.