How to Extract Colors From an Image

When you need to extract color

Useful when you want to bring a photo's mood into a design, need the exact code from a brand logo, or want to reuse the colors in a reference image. Matching colors by eye drifts easily; pulling them straight from the pixels is precise.

HEX, RGB, or HSL — which to copy

HEX (#RRGGBB) is most common in web/app design and CSS. RGB describes the three primary colors of light, used in video and image editing, while HSL (hue, saturation, lightness) is great for adjusting a color intuitively. The same color is shown in all three, so copy whichever you need.

Build a palette

Click several points in a photo and the colors stack into a palette so you can see the whole scheme at once. To make an extracted color lighter or darker, drop its HEX into the color picker and fine-tune it.

Tips for accuracy

• Zoom with the magnifier and click the exact pixel
• Pick a representative area, not a shadow or highlight
• If needed, crop to the part you want first, then extract