Color Palette from Image
Guide: How to Pick a Color Palette From a Photo
Drag a picture here, or
Your images stay on your device. Nothing is uploaded.
The picture is shrunk before it is looked at, so this is quick. Colors are grouped by how close they are, and the percentage shows how much of the picture each group covers. Your picture never leaves your browser.
Nothing you enter or choose here leaves your device. This tool runs in your browser.
How to use
- 1Drag in a picture.
- 2Choose how many colors you want, from 2 to 12.
- 3Click a swatch to copy its code, or copy the whole palette.
Frequently asked questions
Is my picture uploaded?
No. Your photos are processed in your browser and never uploaded.
How are the colors chosen?
Colors that are close to each other are grouped, and each group is averaged into one swatch. The percentage shows how much of the picture it covers.
Can I use the colors on a website?
Yes. Copy them as a list, as CSS variables or as JSON. Check the contrast of text colors with the Color Converter.
Why isn't a color I can see in the picture listed?
Small areas can be absorbed into a nearby group. Ask for more colors, or crop to the area you care about.
What are hex and RGB codes?
Two ways to write the same color. Hex is a short code like #3a7bd5, and RGB gives the red, green and blue amounts from 0 to 255.
Read the guide
Learn how this works and how to get the most from it.
Images
How to Pick a Color Palette From a Photo
How to build a color scheme from an image, how a palette is found, and how to use the colors in a design, a website or a room.
1 min read
Related tools
Color Converter & Contrast Checker
Convert HEX, RGB and HSL and check WCAG contrast ratios.
CSS Gradient & Box Shadow Generator
Design gradients and box shadows visually and copy the CSS.
Image Converter
Convert between PNG, JPG and WebP in your browser.
Image Cropper
Crop images by dragging, with aspect ratio presets.