The Secret to Confidence with Color Design

I love to go on dates with my wife, but but there is one moment I detest.

It’s the moment I’ve chosen a pant and shirt combination and she’s ready to see me for the first time. As I walk up the stairs – or as I call it, “the climb of shame”, I always pause in front of our bedroom door and take a deep breath because I’m sure the next thing I will hear will be…

Is that what you are going to wear?

One of the trickiest things to do when designing a web site is to come up with a good color scheme and apply it in a fashionable way. There are times I’ve spent way too much time fretting over whether the colors I have chosen will work. Much like when I put on pants and a shirt, I have this irrational fear that not only will they not match, but the combination will be so hideous that it will cause a rift in the space time continuum.

The good news is that color theory and good color combinations have a foundation in math, so with a little knowledge, and the right formulas, you can be absolutely sure your colors will match and you don’t have to worry about your client asking if that is what their website is going to wear.

Color Theory 101

We’re not going to go all MIT with this – I just want to give you 3 simple color relationships and a few tips you should know and can use right away.

Analogous – These are colors that have matching hues. They are harder to use well because they can overpower each other if used too much but since they tend to be vibrant you can have a very color rich and interesting site.

Monochromatic – There is a focus on one color but the intensity and lightness varies. This color scheme is typically the easiest and safest to use. You can very rarely go wrong when implementing this color scheme.

Complementary – Two colors opposite of each other on the color wheel. This color scheme is the middle ground between monochromatic and analogous. It gives you more visual variety but isn’t as hard to implement.

The Weapon of Choice

So I know what you’re thinking. “Sweet! now I know some color theory, but I still don’t know those formulas you were talking about.” Thankfully, people much smarter than me have put together some incredible tools for you to use. My favorite is Adobe Kuler.

Now you can go to the site and browse a lot of great color combinations that others have created, and if you’re stretched for time this is a good solution. But I know you want to be as original and unique as possible, so I’m going to walk you through on how to create your own. (It’s very easy).

  1. If you haven’t already navigate to http://kuler.adobe.com
  2. In the menu on the left side click “Create”.
  3. You have an option to use an image or create from color – we’re going to create from color, but when you have a chance try out the image option because its really cool.
  4. Choose one of the color schemes (analogous, monochromatic or complementary).
  5. Click on the base color handle in the color wheel (it’s the one with the double black stroke) and move it till you have found the color you are basing your site on.
  6. Click on the other handles in the color wheel and drag them around. The scheme will automatically update.
  7. Play with this until you find something you like.
  8. You can use the values below the colors to import them into your design program, or you can actually save a swatch palette of your colors for Photoshop or Illustrator if you create a free account and sign in.

Putting it All Together

Now that you have your color scheme let’s get practical and stick it on a site. At the most basic level you’ll need to identify three colors from your palette.

Background Color
This color is used the most and sets the general tone and feel of the site.

Base Color
This color is used to break up the background and is typically the baritone, the middle child, neither boring nor flashy but the glue that holds it all together.

Accent Color
This color is used the least but gives the site its personality. Unless you’re using a monochromatic color scheme, your accent color will have a stark contrast to both your background and your base color. This is typically your boldest color.

Below you’ll see several examples using our color palettes. These are obviously not the only ways you can do it, but you should get a good idea of what you’re looking for.

Analogous Example

Complementary Example

Monochromatic Example

Lastly, I want to leave you with some real world examples. Armed with your new knowledge, next time you’re browsing a gallery of sites look for the background, base, and accent colors – not only will you see how the color design was put together, you’ll start to recognize patterns and combinations that work together!

If you want more help figuring out the color scheme of a site, upload a screen shot to Adobe Kuler using the “Create from Image” option. It will create a palette of colors that you can further refine.

