Color Palette Extractor
Click to upload an image or drag and drop
JPG, PNG, or WebP. Photos, logos, and screenshots all work.
Designers, marketers, and content creators often need the exact colours used in a photo, logo, or screenshot. Guessing from memory or eyeballing a screen never matches. Upload any image and this tool reads the pixels to find the dominant colours, then gives you each one as HEX, RGB, and HSL. Copy a single value with one click or download the whole palette as a PNG swatch to share or keep. Everything runs in your browser, so your images stay on your device.
How to use this tool
- 1Upload an image - a photo, logo, screenshot, or design mockup. JPG, PNG, and WebP all work.
- 2Choose how many colours to extract (4 to 10). More colours capture subtle tones; fewer give you a tighter brand palette.
- 3Read the extracted palette. Each swatch shows its HEX, RGB, and HSL values.
- 4Click any value to copy it to your clipboard for use in CSS, a design tool, or a brand sheet.
- 5Click 'Download palette PNG' to save a labelled swatch image you can share or store with your brand assets.
Example
Upload a client's logo PNG, set the count to 5, and read the palette. The primary teal comes back as #008A8F, rgb(0, 138, 143), hsl(182, 100%, 28%). Click the HEX value to copy it straight into the CSS variables for the new website.
Upload a sunset photo, set the count to 8 to capture the gradient, and download the palette PNG. The labelled swatch shows the warm oranges and deep purples with their HEX codes, ready to drop into a Canva mood board or Notion page.
Common use cases
- Designers pulling exact brand colours from an existing logo or screenshot
- Marketers building a colour scheme for a campaign from a hero image
- Web developers grabbing HEX values to match a mockup in CSS
- Content creators assembling a mood board or theme from a reference photo
- Small business owners documenting their brand colours from existing artwork
- Anyone who needs the colour codes behind an image without opening a design app
Common mistakes
- Expecting the exact colour of one specific pixel - this tool finds the dominant colours across the whole image, not a single point. Use an eyedropper tool if you need one precise pixel.
- Uploading a very busy photo and asking for too few colours - the result averages similar tones together. Increase the colour count to separate them.
- Assuming the order is by position - colours are ordered by how much of the image they cover, with the most dominant first.
- Copying HSL into a tool that expects HEX - check which format your design tool or CSS needs before pasting.
Frequently asked questions
What is a colour palette extractor?
It is a tool that reads the pixels of an image and identifies the most common colours, then returns them as usable colour codes. Instead of guessing the colours in a photo or logo, you get the actual HEX, RGB, and HSL values you can use in design tools, CSS, or a brand sheet.
What is the difference between HEX, RGB, and HSL?
They are three ways to write the same colour. HEX (like #008A8F) is a six-character code used in web design and most design apps. RGB (like rgb(0, 138, 143)) lists red, green, and blue values from 0 to 255. HSL (like hsl(182, 100%, 28%)) describes hue, saturation, and lightness, which makes it easier to create lighter or darker variations of a colour.
How many colours should I extract?
For a brand or logo, 4 to 6 colours usually captures the core palette. For a photo or detailed artwork where you want the full range of tones, 8 to 10 gives a richer result. Start with the default and adjust if colours look merged or if you want more detail.
What if the image has thousands of colours?
Most photos contain thousands of slightly different colours. The tool groups similar shades together and returns the dominant ones, ordered by how much of the image they cover. That is why a photo of a forest might return five greens rather than one - they are genuinely different dominant tones.
Are my images uploaded to a server?
No. All processing runs in your browser using the Canvas API. Your image never leaves your device, which makes this safe to use for confidential logos, unreleased designs, or private photos.
How accurate are the extracted colours?
The colours are read directly from the image pixels, so they are accurate to the file you upload. Keep in mind that a JPG may have slight compression artefacts that shift colours a little, and the same image can look different on screens with different colour calibration. For an exact brand colour, always check against the original brand guidelines if you have them.
Can I download the palette?
Yes. Click 'Download palette PNG' to save a swatch image showing each colour with its HEX label. This is handy for sharing a palette with a client or team, or storing it alongside your other brand assets.
Related tools
Last updated