How Do You Choose A Color

Scheme When Your Color Skills

Are Lacking?
by Steven Bradley on September 27, 2012
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.
Ill be the first to admit I need more study and practice with color, but even if its not
something I currently list as a strength, its something I needed to work out for the
recent redesign of this site.
Ive walked you through the style documents I created for both type and grids and
today Ill fill you in on how I settled on the color scheme you see here. My color
document wasnt 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 Ive spent
considerable time the last couple of years trying to understand and work with
typography and grids, Ive put color on the back burner.
I can look at someone elses 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. Its something Ill be dedicating more study to in the near
future, but that didnt 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 Id like to walk away feeling I
had more input into the choice, but for the most part Ive 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 didnt 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. Heres the html and css I used for one scheme
1<div class="color-scheme">
2 <div id="color1-1">#4a5F70</div>
3 <div id="color1-2">#7f825f</div>
4 <div id="color1-3">#c2ae95</div>
5 <div id="color1-4">#824e4e</div>
6 <div id="color1-5">#66777d</div>
7 <p>Color Scheme 1</p>
8< /div>
.color-scheme {width:750px; margin:0 auto 20px auto; oveflow:hidden; textalign:center;}
1.color-scheme div {float:left; line-height:150px; color:#fff; width:150px;
2height:150px}
3.color-scheme p {clear:both; padding:0 0 20px 0}
4
5#color1-1 {background:#4a5f70}
6#color1-2 {background:#7f825f}
7#color1-3 {background:#c2ae95}
8#color1-4 {background:#824e4e}
9#color1-5 {background:#66777d}
Its 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 didnt 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 Id 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 Id raise or lower all the numbers and letters in the hex value
by an equal amount. For example the blue Im using for links in the copy needed to
be darker to show up on the green background in the footer, so its a darker version
of the same blue.
1 a {color: #496c78;} /* links in main text */
2 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, youll 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
Its a relatively simple way to find different values of the same hue that will work
within a scheme.

Dance of colors
Where I Failed with Color
Once again working with color isnt my greatest strength as a designer and there are
a few places where I think the scheme Ive 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, its something Ill likely adjust
at some point.
Originally I wanted the main background to have a little more color, though still
remain mostly neutral. Its 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 havent been able to find
the right color though. Everything Ive tried shows up much darker than I want.
Im not sure how well the blue links work. I didnt want the links to stand out too
much to not interrupt reading, but I wonder now if they dont stand out enough so
you can tell theyre 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 theres 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. Im not sure if Im 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.

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 Id 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 cant say I did everything well, but Im 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.
Fuente