How Do You Choose A Color Scheme When Your Color Skills Are Lacking?

Posted: 27 Sep 2012 05:30 AM PDT

Along with movement, color is one of the first things that will get noticed in any design. A good or bad color scheme could potentially make or break your aesthetic. I’ll be the first to admit I need more study and practice with color, but even if it’s not something I currently list as a strength, it’s something I needed to work out for the recent redesign of this site.

I’ve walked you through the style documents I created for both type and grids and today I’ll fill you in on how I settled on the color scheme you see here. My color document wasn’t quite as fleshed out as the others, but the eventual choices I made were more than arbitrary.

My (Lack of) Skill with Color

Working with color is not my strongest skill as a designer. While I’ve spent considerable time the last couple of years trying to understand and work with typography and grids, I’ve put color on the back burner.

I can look at someone else’s color scheme and form strong opinions and judgments about it. In my head I can see the colors I want and have valid reasons for justifying their choices. However, when it comes to finding that right color to display on the screen, I have a hard time. It’s something I’ll be dedicating more study to in the near future, but that didn’t help in the past with my choice of colors for this site.

With most designs I usually pick a single color value to start based on some ideas for why that color should be used. Then I take the value to various tools and use their color scheme choosers to select other colors. Ideally I’d like to walk away feeling I had more input into the choice, but for the most part I’ve let the tools make the choice for me.

How I Chose this Color Scheme

I did have some goals in mind with what I wanted color to achieve here. Since this site is mine and more specifically about me in many ways, it seems appropriate to allow a little more subjectivity in than I might on other sites. I have a preferences for muted earth tones and knew I would look to them for a scheme.

Color still has some objective tasks to perform.

Set the tone, emotion, and context
Aid in the hierarchy through contrast and similarity

If you remember one of my goals was to lean toward a minimal design. That suggested color should be used sparingly and more as an accent. Dominant colors would be more neutral.

My search for a scheme began with visits to sites like Kuler and Colourlovers and browsing and searching each. I typed in words from my concept like simplicity, clean, and minimal as well as words for the different aesthetic directions I was thinking of using.

When I searched around the word renaissance I felt a certain assurance and confidence in my aesthetic concept since the colors kept coming back muted and often as earth tones. Over several days I searched and recorded colors for different schemes and I have them listed in my document with names like:

muted renaissance
renaissance pink
renaissance kaki
renaissance pastoral
renaissance women

I also recorded some renaissance themed color schemes from books I have, though I discovered they often didn’t translate as well online from how they looked in print.

For awhile I was collecting potential schemes and eventually chose the few I liked most and added them to the html version of the style guid I had started building. Nothing too fancy. Here’s the html and css I used for one scheme

1  2  3  4  5  6  7  8

<div class="color-scheme">    <div id="color1-1">#4a5F70</div>    <div id="color1-2">#7f825f</div>    <div id="color1-3">#c2ae95</div>    <div id="color1-4">#824e4e</div>    <div id="color1-5">#66777d</div>    <p>Color Scheme 1</p>  < /div>

1  2  3  4  5  6  7  8  9

.color-scheme {width:750px; margin:0 auto 20px auto; oveflow:hidden; text-align:center;}  .color-scheme div {float:left; line-height:150px; color:#fff; width:150px; height:150px}  .color-scheme p {clear:both; padding:0 0 20px 0}    #color1-1 {background:#4a5f70}  #color1-2 {background:#7f825f}  #color1-3 {background:#c2ae95}  #color1-4 {background:#824e4e}  #color1-5 {background:#66777d}

It’s just 5 squares sitting next to each other in a row, with the background color set to match the hex value. You can see below what a couple of them looked like.

I had considered using color scheme 1 exactly as you see it above, mixed with some neutral grays, but it didn’t quite look how I wanted in the design. As luck would have it ColorSchemer Studio was on sale at the same time I had an iTunes gift card burning a whole in my iTunes account. I purchased it and began playing.

Ultimately I took the reddish value (#824e4e) from the scheme above tossed it into ColorSchemer Studio and selected a split compliment scheme. The next thing you know I had the main colors I’d use in the design. I guess when all was said and done I was back to my usual method for choosing colors.

With these colors chosen it was a matter of deciding which elements should be which color. I decided to keep blue for links given the convention and through some trial and error chose colors for various headings and the footer background.

As I fleshed out the design I modified the colors slightly to generate different values for each hue. To do this I’d raise or lower all the numbers and letters in the hex value by an equal amount. For example the blue I’m using for links in the copy needed to be darker to show up on the green background in the footer, so it’s a darker version of the same blue.

1 2	a {color: #496c78;} /* links in main text / a {color: #092c38;} / links in footer */

The first color value above is the default light blue you see used for links in the main text. The second color value is a darker version for the footer. If you look at the values, you’ll notice I reduced the first value in each hex pair by 4.

red: from 49 to 09
green: from 6c to 2c
blue: from 78 to 38

It’s a relatively simple way to find different values of the same hue that will work within a scheme.

Where I Failed with Color

Once again working with color isn’t my greatest strength as a designer and there are a few places where I think the scheme I’ve chosen could be better.

I noticed late in the process that the colors were more off than I thought they would be when moving between Mac and Windows machines. On the Mac side the colors are warmer and have a more earthy tone. On the Windows side they appear cooler. The red I see in headings is more purple on Windows machines.

All the colors on the Windows side seem to have a little more blue in them than on the Mac side. Since, I do want the colors to be warmer, it’s something I’ll likely adjust at some point.

Originally I wanted the main background to have a little more color, though still remain mostly neutral. It’s currently a very light gray or an off white. I wanted it to have a little more brown or tan in it to warm it up some. I haven’t been able to find the right color though. Everything I’ve tried shows up much darker than I want.

I’m not sure how well the blue links work. I didn’t want the links to stand out too much to not interrupt reading, but I wonder now if they don’t stand out enough so you can tell they’re links.

One goal with color was not to use too much, in part because of my limitations working with it, but also because of the desire to keep things on the minimal side. For the most part there’s not a lot of color here and I think perhaps a little more would improve the aesthetic and make the design more interesting.

Lastly, I had tried using different colors for the main page headings, but they all seemed to be too much so I went with the dark gray. I’m not sure if I’m crazy about the gray, but I do like it better than any of the colors I tried and the size alone seems enough to ensure the heading is the dominant element on the page.

cashmere in muted colors — A little bit of cashmere and color from Gotham Fine Yarn go a long way

Summary

When it came to choosing colors for the site I began with a self-conscious feeling about my skills using color. While I can often see the colors I want in my head, I have a hard time finding the hues and values in the real world.

With some preferences in mind and wanting to benefit from the work of others I searched sites like Colourlovers and Kuler. Fortunately what these sites returned confirmed for me that I’d chosen the right concept.

I added some schemes to my growing html style guide to see how they looked on the screen. In the end I chose a single color from a single color scheme and built a new scheme around it using recently purchased ColorSchemer Studio.

In the end I can’t say I did everything well, but I’m reasonably happy with how the colors turned out even as I still tinker with the colors here and there.

Next week I want to pick up on something I mentioned when discussing content and content types. I want to look at how I set up the visual hierarchy on blog posts.

The post How Do You Choose A Color Scheme When Your Color Skills Are Lacking? appeared first on Vanseo Design.