Color Palette from Image

Pull a palette from a picture

A good photo or logo often contains the exact colours a brand or page should use. This tool finds them for you.

How to use it

1. Drop an image onto the box. Photos, product shots, logos, paintings and screenshots all work.
2. Slide the number of colours between 2 and 12. Four to six usually gives a useful palette; more shows subtle shades.
3. Read the swatches. Each one shows its HEX code, the share of the image it covers, and its RGB and HSL values. Click a swatch to copy the HEX, or click the RGB or HSL line to copy that format.
4. Click the picture itself to pick an exact pixel with the eyedropper.
5. Choose an export format and copy or download it.

What the exports look like

• CSS variables give you a root block with custom properties named by your prefix, for example --brand-1.
• SCSS writes one variable per colour.
• Tailwind config produces a colors object ready to paste into theme.extend.colors.
• JSON includes HEX, RGB, HSL and coverage, handy for design tokens.

Building a usable brand palette

Dominant colours are a starting point, not a finished system. Some tips:

• Pick one main colour, one accent and a few neutrals from the list.
• Check text contrast. The swatch label automatically switches between black and white to show which reads better, and a contrast checker on this site can test exact pairs.
• Add lighter and darker shades of your main colour for hover states and backgrounds.
• Large flat areas such as sky or walls often dominate the list. Raise the colour count to reach the smaller, more interesting accents.

Under the hood

The image is scaled to about 200 pixels on its longest side, fully transparent pixels are ignored, and up to 12,000 samples are clustered using k-means with careful seeding, so the result is stable and fast. Everything runs locally in your browser.