Color Palette from Image: what it does
Add a photo, a logo, a screenshot or a product shot and get its main colours in a second: 4 to 10 swatches, most common first, each with its HEX, RGB and HSL code and how much of the image it covers. Every swatch also shows whether black or white text reads better on it, with the contrast ratio, so you can turn a photo’s mood into on-brand posts, slides and thumbnails. Click anywhere on the image to add an exact colour, then copy the whole palette as a list, CSS variables, JSON or Tailwind colours, or download it as an image. The photo is analysed in your browser and never uploaded.
How to use it
- Drop an image into the box, paste it with Ctrl+V, or tap to choose one from your phone.
- Read the main colours, most common first, with their HEX, RGB and HSL codes and text contrast. Change the number of colours if you like.
- Click or tap the image to add exact colours. In Chrome or Edge on a computer, “Pick from screen” picks from anywhere on your screen.
- Click a swatch to copy its code, copy the whole palette as CSS, JSON or Tailwind, or download it as a PNG.
Tips
- For a brand palette from a logo, use the logo on a plain background and choose 4 or 5 colours; the background colour will be one of them, which you can ignore.
- Photos give softer, mixed colours. For a clean palette, try a few counts: fewer colours give the broad mood, more colours pick out accents.
- The contrast number on each swatch follows WCAG: 4.5:1 or more is comfortable for normal text, 3:1 is the minimum for large headlines.
- Click a small detail on the image (a logo dot, a button) to add its exact colour, then copy all colours together as CSS variables.
- Use the palette PNG as a mood board in your design app, or share it with a client for approval.
Frequently asked questions
How are the main colours found?
The image is scaled down and its pixels are grouped by colour similarity (k-means clustering in the Oklab colour space, which matches how people see colour differences). Each group becomes one swatch, and the percentage is how much of the image it covers. The same image always gives the same palette.
Is my image uploaded?
No. The colours are worked out in your browser. You can check: once the page has loaded, switch on airplane mode and add a photo. It still works.
Why is the palette colour slightly different from a pixel in the photo?
A palette colour is the average of many similar pixels, so it represents an area rather than a single pixel. For one exact pixel, click the image: picked colours are taken straight from the image.
Which formats can I copy?
Click a swatch to copy its HEX code, or its RGB or HSL line. “Copy palette” copies all colours as a HEX list, CSS custom properties, a JSON array or a Tailwind colours block.
Can I use it for transparent PNG logos?
Yes. Transparent pixels are ignored, so only the logo’s own colours are counted.