Free
Favicon Generator
Make a complete favicon set from a logo, letters or an emoji: ICO, PNG, Apple touch icon, Android icons and HTML.
Color Palette from Image
Pull the main colours out of any photo, logo or screenshot. Copy HEX, RGB or HSL codes, pick exact colours with a click, and export CSS, Tailwind or JSON.
Add an image
Drop an image here
or choose a file · you can also paste with Ctrl + V
JPG · PNG · WEBP · GIF · AVIF · SVG
Your palette
The main colours of your image will appear here, with HEX, RGB and HSL codes ready to copy.
Click any colour or code to copy it.
Picked from the image
Export
About the tool
How the Color Palette from Image works
Color Palette from Image finds the colours that make up a picture. Drop in a photo, logo, product shot or screenshot and it shows its main colours as swatches, sized by how much of the image each one covers, with HEX, RGB and HSL codes you can copy with a click.
It groups similar pixels together in a colour space that matches how people see colour, so the palette reflects what stands out to the eye rather than tiny differences in shading. You can choose how many colours to find and sort them by how often they appear, by hue or from light to dark.
Need one particular shade? Click on the image to pick that exact pixel. Then export the palette as CSS custom properties, SCSS variables, a Tailwind colour config or JSON, or download it as a PNG to share with your team.
Frequently asked questions
How does the tool choose the colours?
It shrinks the image, then groups its pixels into clusters of similar colour (k-means clustering in the Lab colour space, which matches human colour perception). Each swatch is the average colour of one cluster, and its width shows how much of the image it covers.
Why doesn't the palette include a small bright detail?
Small areas cover only a few pixels, so they can be merged into a nearby larger colour. Choose more colours, or click on the detail in the image to pick its exact colour.
Can I use the colours in Tailwind CSS?
Yes. Choose the Tailwind export to get a colors block for tailwind.config.js. CSS variables, SCSS variables and JSON are also available.
Is my image uploaded?
No. The image is read and analysed by your browser on your own device and never sent anywhere.
What do AA and AA large mean?
They show whether the better of white or black text on that colour meets the WCAG contrast guideline: AA (4.5:1) is fine for normal text, and AA large (3:1) only for big or bold text.
More free AI tools
- Developer
- ImageFree
SVG to PNG, JPG & WEBP Converter
Paste SVG code or open an .svg file and convert it to a sharp PNG, JPG, WEBP or ICO image at any size, with a transparent or coloured background.
- DesignFree
Logo to Brand Style Guide Generator
Upload a logo to get brand colour roles, tints and shades, contrast checks, a font pairing idea, logo usage rules and CSS or Tailwind tokens.