Color Palette From Image – HEX Code Generator
Get a color palette from image files in one click: drop a photo, a logo or a screenshot and ProMedia picks its 3 to 12 most important colours, ranked by how much of the picture they cover. Copy them as HEX codes, rgb() values or ready-made CSS variables, and download a swatch card. The image is analysed on your device and never uploaded.
- Runs on your device
- Canvas · GPU
- Works offline
Updated
Drop your images here
How to get a color palette from an image
Step 1: Drop one or more images on the box above. Each gets its own palette.
Step 2: Set Colours (6 by default) and choose Copy as: HEX, RGB or CSS variables.
Step 3: Press Extract. The palette appears as a swatch card and as text.
Step 4: Click Copy on the text to paste the codes anywhere, or download the PNG swatch card.
Good to know
Formats
Batch-friendly: add many files and they are processed one after another — if one fails, the rest still finish.
How it runs
- GPU canvas
- Pixels are drawn and composited with the GPU-accelerated canvas.
HEX, RGB or CSS variables: which format to copy
All three describe the same colours. HEX is the shortest and what most design tools accept; rgb() is easier to tweak by hand; CSS variables drop straight into a stylesheet with names and shares as comments.
| Copy as | Example line | Paste it into |
|---|---|---|
| HEX | #1E3A5F | Figma, Canva, Photoshop, PowerPoint colour pickers |
| RGB | rgb(30, 58, 95) | CSS, code, tools that ask for red, green and blue |
| CSS variables | --color-1: #1e3a5f; /* dark blue, 34% */ | A website’s stylesheet, inside a :root { } block |
What is a color palette?
A color palette is a small set of colours chosen to work together, usually a few dominant ones for backgrounds and text plus an accent for highlights. Pulling one from a photo is a quick way to match a brand, a moodboard or a slide deck to a picture you already like.
How the colours are chosen
- Grouped by how they look to people. Pixels are clustered in the Oklab colour space, which treats colours that look alike as close, so you do not get three nearly identical blues.
- Ranked by area. The groups that stand for the most pixels come first, and each colour’s share is shown on the card.
- One vivid accent is kept. With 4 or more colours, a bright colour that covers at least 0.8% of the image, such as a red umbrella in a grey street, gets a place even if it is small.
- Transparent pixels are ignored, so a logo on a transparent PNG gives the logo’s colours, not the background.
- Same image, same palette. The result is repeatable, so you can extract colors from image files again later and get identical codes.
Get the hex code from a picture
This tool finds the main colours of the whole image. If you need the exact HEX of one tiny spot, such as a logo’s border, set Colours higher (up to 12) so smaller areas get their own swatch, or crop the image to that area first with the image cropper and extract again.
Photos have noise and gradients, so each swatch is the average of a group of similar pixels, not one pixel. That is usually what you want for a palette.
Use the palette in Figma, Canva, CSS or Tailwind
Figma and Canva
Copy as HEX, then paste each code into the colour picker, or add them to Canva’s brand kit or Figma’s local styles.
CSS
Copy as CSS variables and paste the block into your stylesheet; use them as var(--color-1).
Tailwind
Copy as HEX and add the codes under theme.extend.colors in your Tailwind config.
Tips & troubleshooting
Building a brand palette from a logo? Remove its background first with remove background so only the logo’s colours count.
Busy photo giving muddy colours? Crop to the part you care about, then extract.
Want the photo itself to look different instead? Try photo filters to warm, cool or fade it.
Need a vector logo in those colours? Trace it with PNG to SVG.
Color Palette Extractor FAQ
How do I extract colors from an image?
Drop the image here, choose how many colours you want and press Extract. You get the dominant colours as HEX, RGB or CSS variables plus a swatch card showing each colour’s share.
Can I pick the colour of one exact pixel?
Not with this tool; it builds a palette from the whole image. Raise the number of colours or crop to the area you care about to get close, or use an eyedropper in an image editor for a single pixel.
Why does my palette have fewer obvious colours than the image?
Similar shades are merged so the palette stays distinct, and small areas give way to large ones. Increase Colours to 10 or 12 to see more of the minor colours.
Does it work with GIFs and transparent PNGs?
Yes. Transparent areas are skipped, so only visible colours count. A fully transparent image has no colours and returns an error instead of a blank palette.
Is your image uploaded anywhere?
No. Your image is processed by your own browser on your own device. There is no server that receives files, so nothing is uploaded, stored or shared. You can even switch to airplane mode once the page has loaded.