Get the Color Palette From an Image
Pull the dominant colors out of a photo, logo or screenshot and copy them as HEX, RGB, HSL or ready-made CSS variables.
- On-device
- No sign-up
- Batch
- Free, no watermark
Drop images on the plate
or paste with Ctrl/⌘ V
Processed on this device
How it works
- 01Drop, choose or paste one or more images.
- 02Read the palette, average color and brightness report.
- 03Copy colors as HEX, RGB, HSL, CSS variables or JSON.
Why use this tool
Dominant colors, ranked
Get a palette of 5 to 10 colors, found by k-means clustering so similar shades merge into one representative color.
Ready for code
Copy the palette as CSS custom properties or JSON, or grab single values in HEX, RGB or HSL.
Useful extras
See the average color, how much of the image is transparent, and its perceived brightness, which helps when placing text on top.
Supported formats
Use cases
Building a theme from a photo
Turn a hero photo into a matching set of accent and background colors, then paste them straight into your stylesheet as CSS variables.
Matching a brand logo
Find the HEX values of a client’s logo when nobody can locate the brand guidelines, so slides and graphics use the same colors.
Choosing text color
Check the perceived brightness of a background image to decide whether white or dark text will read better over it.
Technical details
The palette is found with k-means clustering, which groups similar pixels and reports the center of each group, so results are representative colors rather than single picked pixels. The share of transparent pixels is reported separately. The average color blends all pixels and can look muddy on colorful images, which is why the palette is usually more useful. Perceived brightness weights green more than red and blue, matching how bright the image looks to the eye.
Exact values can differ slightly from the original design file. A different color profile on export, or JPG compression artifacts around edges, shifts pixels a little, and clustering then averages those shifted pixels. For flat logos and illustrations saved as PNG or SVG, results usually match the source colors very closely. For photos, treat the palette as a starting point and adjust the values by eye before using them in a final design.
Your files stay with you
This tool runs entirely inside your browser using Web Workers and WebAssembly. Your images are never uploaded, never stored on a server and never used to train AI. Close the tab and they’re gone. Learn more
Frequently asked questions
How do I get the HEX code of a color in an image?
Add the image and the analyzer lists its dominant colors with HEX, RGB and HSL values. Copy the value you need. For a logo with a few flat colors, the palette usually captures each brand color closely.
Why isn’t the exact color I see in the palette?
Clustering merges similar shades, so a small accent may blend into a larger nearby color, especially in busy photos. JPG compression also creates slightly varied pixels around edges, which can shift values a little from the original design color.
Can I use the colors directly in CSS?
Yes. Copy the palette as CSS variables to get a block of custom properties you can paste into a :root rule, or copy JSON for design tokens and scripts. Individual colors can also be copied in HEX, RGB or HSL notation.
What does perceived brightness tell me?
It estimates how light or dark the image looks to a person, giving more weight to green, which the eye is most sensitive to. A bright result suggests dark text will read better over the image, and a dark result suggests light text.
Related tools
Remove EXIF Data
Remove location, camera and date information from your photos without touching a single pixel.
METADATAEXIF Viewer
Find out which camera and lens took a photo, the exposure settings used, when it was taken and whether it…
METADATAImage Metadata Viewer
Open any image and see every hidden data block it carries, from EXIF and GPS to XMP, IPTC captions and the…
METADATAImage Dimensions Checker
Get the exact pixel size of any image along with its aspect ratio, megapixels and how large it would…
METADATAImage File Size Checker
See exactly how many kilobytes or megabytes an image takes up, and how efficiently it is compressed for…
METADATAImage Type Checker
Find out what format an image really is, regardless of its file name, and see whether its extension or…