Colour palette from image
Drop an image and see its main colours, ready to copy. The picture never leaves your browser.
Drop an image here
Or paste one with Ctrl+V. PNG, JPG, WebP, GIF, AVIF or BMP, up to 25 MB.
Palette ideas
Each page below starts the tool with the colour count and export format that suit the job, and answers the questions people ask about it.
- Website colour scheme from an imagePalette for a website colour scheme
- Find the colours of a logoPalette for a logo colours
- Build a brand palette from an imagePalette for a brand palette
- Tailwind colour palette from an imagePalette for a Tailwind colour palette
- CSS colour variables from an imagePalette for a CSS colour variables
- SCSS colour variables from an imagePalette for a SCSS colour variables
- Design tokens (JSON) from an imagePalette for a design tokens in JSON
- Product photo colours from an imagePalette for a product photo colours
- Colour palette from a photoPalette for a photo colour palette
- Moodboard colours from an imagePalette for a moodboard colours
- Presentation colours from an imagePalette for a presentation colours
- Social media colours from an imagePalette for a social media colours
- App UI colours from an imagePalette for a app UI colours
- Illustration colours from an imagePalette for a illustration colours
How it works
Add an image
Drop a picture on the page, paste it with Ctrl+V, or browse for a file. A logo, a photo, a screenshot or a product shot all work.
Choose how many colours
Pick 4, 6, 8 or 10. The most common colours come first, with the share of the image each one covers, so you can see which colour leads.
Pick, scale and copy
Click the image to pick any exact pixel with a magnifier, open an eleven-step tonal scale for any colour, and show the colours as HEX, RGB, HSL or OKLCH.
Export it
Copy the palette as CSS variables, a Tailwind theme, SCSS, JSON or plain text, download it as a file, or save a PNG strip of the colours.
Questions about colour palettes
Is my image uploaded anywhere?
No. The image is read and analysed by your own browser, in a background worker, and nothing is sent to a server. The page keeps working if you go offline after it has loaded.
How are the colours chosen?
The image is shrunk to a small sample, then split into groups of similar colours using the median cut method in the Lab colour space, which follows how people see differences. Each group becomes one colour, groups that look almost the same are merged, and specks under 1% of the image, such as blurred edges, are folded into the nearest colour.
Why do I sometimes get fewer colours than I asked for?
Flat images such as logos have only a few real colours. Instead of inventing near-duplicates, the tool merges colours that are hard to tell apart, so you may see 3 colours when you asked for 6.
What happens to transparent areas?
Fully or mostly transparent pixels are ignored, so a logo on a see-through background gives the colours of the logo, not of the empty space. Shares are worked out from the visible pixels only.
How do I pick one exact pixel?
Click or tap the image. A magnifier shows the pixels around your pointer, and the one in the middle is the one you get. With the keyboard, focus the image, use the arrow keys (Shift for bigger steps) and press Enter. Chrome and Edge also offer a button to pick any colour on your screen.
What is a tonal scale?
It is the same colour in eleven strengths, from 50 (very light) to 950 (very dark), with the hue kept steady. Your own colour is kept exactly at the step closest to its lightness, and the other steps are built around it. Interfaces use scales for backgrounds, borders, buttons and text.
Which export formats are there?
CSS custom properties, a Tailwind @theme block, SCSS variables, JSON, and plain text, each with or without the tonal scales, plus a PNG strip of the colours. You can copy the code or download it as a file.
Which image files work?
PNG, JPG, WebP, GIF, AVIF and BMP, up to 25 MB. Photos taken on a phone are turned the right way up automatically. SVG files are not supported here.
More free tools
View all toolsAbout these tools
Small tools, made by Sifency
Sifency is a small studio that builds themes, plugins and web apps. These tools began as the things we kept needing ourselves, so we tidied them up and left them open for everyone. There is nothing to sign up for.