Color Palette From Image

Load a photo and get its main colours, sorted by how much of the image they cover. Choose 3 to 8 colours, check which text colour reads best on each, then export the palette as CSS variables, a Tailwind config snippet, JSON or a PNG swatch strip. Your image is read inside your browser with a canvas. It is never uploaded to We.Inc or anyone else.

How it works

  1. Choose, drop or paste an image. It is shrunk to a small copy in your browser so the maths runs quickly.
  2. The tool groups similar pixels with k-means clustering. It starts from evenly spread colours, so the same image always gives the same palette.
  3. Colours are sorted by prominence, the share of pixels closest to each colour, and shown with that percentage.
  4. Each colour is checked against white and black text with the WCAG contrast formula, and the better text colour is suggested.
  5. Copy or download the palette as CSS variables, a Tailwind colours block, JSON or a PNG strip, and see it on a mock website section.

Worked example: a florist photo

Load a photo of a bouquet on a wooden table with 5 colours. You might get a warm brown for the table (about 38%), a pale cream for the wall (25%), a leaf green (17%), a deep pink (12%) and a soft peach (8%).

For a website, the cream becomes the page background with black text, the green works for headings, and the deep pink is the button colour with white text if it reaches at least 4.5:1. The brown, despite being the biggest share, is best kept for a footer or not used at all.

Turning a palette into CSS

CSS custom properties let you define a colour once and reuse it everywhere, for example --palette-1: #2F5D3A; and then background: var(--palette-1);. Changing the palette later means editing one line.

The JSON export includes the HEX value, prominence and suggested text colour for each swatch, which is useful if you store design tokens in code.

Tips

Frequently asked questions

How are the colours chosen?

The image is reduced to a few thousand pixels and grouped with k-means clustering, a standard method that finds colour centres which best represent the pixels. The starting colours are picked in a fixed way, so the result is repeatable.

What do the percentages mean?

Each percentage is the share of sampled pixels whose nearest palette colour is that one. Fully transparent pixels are ignored.

Is my image uploaded?

No. Everything happens in a canvas in your browser. Nothing is sent to We.Inc or anyone else.

How do I use the Tailwind export?

Paste the snippet into the theme.extend.colors section of your tailwind.config file. You can then write classes like bg-palette-1 or text-palette-3.

Can We.Inc build a site in this palette?

You can send a website brief that lists the palette HEX codes to the We.Inc builder, and the design is prompted to use them. That uses AI building, which starts on the Starter plan at $20 a month. It does not recolour an existing template with one click.

Why did two very similar colours appear?

Images with one large area of gradual shading can split into neighbouring shades. Lower the number of colours, or crop the image to include more variety.

Related: Image Color Picker, HEX Color Picker, Color Contrast Checker, Website builder for florists, Website builder.

Turn this result into your website or see the We.Inc website builder. The free plan gives you up to 3 template sites on a we.inc address, with no AI credits and no custom domain. Paid plans are Starter at $20 a month, Pro at $50 and Max at $99. See pricing.

More in Free Tools

We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.

Product

Who It's For

Features

Resources

Company

View Sitemap