Color palette from image
Drop in a photo and get its dominant colours as a ready-to-use palette — sized by coverage and exportable for CSS, Tailwind, Figma or print.
Your palette
Name this palette & suggest how to use it
An AI reads the colours above and suggests names, which one to use for background, text and accents, and what mood the palette sets.
Sends only the HEX codes and your note — never the image. AI output can be wrong; check contrast with the numbers above.
Getting a better palette
- Crop first. The algorithm counts every pixel. If half the image is background, half the palette will be too.
- 5–6 colours is the sweet spot for a UI: background, surface, text, primary, accent, and one spare.
- Small but vivid details (a red door in a grey street) can be under-represented because they cover few pixels. Raise the colour count or use the single-pixel picker to grab them directly.
- Check contrast before using two palette colours as text on background. WCAG 2.2 asks for 4.5:1 for body text.
Export formats
CSS custom properties (--color-1…), SCSS variables, a Tailwind theme.extend.colors block, JSON with HEX, RGB, HSL and coverage share, or a PNG swatch card you can drop into a moodboard.
Questions people ask
How do I extract a colour palette from a photo?
Load the photo, choose how many colours you want (3–10) and the palette appears instantly. Each swatch is sized by how much of the image it covers. Copy it as HEX, CSS variables, SCSS, a Tailwind scale, JSON, or download it as a PNG.
Why does the palette change when I change the number of colours?
k-means splits the image into exactly k groups. With 3 colours a sky and a sea may merge into one blue; with 8 they separate. Pick the count that matches how many roles your design needs.
Why is the most dominant colour a boring grey or white?
Because it really covers most of the image — a white studio background, for example. Turn on “Ignore near-white & near-black” to focus on the subject’s colours.
Is the palette the same every time?
Yes. The clustering uses a fixed seed, so the same image and settings always produce the same palette.
Can I make a colour scheme for a website from a photo?
Yes. Extract 5–6 colours, use the lightest as a background, the darkest as text, and one saturated colour as your accent. The AI suggestions below can propose roles and a name for the scheme.