Drop a file here or click to choose
Your file stays on your device. Processing happens locally in your browser.
What is Color Palette from Image?
Color Palette from Image finds the main colours of a photo, logo or screenshot in your browser. Pick 2 to 12 colours and how to order them; each swatch shows its HEX, RGB and HSL value with a copy button and how much of the picture it covers. Copy ready-made CSS variables with your own prefix, or download the palette as a PNG card, a .css file and JSON.
Extract a color palette from an image online. Get 2–12 dominant HEX, RGB and HSL swatches for brand kits and UI themes, copy them as CSS variables or download PNG, CSS or JSON — a free color picker from photo on Fah Swe Tools that runs on your device.
Key features
- 2–12 dominant colours by median cut
- Order by share, hue or lightness
- HEX, RGB and HSL with one-click copy
- CSS custom properties with your own prefix
- PNG swatch card, .css and .json downloads (or one ZIP)
- Transparent areas ignored
- Runs in your browser — nothing is uploaded
Popular uses
- Build a brand palette from a logo
- Match a website theme to a hero photo
- Find the exact HEX code of a colour in a picture
Supported formats
Input: JPG, PNG, WebP, AVIF, HEIC/HEIF, GIF, BMP, TIFF, SVG, ICO. Output: PNG swatch card, CSS and JSON.
Troubleshooting
- A colour I can see is missing Small areas can merge with similar colours. Increase the number of colours, or crop to the area you care about first.
Also known as: Color Picker from Image, Image Color Extractor, Palette Generator, HEX Color from Image.
How it works
- Choose a picture — photo, logo or screenshot. It stays on your device.
- Pick how many colours (2–12) and how to order them.
- Copy any value, copy the CSS variables, or download the palette as PNG, CSS or JSON.
FAQ
How are the colours found?
Median cut on a small copy of the picture; each swatch shows how much of the picture it covers. Transparent areas are ignored.
Can I use the colours in my CSS?
Yes — copy the :root custom properties or download the .css file. Pick your own variable prefix.
Is my picture uploaded?
No. The colours are worked out in your browser.
How many colours should I pick?
5–6 make a practical palette. Use more for detailed photos, fewer for logos.