Color Palette Generator from Image
Drop a photo, screenshot or logo and get its dominant colours with their share of the image. Pick exact pixels with the eyedropper, export the palette for code and check which colour pairs are readable.
Need an interface that looks right and reads well?
We design and build websites and apps with a consistent colour system: brand palette, accessible contrast, design tokens shared by designers and developers. Tell us about your project and get an estimate.
Thank you! We will reply within one business day.
TL;DR: upload any image and the tool finds its main colours with k-means clustering, shows how much of the picture each colour covers and lets you pick exact pixels with an eyedropper. Export the palette as HEX, RGB, HSL, CSS variables, a Tailwind config or JSON, then check the contrast of any two colours against WCAG 2.2. Everything runs in your browser, the image is not uploaded.
How to get a colour palette from an image
- Add an image. Drag a JPG, PNG, WebP, GIF or AVIF onto the page, choose it from your device or paste a screenshot with Ctrl+V. No image at hand? Press “Try a sample photo”.
- Choose the number of colours. Five or six colours give a compact brand palette, eight to ten keep secondary tones and accents. The list is sorted by share of the image; switch to “light to dark” to see it as a scale.
- Pick exact colours. Click anywhere on the image to read the pixel under the cursor and add it to the palette. From the keyboard, focus the image, move the marker with the arrow keys and press Enter.
- Check contrast. The checker below shows which pairs from the palette pass WCAG AA for body text. Click a pair or set any text and background colour.
- Export. Choose HEX, RGB, HSL, CSS, Tailwind v3, Tailwind v4 or JSON, then copy the code or download it as a file.
How the colours are found
The image is scaled down to 256 pixels on the long side, then colours are grouped in the CIELAB colour space, where distances match how different two colours look to a person. The tool runs k-means clustering with k-means++ start points and a fixed random seed. That is why the same image always gives the same palette, and why one large background colour does not swallow small but bright accents. The value shown for each colour is the average of the real pixels in its group, not a rounded “nearest” colour.
| Setting | When to use it |
|---|---|
| 5–6 colours | Brand palette from a logo or a key photo, mood boards, presentation themes |
| 7–8 colours | Website and app themes: background, surfaces, text, primary and secondary accents |
| 9–10 colours | Illustrations and photos with many details, gradient stops, data visualisation |
| Eyedropper | Exact colour of a button, logo or text in a screenshot |
Export formats for designers and developers
HEX, RGB and HSL lists paste straight into Figma, Sketch or any colour field. CSS gives custom properties in :root, ready for a design-token file. Tailwind v3 adds a palette colour group to tailwind.config.js, so you can write bg-palette-1. Tailwind v4 uses the new @theme block with --color-palette-1 variables. JSON keeps HEX, RGB, HSL and each colour’s share of the image for scripts and documentation.
Contrast checker by WCAG 2.2
Colour contrast is the ratio of the relative luminance of two colours, from 1:1 to 21:1. WCAG 2.2 success criterion 1.4.3 (level AA) asks for at least 4.5:1 for body text and 3:1 for large text, which means 24 px regular or about 18.7 px bold. Level AAA (criterion 1.4.6) raises the bar to 7:1 and 4.5:1. Criterion 1.4.11 asks for 3:1 for icons, input borders and other interface elements. The checker uses the exact formula from the standard and does not round the ratio up, so 4.49:1 is shown as a fail.
Brand palettes rarely pass these checks out of the box: light accents on white and mid-tone blues with white text are the usual problems. If you are building a design system or redesigning a product, our team can help you with website and web app design and development. For a quick check of existing pages, try the accessibility scan.
FAQ
How do I get the colour palette of an image?
Upload or paste the image on this page. The tool finds 5 to 10 dominant colours, shows their HEX codes and their share of the picture. Click any colour to copy its HEX code or export the whole palette as CSS, Tailwind or JSON.
How do I find the HEX code of a colour in a picture?
Click the spot in the image with the eyedropper. The tool shows the HEX, RGB and HSL values of that exact pixel, and you can copy the code or add the colour to the palette. On a phone, tap the image; from a keyboard, move the marker with the arrow keys and press Enter.
Is my image uploaded to a server?
No. The image is drawn on a canvas in your browser and the colours are calculated in a Web Worker on your device. Nothing is sent to our server, and the image is not saved anywhere after you close the page.
Why does the palette stay the same every time?
The clustering uses a fixed random seed, so the same image and the same number of colours always return the same palette. This makes it safe to share a palette with your team or recreate it later.
What contrast ratio do I need for text?
For WCAG 2.2 level AA: at least 4.5:1 for regular text and 3:1 for large text (24 px, or about 18.7 px bold). For level AAA: 7:1 and 4.5:1. Icons, input borders and focus indicators need at least 3:1 against their background.
Can I use the palette in Tailwind CSS?
Yes. Choose “Tailwind v3” to get a colour group for tailwind.config.js, or “Tailwind v4” to get an @theme block with --color-palette-* variables. After that you can use classes such as bg-palette-1 and text-palette-2.
Which image formats are supported?
JPG, PNG, WebP, GIF, AVIF and BMP, up to 50 MB. Transparent pixels are ignored, so a logo on a transparent background gives the colours of the logo only. To get colours from an SVG, first convert it to PNG.