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
{code type=html}
Color Scheme 1
< /div>
{/code}
{code type=css}
.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}
{/code}
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.
{code type=css}
a {color: #496c78;} /* links in main text */
a {color: #092c38;} /* links in footer */
{/code}
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.
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.
Download a free sample from my book, Design Fundamentals.
Thanks for sharing yet another method from your design process. Very interesting.
I am myself not very skillful at choosing color schemes.
Therefore, I have started depending on the nature more. Nature has most esthetically pleasing color arrangements ever and it can hardly fail you.
My first step of the process would be collecting photos based on the desired base colors. Then I move to Adobe Kuler to generate a couple schemes based on various rules i.e Monochromatic, Analogous and/or Compound.
My final color scheme is usually the subset of the above.
Thanks Nomi. I’m glad you liked the post.
Nature is a great way to choose colors. It probably would have worked great for me too, since I like earth tones in general.
I do the same thing with the color schemes, though I’m using Color Schemer Studio. I tend to start with a color that seems right for the concept I’m going after.
Now that I think about it, I’m pretty sure Color Schemer Chooser will let me pull in an image and it can create a color scheme from the image. I’ll have to give that a try in a future project.
Thank you for sharing this. Its always refreshing to hear a good designer actually discuss where they have a weakness and how they overcome it.
I can relate to the idea of having the vision in your mind, but having trouble getting it out. Happens to me frequently!
Thank God for the tools we have available to us! I think that is what separates a professional from an amateur. Finding the right tools to help strengthen your weaknesses… and knowing what those weaknesses are.
Kudos to you!
Thanks Ed. One of these days I can hopefully list color as a strength instead of a weakness, but right now I think my color skills need improvement.
I’m grateful for the tools too. I still don’t necessarily get what I see in my mind, but at least I know the colors I’m using work together based on the theory. I think it helps.
I’m also happy to share when I don’t think I do something well. None of us is perfect, but it can be easy to think the other person is. I think more people should be willing to share mistakes and weaknesses to help everyone realize you don’t have to be perfect to produce good work.
Reading this article and having read a few more on colour theory throughout the internet, all I can wonder if whether or not I’m wrong over my colour choices, or whether I’m daring to go bold.
For example, the website just about to replace my current one has a colour scheme of muted purple (and its tints and shades), bright blue, bright orange, and white. The blue being the main colour for buttons/interaction, the orange for additional characteristics (e.g. a bit in illustrations and in the logo). Thank goodness that technically it falls under a triad… just. Sometimes rules can be broken!
Your colour scheme works really well, with the headlines and the links. Subtle but ever present, I like that touch. I think the only thing about your scheme that puts me off is the green footer. It just looks too different from the red and breaks the immersion… but perhaps that’s just me!
I doubt you’re wrong in your color choices. I think ultimately if it works it works. To a large enough degree we all have color preferences and will like or dislike whole schemes because of our preferences.
Glad you like the scheme here. Interesting about the green. I like it as you might guess. Green is my favorite color so I’m a bit partial to it. I’ll keep in mind that you don’t think it works with the red and blue. I’m sure you’re not the only one who feels that way.
I wouldn’t worry too much about whether or not your color scheme fits into something color theory suggests. I’ve seen color schemes built on theory that I thought didn’t work well at all and I’ve seen some that I know didn’t try to use color theory and they looked great.
Thank you so much, this was super helpful seeing someone else go through a similar process. It’s nice to know I’m not the only one struggling and how to work through it better. Thanks again!
Glad I could help. You’re definitely not the only one struggling. It’s natural to struggle through this stuff at first.