How to Get a Color Palette From an Image
A great photo, a logo or a mood board often holds the perfect color scheme. Here's how to pull exact HEX codes out of any image and turn them into a palette you can actually use.
Quick answer
Upload the image to a color palette generator, choose how many colors you want (5–6 is ideal), and copy the HEX codes. To grab one exact color, click that spot on the image. Then pick one dominant color, one or two supporting colors and an accent, and check text contrast before using them.
Designers do this all the time: they find an image with the right mood, then build a palette from it. It's a reliable way to get colors that look good together, because they already do in the photo.
How to extract colors from an image, step by step
- Open the free Color Palette Generator.
- Drop in a photo, logo, artwork or screenshot, or paste it with Ctrl+V.
- Choose how many colors to extract. The palette is sorted from the most to the least dominant.
- Click a swatch to copy its HEX code, or click the image to sample one exact pixel.
- Explore harmonies (complementary, analogous, triadic) to find matching accent colors.
- Export the palette as CSS variables, JSON or a PNG image.
Try it free: Color Palette Generator
Extract a harmonious HEX / RGB palette from any image. Runs in your browser, no sign-up.
HEX, RGB and HSL: which code should you use?
| Format | Example | Best for |
|---|---|---|
| HEX | #2BA8A2 | Web design, brand guides, most design apps |
| RGB | rgb(43, 168, 162) | Code, screens, adding transparency with RGBA |
| HSL | hsl(177, 59%, 41%) | Creating lighter and darker shades of the same color |
All three describe the same color. HEX is the most common way to share colors. HSL (hue, saturation, lightness) is the easiest to adjust by hand: keep the hue and change the lightness to get a family of tints and shades for buttons, hovers and backgrounds.
How palette extraction works
A photo can contain hundreds of thousands of slightly different colors. To reduce them to a handful, the tool uses k-means clustering:
- Every pixel is treated as a point in 3D color space (red, green, blue).
- The algorithm places k starting points, one per color you asked for.
- Each pixel joins the nearest point, and each point moves to the average of its group.
- This repeats until the groups stop changing. The final centers are your palette.
Because each color is an average of a whole group of pixels, the result represents the image's overall look rather than one random pixel.
Turning extracted colors into a usable palette
Raw extracted colors are a starting point, not a finished design system. A practical structure is the 60-30-10 rule:
- 60% dominant color: usually a light or neutral color for backgrounds.
- 30% secondary color: for sections, cards, headers and large shapes.
- 10% accent color: a bold color reserved for buttons, links and highlights.
Then add two neutrals for text: a very dark color (rarely pure black) and a mid gray for secondary text.
Color harmonies explained
- Complementary: the color opposite on the color wheel. High contrast, great for an accent.
- Analogous: neighboring colors. Calm and cohesive, good for backgrounds and gradients.
- Triadic: three colors evenly spaced around the wheel. Vibrant and playful. Let one dominate.
Don't forget accessibility
Colors that look great together aren't always readable. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Pale colors pulled from photos often fail as text colors, so reserve them for backgrounds and use your darkest color for body text.
Where to find great palette sources
- Nature photos: forests, beaches and sunsets give naturally balanced palettes.
- Film stills and paintings: cinematographers and artists choose colors carefully.
- Your own product photos: a palette that matches your products makes a store feel cohesive.
- Your logo: extract the exact brand colors when nobody has the original codes.
Frequently asked questions
How do I find the exact color code of something in a picture?
Click that spot on the image in the palette tool to sample the exact pixel and copy its HEX code. Zoom in first if the area is small, because neighboring pixels can differ.
Why don't the extracted colors match what I see?
Palette colors are averages of similar pixels, and photos contain lighting, shadows and noise. Sample a single pixel for an exact value, or pick a flat, evenly lit area.
How many colors should a brand palette have?
Most brands use 2–3 main colors plus neutrals for text and backgrounds. More than that becomes hard to apply consistently.
Is my image uploaded?
No. The colors are extracted in your browser and the image never leaves your device.
The bottom line
Pulling a palette from an image is the fastest way to get colors that work together. Extract 5–6 colors, organize them with the 60-30-10 rule, and check contrast before you use them for text.
Found something out of date or unclear? Email contact@ultratoolsai.com and we'll fix it.
