Photos are one of the best sources of natural, believable palettes. This tutorial uses the Color Atlas image color analyzer, which works entirely in your browser — your image is never uploaded.
Step 1: Load the image
Select a file, drag it onto the drop zone or paste a screenshot with Ctrl/Cmd + V. JPG, PNG, WebP, GIF (first frame) and AVIF (in supporting browsers) are accepted.
Step 2: Choose how many colors
Five colors give a clean summary; 20–50 colors reveal subtle variations. The analyzer groups pixels with the k-means clustering algorithm in the CIELAB color space, which measures differences the way people perceive them.
Step 3: Read the percentages correctly
After clustering, every analyzed pixel is assigned to its nearest dominant color. The percentage shows how many pixels belong to each group, so all groups add up to about 100%. Two details matter:
- Downsampling: very large images are resized for analysis (for example to about one million pixels). The results state this clearly.
- Transparency: mostly transparent pixels are excluded, and the number excluded is reported.
Step 4: Pick exact pixel colors
Dominant colors are averages. When you need the exact value of one pixel — for example a logo in a screenshot — click the image. The magnifier shows individual pixels and the coordinates refer to the original image, even on a phone.
Step 5: Analyze a region
Switch to region mode and drag a rectangle to analyze only part of the image, such as a product without its background.
Step 6: Export
Save the palette as PNG, SVG, CSS, JSON or TXT, or download a PDF or CSV report with values, percentages and shades. Use the palette exporter to rename and reformat later.
Tips for better palettes
- Crop out large backgrounds that would dominate the result.
- Combine one dominant color with smaller accent clusters rather than using the top five blindly.
- Check text contrast before using extracted colors in an interface.
