Colour palette from an image
The colours a picture is made of, as hex, RGB and HSL, with how much of it each one covers. Copy one, or the lot as CSS or Tailwind.
- No uploads
- No sign-up
- No file limit
- No watermark
nothing was uploaded
How the colours are chosen
The same way a PNG is made smaller, which is not a coincidence: both questions are "which few colours describe this picture best". Every pixel is counted into a histogram, the histogram is cut into as many groups as you asked for by splitting the widest group at its middle, and then each group's colour is moved to the centre of what it actually serves until it stops moving. The result is the colours the picture is built from rather than the colours that happen to sit at a few sampled points.
Why the swatches are spread out
Ask a photograph for its five most common colours and you will often get five browns a hair apart. That is the correct answer to the question and a useless answer to the one you meant, so this asks for more candidates than it needs and then hands back the largest ones that are far enough from each other to be worth naming separately.
Far enough is measured in OKLab rather than in red, green and blue, because the same numeric gap in RGB can be an obvious difference in one part of the range and invisible in another. If the picture genuinely does not hold as many distinct colours as you asked for, you get fewer rather than near-duplicates padding the row.
Transparency is left out
A cutout's edge is a long ramp of half-transparent pixels, each one a mixture of the subject and whatever used to be behind it. Counting them would describe the edge, not the thing. So only pixels that are mostly opaque are counted, which means a transparent PNG from the background remover gives you the palette of the subject and nothing else.
What to paste it into
Hex for a design tool, CSS custom properties for a stylesheet, a Tailwind theme block for a Tailwind project, Sass variables for an older one, JSON for anything that reads data, and a PNG of the swatches for the chat message where somebody asks what the colours are. The variable name is yours to set, so what you paste does not need renaming afterwards.
Guides that go further
Part of cutouts for a purpose. What each format is, when to use it, and what to do when a file will not open.
- Which photo background for which use: shops, profiles, IDs and moreWhich photo background to use for Amazon, Etsy, eBay, Shopify, LinkedIn, passports, thumbnails and stickers, with each rule checked at its source.
- Why your PNG shows a black or white background (and how to keep it transparent)Why is my PNG not transparent? Why a transparent PNG turns black or white in viewers, WhatsApp, Instagram, email and Office, and how to keep the transparency.
- Alpha channel, in plain wordsWhat an alpha channel is: the fourth value in each pixel that sets how see-through it is. 8-bit alpha, soft edges, straight versus premultiplied, no maths.
- What is a transparent background, really?A transparent background is empty pixels, not white ones. How alpha works, why editors show a checkerboard, and which formats keep it: PNG, WebP, AVIF, not JPG.
Questions
How do I get a colour palette from an image?
Drop the picture on this page. The colours it is made of appear underneath with their hex, RGB and HSL values and how much of the picture each one is. Move the slider for more or fewer, click a swatch to copy its hex, or click anywhere on the picture itself to read that exact pixel.
How are the colours chosen?
By the same method that makes a PNG smaller: every pixel is counted into a histogram, the histogram is cut into as many groups as you asked for, and each group's average is a swatch. Then the answer is spread out, which matters more than it sounds. The most common colours in a photograph are often five browns a hair apart, so candidates are found first and the ones handed back are the biggest that are far enough from each other to be worth naming separately.
What does the percentage under each colour mean?
The share of the picture that colour describes: the proportion of pixels that are nearer to it than to any other swatch. The percentages add up to the whole picture, so a colour at 4 percent is a detail and one at 40 percent is the mood.
Can I get the palette as CSS or Tailwind?
Yes. The panel writes the palette as a plain hex list, CSS custom properties, a Tailwind theme block, Sass variables or JSON, with a name you choose for the variables, and copies it to the clipboard in one click. It also saves the palette as a PNG, which is the form a brief or a chat message wants.
What happens to transparent parts of the picture?
They are left out. A cutout's edge is a long ramp of half-transparent pixels, and counting them would describe the edge rather than the subject. Only pixels that are mostly opaque are counted, so a transparent PNG gives the palette of the thing in it.
Is my picture uploaded anywhere?
No. The picture is read and counted inside this browser tab, and there is no address on this site that could receive one. After the page has loaded once it works with no connection at all, which is the easiest way to prove it.
How many colours should I ask for?
Five or six for a brand palette, which is about as many as a person can hold in mind. Two or three if you want to know what a photo is really made of, and ten or twelve if you are matching an illustration with a lot going on. If the picture does not have that many distinct colours in it, fewer are returned rather than near-duplicates.
Why is the colour I picked different from the swatch next to it?
A swatch is an average of a whole region of the picture, so it is a colour the region is like rather than a colour any single pixel is. Clicking the picture gives you the exact pixel instead. Use the swatches for a palette and the picker when you are matching one specific thing.
Does it work on a screenshot or a logo?
Yes, and flat artwork is the easiest case: a logo with four colours in it comes back as those four exact colours, because there is nothing to average. Photographs are where the spreading step earns its keep.
Your files never leave this device
Most online converters upload every file to a server, convert it there and keep it for a while. Here your browser decodes and encodes the picture itself, so there is nowhere for the file to go. You can check it: load this page, switch the browser to offline, and convert a file. How to check a site is not uploading your photos.