Quick Tip: Experimenting with Color for Web Layouts

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.

Blending Modes Example

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:

Blending Modes Example

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. :)

 

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

5 comments on “Quick Tip: Experimenting with Color for Web Layouts

  1. If you work with windows, you should drop an eye of DotColor 3.0:

    http://inetis.com/index.php?module=programcki

    It looks like an normal freeware color picker, but the software has has a builtin color mixer. The color mixer shows a screenshot of your working screen. If you activate it, you can select a color of the screen and change it and see the results in time.

  2. Fantastic tip. Been using the grayscale practice for years as more of an accessibility tactic for color blindness. I always wanted to make sure I had enough contrast going. I taught my high school web design students to do this as a best practice :)