How to build a color palette from a photo

You have a photo with colors you like, but it can be hard to turn them into a palette you can reuse. The trick is to sample a few distinct areas, then choose the colors that best represent the photo.

The Color Picker can sample colors from anywhere on your screen and show their HEX, RGB, and HSL values. You can use those codes in a design, document, or image editor.

Build the palette from the photo

1. Open the Color Picker in Chrome or Edge on a computer, then display your photo where you can see it. Arrange the photo and the tool so the image stays visible when you start picking a color. Follow the browser prompt if it asks for permission to sample the screen.
2. Look for color areas that represent different parts of the image. A sky, wall, or background can supply a light color; a large object or clothing can supply a main color; a shadow or dark outline can supply a deep color. Avoid tiny details for now.
3. Use the screen-picking action to sample the middle of each area. The middle is less likely than an edge to blend two colors together. Note the HEX value shown for each candidate, and give it a plain-language label such as sand or deep blue.
4. Collect about six to eight candidates, then narrow them to five. Keep colors that serve different purposes. If two samples look nearly the same, keep the one that better represents the photo or gives you more useful contrast.
5. Put the five selected colors next to one another in the app or document where you plan to use them. Check that the palette feels like the photo and that its light and dark colors are easy to distinguish. Keep the HEX codes together so you can reuse them.

For the most useful samples, pick a photo that is large enough to show broad color areas. A tiny thumbnail can make it difficult to choose a representative spot. If you need to sample from the original image rather than its on-screen appearance, see how to sample a color from an image in a browser.

Choose the palette style you need

A balanced five-color palette

For a general-purpose palette, give each color a role instead of choosing five colors at random:

• Light background. Use a pale area from the photo for page backgrounds or open space.
• Secondary surface. Choose a nearby light or mid-tone color for cards, panels, or less prominent areas.
• Main color. Pick the color that most strongly identifies the subject or mood of the photo.
• Dark color. Use a shadow, dark object, or deep part of the image for strong details and text when it has enough contrast.
• Accent. Pick a noticeable color that appears in a smaller area, such as a flower, sign, or piece of clothing.

The photo may not contain a good example of every role. That is fine. Choose colors that are actually present, and use fewer than five if extra samples feel repetitive.

A palette that keeps the photo's mood

If you want the palette to feel close to the image, prioritize its largest or most recognizable colors. A landscape might use greens, earth tones, and sky colors. A close-up portrait might call for skin, hair, and clothing colors. A small accent can add variety, but it should not outweigh the dominant colors.

If you want a palette for a graphic or a website, function matters too. Keep a light and a dark color that can be used together, and reserve the brightest or most unusual color for emphasis. A photo can provide the inspiration without every sampled color needing to appear in the final design.

Fix sampling problems

1. Use a supported browser and device. Picking a color from anywhere on the screen works in Chrome and Edge on a computer. Other browsers may offer a reduced version or no screen picker, and this feature is not available on phones.
2. Keep the photo visible while picking. If the tool covers the image, move or arrange its window so you can reach the photo. The picker samples what is currently visible on screen.
3. Choose a broader, flatter area. Avoid borders, reflections, text, and the edge between two objects. Those spots can contain a blend of nearby colors that does not represent either area well.
4. Compare similar samples before keeping them. Sample a second spot from the same object. If the codes differ slightly because of a shadow or lighting, choose the one that works best for your purpose rather than adding both automatically.
5. Check the displayed image if a code seems unexpected. Screen brightness, image color adjustments, and the way a browser displays an image can affect the color you see. The picker reports the displayed screen color, so its value may not match the original image file's stored color exactly.

Keep the palette easy to reuse

Save each HEX code beside a short label, for example Soft cream: #F2E8D5. The label helps you remember the color's role, while the code lets you enter the same color in another tool. You can also keep the five colors in order from lightest to darkest, which makes it easier to see whether the palette has enough range.

Before using the palette for text or buttons, check that foreground and background colors are easy to tell apart at the size where they will appear. A pleasing set of photo colors is a starting point, not a guarantee that every pair will be readable.