During our Q&A sessions, one question that pops up a lot is how to pick colors for a website. Participants in chat often cite Kuler as a resource, a great little site of preset color scheme from Adobe. We also offer a free video through Think Vitamin Membership that discusses color mixing as part of a series on color theory, and there are sites like Color Scheme Designer that make color theory easy by generating schemes based on your selections. My own method usually involves some combination of color theory and experimenting with eyedropped samples from harmoniously-colored photos or images.
Once I’ve come up with an acceptable color scheme, it almost always takes some experimentation to find the final combination. My favorite way to do this is to stick the layout in Photoshop, create a new layer above the layout, and fill it with color. I usually start with a brown or blue, then change the color and blending modes to see alternate color schemes.
Here’s an example of this with the Carsonified website, showing the color layers and blending modes I used.
One great thing about this method is that it works really well on grayscale layouts with splashes of color, which is how a lot of my designs begin. (Supplementary tip: looking at your layouts in grayscale is an awesome way to verify you have sufficient contrast.) Here’s a case where I used it on a website background that was mostly gray. Adding in that “experimentation” layer amped up the richness considerably:
This little procedure always helps me out when I’m suffering color block, so I hope it will help you too! Next time you’re struggling to find the right colors, give this method a shot. 🙂