Comments

  1. what an excellent & thoughtful post. Thank you!

  2. Okay Josh, in addition to your fine taste in cheese snacks (Goldfish white cheddar anyone?) I have to say you write some awesome posts.

    I need to get colors down on my most recent site, I think I have way too many (linked in my name), the visuals in this guide go pretty perfect with the premise.

    I can think of quite a few site owners who need to read this post…

    • I think your colors are good but like you said there are probably too many accents – they are competing with each other. I would probably go with the orange – it looks fantastic with the blue and gray.

  3. Samantha Brown :

    EXCELLENT post!! :-)

    I will definitely be reading through and using this today!

  4. I didn’t know about the Kuler tool … I’m definitely adding it to my arsenal of color-related tools. And the Image feature there is mondo cool.

    Here’s one I like and have used a lot: Color Scheme Designer 3 – http://colorschemedesigner.com/ . It has a couple of other color combinations that I didn’t see with the Kuler tool (accented analogic, anyone?), and all kinds of ways to customize and tweak colors even further … including the ability to use Web-safe colors only (I didn’t see that on the Kuler tool … ?).

    That being said, I do like the “compound” color combination on the Kuler tool.

  5. Josh,

    Awesome post – great use of visuals and just enough detail to teach but not so much as to overwhelm!

    As for your matching clothes problem – visit my website Real Men Real Style (built with Studiopress of course!) as I provide an organized collection of videos and articles to help men dress better!

    R/S

    Antonio

  6. This is GREAT Josh- thanks!
    Really appreciate the design tip posts (the textures post was great too! Already used some of them).
    I’m going to check out Adobe Kuler now.
    Thanks again!

  7. Great post Josh and a great tool discovered!

    Thanks!

    jill :)

    • Glad to be a help Jill – I wasn’t sure about including Kuler in the post because I thought a lot of people would know about it but I’m very glad I did.

  8. Hey Josh,

    Awesome post! Question – when are we going to hear more about the Mission theme? Just waiting to get a look at this one for sure. Also, I think you make a great addition to the StudioPress squad. Congratulations! Have a good one.

    Quest

    • Thanks for the kind words.

      We are producing our own specialty plugins in house for Mission and we want to make sure everything works the way it should – hopefully soon :)

      • Sequester McKinney :

        Awesome thanks so very much. You are a great teacher so can’t wait to learn even more from you and the StudioPress team. Keep up the great work!

        Quest

      • Can’t wait for the Mission theme too! Look forward to seeing more of your work, Josh! :D

  9. Great post, Josh. One of the most difficult steps to web design for me is figuring out a solid color scheme. Thanks for the tips and resources.

  10. Excellent article. I’ve always taken an interest in color theory, even gone ‘all MIT with it’, read books from Johannes Itten etc.. but this is a very nice roundup/explanation with a few cool real world examples. And yes, I’m a kuler-lover too. (At my former job a colleague got blamed by my boss “why in the world he didn’t know that supercool tool that Tom used” ;)

  11. Great straightforward post. Cheers Josh. Thanks for not only simply describing colour relationships, but also providing links to dynamic colour choosers. Bookmarked.

  12. Absolutely love your articles! Concise and informative with a dash of humor. Just great – thanks for sharing.

  13. awesome tool, i never use kuler adobe before.

    i’m now redesigning minimum child theme, still looking for great color combination. this is really helpful

  14. Hi Josh
    It all looks very easy when you do it.
    Now when I di it….. oh dear.

    One of the reasons I use premium themes is because the colour schemes have been put together by guys like you.
    I rarely change things.

    Platforms like Headway allow for an infinite number of combinations, but to me that means an infinite amount of time you can waste looking for the right combination.

  15. Nicely done!

    I’ve seen lots of introduction to color theory for web design posts, but this one was just awesomely put together and concise. I particularly like the little thumbnails of sites showing background/base/accent with color chips.

  16. wow! this is a perfect explanation and a wonderful tool. I am sure this is going to help me in future web design projects. Thanks Josh! :-)

  17. A well written post Josh – good work, and enough for a developer to get their hands dirty in the magical and mysterious world of design :-)

  18. Hi Josh

    Thanks for an awesome post, I use to use a tool from coffee cup but they discontinued it.

    After reading this post I now have another great tool that I can use to mix and match the colors of my WordPress blogs.

    Well Done.