Palette from an image
The colors of an image
Image
or drop it here, or paste it (Ctrl+V)
The image stays in your browser: it is never uploaded.
Palette
Add an image to extract its dominant colors.
About this tool
This tool finds the dominant colors of an image: a product photo to style a page around, a logo to build a brand palette from, a screenshot whose mood you want to reuse. You choose an image, drop it or paste it with Ctrl+V, then set the number of colors between 2 and 12. Each color is shown with its share of the image and its hex, rgb and oklch values.
The image is first scaled down to at most 160 px on its longest side, then its colors are grouped with k-means in the OKLab color space, which is close to human perception. Nearly transparent pixels are ignored. The palette exports as CSS variables under :root, as a Tailwind v4 @theme block or as JSON, with hex or oklch values and a palette name of your choice.
How to use it
- Click "Choose an image", drop a file onto the area, or paste one with Ctrl+V.
- Set the "Number of colors" and enter a "Palette name".
- Click a swatch or a value in the "Palette" to copy it.
- Under "Export", pick the "Exported values" (hex or oklch), open the "CSS variables", "Tailwind v4" or "JSON" tab, and click "Copy".
Frequently asked questions
Is my image uploaded to a server?
No. The image is drawn on a canvas in your browser and its pixels are analyzed there. It is never uploaded and not stored either; only the number of colors, the palette name and the export format are remembered.
How are the dominant colors calculated?
Similar pixels are first grouped together, then a weighted k-means algorithm finds the requested number of colors in the OKLab space. The percentage shown is the share of opaque pixels assigned to each color, sorted from most to least common.
What does the Tailwind export look like?
It is a Tailwind CSS v4 @theme block with one variable per color, such as --color-name-1 and --color-name-2. You can then use classes like bg-name-1 in your components. The CSS export produces the same variables under :root, without the color prefix.
Why are no colors showing up?
Pixels with less than 50% opacity are ignored. If the whole image is transparent, the tool has no color to extract and tells you so. A file that is not an image, or that the browser cannot decode, is rejected as well.