How to choose the perfect color palette

Published by | Wednesday, July 24th, 2013

Create the perfect color palette for your images

Color is a tricky element in design, and made even more challenging when incorporating images into a layout. It can be difficult to know what colors are going to complement the image and the overall design. There’s a lot of science surrounding how to mix and match colors, but John McWade of Before & After offers some foolproof ways to pick the right colors from an image in his course Before & After: Things Every Designer Should Know.

Finding the perfect color palette for your image
1. Import your image into Adobe Photoshop or Illustrator and reduce it to large squares. This will average the colors and provide you with a clear selection to choose from. In Photoshop, a quick way to accomplish this is to use the Image > Adjustments > Posterize command, and move the slider around the 6–10 range to find the best setting.

2. Select a good sampling of the key colors across your image—from both prominent colors that appear frequently and less prominent but notable “accent” colors, representing a mix of shadows, highlights, and some midtones.

Choosing the best sampling of colors

3. All of them will work because they are native to that photograph, so they go well with it. Test them out and see which of these colors best complement the image in your design concepts.

Trying the brown tone

Trying the dark tone

Trying the light tone

Remember, color is much more than just a visual component. Every color comes with cultural connotations, symbolism, some natural strengths and weaknesses, and, of course, an opinion from everyone. Although there will be no wrong choice with this method, you’ll need to think about the mood you’re trying to convey. In the examples above, the brown feels more earthy, the gray feels more sophisticated and modern, and the pink feels more feminine. You’ll also notice that the color you select for the facing page will make that same color in the related image pop. Look how the woman’s eyes in the gray layout stand out versus in the pink layout, where the pinks in her lips and skin are more pronounced.

Be sure to watch the video Use beautiful color in John’s course for more easy tips on using a monochromatic range, analogous, complementary, and triadic colors. This will enable you to design better and faster!

Interested in more?

Become a member
• Watch Before & After: Things Every Designer Should Know
• All courses by John McWade
All Design courses at

Adobe, Illustrator, and Photoshop are registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Share this:Share on Facebook79Tweet about this on Twitter16Share on Google+6Pin on Pinterest10Share on LinkedIn3 - start learning today

Tags: , , , , ,

5 Responses to “How to choose the perfect color palette”

  1. silvia says:

    Thank you for sharing with us this trick. I appreciate it.

  2. Kevin Woolsey says:

    Great tips. I would never have thought of this on my own. Thank you!

  3. murnax says:

    thank you for sharing. but I have a question how can I do the same way like this in web design ( may be shopping cart ) instead of publishing

    • Hi, Murnax-
      You can apply these techniques to figure out the primary colors in any design, print, web or interactive, it’s certainly not limited to printed designs. You’ll still need an image editor like Photoshop, Pixelmator, GIMP,, et al to process images and narrow down the color choices as the article recommends, but once you’ve established your primary color theme, simply work those colors into your site CSS for fonts/backgrounds/states/etc. If you’re a member, Chapter 8 of James Williamson’s course CSS Fundamentals has a movie on Color that gives more detail on how you would specify these colors in CSS for web designs, which may also be helpful. Have fun!

  4. Tricia Young says:

    I love the “pick tool” feature found in InDesign, Illustrator, and PhotoShop. I use it a lot when doing layouts with photos or artwork to coordinate the color scheme. The pick tool can also be used to mimic the text and paragraph styles, even object styles in a hurry, without having to go the style menus each time. I shared this link on my Facebook page to help others who are interested.

Leave a Reply