Color palette from image
Drop a photo, artwork or screenshot and get its main colors as a palette: 4 to 10 swatches, each with its HEX code and how much of the image it covers. Copy them as CSS variables or a plain HEX list, or save the palette as a PNG. Every swatch is a color that really appears in the image, not a blend. It all runs in your browser.
Click or tap to pick. On a touch screen, drag to aim and lift your finger to pick.
Picked color
Click anywhere on the image to read its color code.
- HEX
- RGB
- HSL
Recent picks
Main colors
How it works
- Drop an image, choose a file or paste a screenshot with Ctrl+V.
- Choose how many colors you want: 4, 6, 8 or 10.
- Click a swatch to copy its HEX code, or copy the whole palette as CSS or a list, or download it as PNG.
FAQ
How are the colors chosen?
A small copy of the image is grouped into similar colors (median cut, refined with k-means). For each group the tool shows the closest real pixel color and sorts the groups by how much of the image they cover.
Why is a small accent color missing?
The palette shows the colors that cover the most area, and specks under about 0.4 % are left out. Try 8 or 10 colors, or click the accent in the image to pick it directly.
How do I use the palette in CSS, Figma or Canva?
"Copy as CSS" gives you custom properties (--color-1, --color-2 …) to paste into a stylesheet. "Copy HEX list" gives one code per line, ready to paste into Figma, Canva or any color field. The PNG is handy for mood boards.
Does it work with logos and transparent PNGs?
Yes. Transparent pixels are ignored, and flat logo colors come out exact, because each swatch is snapped to a real pixel of the image.
Is my image uploaded?
No. The palette is calculated in your browser. Your image is never sent to a server.