A color scheme does more than look good. It keeps the design from contradicting itself. It reinforces the message you want to convey, whether that's for branding or for mood. It also says the designer didn’t just throw something together. There’s a sense of purpose.

It’s also a way to reveal more about a design than the designer may realize.

What’s wrong with this photo? By itself, nothing. But in context of the page, the photo feels out of place — squashed between regions of saturated color.

The elements of design should work together. Here are three ways you can get a design and photo to play off each other’s strengths.

1. Choose colors from the photo

Select the most prominent colors in the photo. In this case, the blue water and beige foreground grass jump out.

Best practice is to choose two to three colors at most. The more colors you choose, the more likely you’ll choose colors that don’t matter. For example, technically the photo above does have shades of green. But they’re hardly important.

Many image editors with eyedropper tools let you choose the sample size. Because individual pixels may not reflect a photo’s overall color, sample more 5x5 pixels or higher.

2. Apply colors to the design

Once we’ve chosen the major colors from the photo, we use them in the design. In this case, that means the background. Here’s a trick: If the colors don’t have enough contrast, change their brightness and saturation — but not their hues. Doing so will help keep the colors coordinated.

3. Rethink the photo

Using a photo’s major colors often has a useful — if unintended — consequence. The colors above match, but the design’s mood is downright somber. Does the photo say what we want it to?

That’s the right harbor. But… are those storm clouds? Is that the impression we want to give people? Whose idea of "guaranteed fun" is that?

Think about the images, especially large photos, on your site. If the text says one thing, but the colors in your site say another, you may need to find other images. A coordinated color palette is more than colors that work well together. It’s making sure your between-the-lines message doesn’t contradict what you want to say.

---