Make The Web a Less Colorful Place
The web is a colorful place. It's easy to choose any color you can imagine, and put it into your design. No mixing paints, and no worrying about color-printing costs.
It's easy to have a colorful web page, and very tempting to do so. But what is the alternative?
Monochromatic Design
Monochromatic design is design with one color. You select a single base color, and then add white and black to it to produce different shades of that color.
Your design consists solely of your monochromatic palette, and various shades of gray.
Example of a monochromatic palette, with the base color at the right and left ends of the top and bottom rows respectively:
There are a number of color tools available to help you make your palette, if you prefer to use them.
Advantages of a Monochromatic Design
- A monochromatic palette is very easy to make.Simply choose your color, then add white and black to it.
- The colors can never clash, as there only is a single color. If choosing colors frightens you, a monochromatic design is a relatively safe option to choose.
- The design feels more minimal. The simplicity of the color scheme extends itself into the design. There is no contrasting and competing between different colors, and that peacefulness builds towards a more pleasant, minimal design.
- Allows you to emphasize important elements easily. Although the bulk of the design must be done using your monochromatic palette, you can use a contrasting color for the one or two things you want to stand out most. For example, your RSS icon.
Disadvantages of Monochromatic Design
- Less variation in your design. The lack of variety and contrast lessens the visual interest of the design. Whilst aiming for a minimalist design, you may just end up with a boring one. You have to ensure the details in your design still look great.
- Difficult to read the text. Often there is too little contrast between the color of the text and the color of the background it is being read from. Take care to ensure your page is still easy to read.
- Frustration. The limited palette can be very frustrating when you first work with it. It is tempting to break the rule and add more colors in. Sometimes that is the right option, but sometimes it isn't. It takes some getting used to.
Examples of Great Monochromatic Design
Achromatic Design
Achromatic design is taking monochromatic design one step further. There is no color in an achromatic design, simply shades of gray.
The advantages and disadvantages of using an achromatic design are the same as those for a monochromatic design, but more extreme.
For instance, whilst a monochromatic design will feel minimal, an achromatic one will feel even more so. And similarly, whilst a monochromatic design may be less distinct than a highly colorful one, an achromatic design could be even more so.
It is hard to find an entirely achromatic design online. Most will break the rule slightly and add small doses of another color, to give emphasis to certain elements, and to break up the monotony!
Here are two of my favorites, to spice your interest.
Conclusion
More color does not necessarily equal a better design. There is no need to jazz things up with buckets of color if the site does not warrant it.
If your blog is more relaxed and laid back, or your writing is simple and straight to the point, then a monochromatic or achromatic design might be for you.
There is often good reason to make the web a less colorful place.
What do you think of monochromatic designs? Minimalist and content-focused, or simply not as interesting as a colorful one?
Enjoy this post? Get future updates sent to you for free! Join by email or RSS.
About the Author - Michael Martin is the founder of Pro Blog Design. He works as a freelance web designer, loves WordPress, and has an unhealthy addiction to smilies. Written on 21st May 2008.
Other posts tagged with Achromatic, Color, Design, Minimalism, Monochromatic.
21st May, 1:06 pm GMT
Personally, I'm for any design that promotes the content.
Monochromatic design is good because our nature is to look toward those flashy design items, and being rid of those items helps enforce the content upon the reader.
21st May, 1:22 pm GMT
Sean,
Yep, the content should always come first. The monochromatic colors in your blog help that greatly. No distractions there.
21st May, 3:04 pm GMT
I think there is fine line between the two camps here. Monochromatic designs do tend to look tasteful (which is more than can be said for many sites!), but they can also be a little bit dull and dated looking.
Unless there are loads of crazy colours all over the place or undreadable text/background combinations I don't find color distracts me from the content, while poor layouts and typography definitely do!
21st May, 3:58 pm GMT
Hey there Michael, I literally was pouring some coffee about 5 minutes ago and I thought to myself "I wonder when Pro Blog Design will come up with another great post? It's been a while since I have read anything by Michael"... Sure enough I check my feed reader... It was a little freaky!
I really appreciate this article, because if there is one spot in web design I am (extra!) terrible at, it is color selections (partially color blind). I am always looking for good resources related to coloring my pages, and you have explained it very simply and well... Kudos my friend. Hope to hear from you again soon!
21st May, 4:32 pm GMT
Great post! It's nice to see a new one here for a change...
I'm a fan of monochromatic designs, though I think that they need a bit of extra color to keep them from looking, as you put it, monotonous.
21st May, 6:23 pm GMT
Sophie,
I agree entirely. Monochromatic designs do run a huge risk of coming off as plain boring. I suppose the boring design would let you focus on the text, but what's the point in a design at all if it's just going to be boring?
Tyler,
Sorry! It really has been far too long since I've written anything. I can't believe it was a full month!! I didn't know you were color blind though.
One thing that I thought of when writing this was that a monochromatic design could be more accessible to people with color blindness. Because the design relies on differences in shade, not differences in color, then the contrast would be the same whether a person could see the color or not.
I didn't have any data to back that up with though, so I left it out. Do you know if it's true or not?
Redwall,
I promise I won't let things go silent for so long again! xD
Thanks for the comment. I like a good mix of color as well usually.
21st May, 8:51 pm GMT
I'm a fan of monochromatic color schemes...I'm "color deficient" so the less colors, the less confused I become:)
21st May, 10:28 pm GMT
Michael: While my level of color-blindness is not nearly as bad as someone who is truly and completely color BLIND, it can become an issue at times.
For example, I am completely unable 90% of the time to distinguish navy blue, dark browns/greens from black. Many people have similar problems in the morning when putting on their socks, but usually it is because they are rushing to get ready. Not with me, I literally could stare at them for 10 minutes and still "guess wrong".
So your comment about shades being easier on the eyes than colors would be true in my case. Often times I will come upon a website which uses a dark color (that I have a tough time differentiating from black) as a MAIN background color, and the coloring for the menus/text/etc does NOT complement it well at all to *MY* eyes, even though the actual colors being used are complimentary...
I hope that made sense, it is difficult to explain!
So in conclusion, yes, shades of color are preferable to lots'o different colors in my book!
22nd May, 12:00 am GMT
I love monochrome, or achromatic sites!
I was going to say I had an achromatic one http://www.rikcatindustries.com/, but actually there's a color on hover effects and the blog titles are coloured.
22nd May, 12:26 am GMT
I'm definitely a fan of monochromatic design. I love minimal sites and I think that's why. I think they are definitely just as interesting as a colorful design.
22nd May, 12:41 am GMT
Tim,
So it makes the site easier for you to use? Sounds like more than enough reason to me.
Tyler,
Thanks for replying. I see what you mean now. Similar colors appear the same. I can already think of sites where that would make text difficult to read for you.
Monochromatic designs would hopefully steer clear of that problem. Thanks a lot for explaining!
Kristarella,
Haha - Yes, you would! Your previous blog designs definitely would have come under that category.
Rikcat is the closest I've seen so far! If I just don't hover on anything, and go no deeper than the homepage, then it's a winner!
22nd May, 12:44 am GMT
Deron,
Good good! Any favorites?
23rd May, 1:12 pm GMT
Ah, how did I know you'd ask me that? As I sit here and think about it, I cannot come up with any favorites off the top of my head. I'm sure if I didn't want to think of any I could rattle off five or so favorites.
23rd May, 1:40 pm GMT
Deron,
Ha, I know the feeling! I didn't think of any of my examples in the post offhand. I just opened dozens of design sites until I came across the nice ones.
24th May, 12:33 pm GMT
Michael, I stumbled upon Pro Blog Design a while back and have thoroughly enjoyed reading your practical posts, the comments, and even checking out the sites of the commenters to see how their comments line up with what their sites actually look like. That's been an interesting study in itself!
I'm not a designer, and hence am dependent on the designs of others. I have my own domain and am using WordPress and WP themes - of which I've tried many that, at the time, I really liked.
This spring I've been trying to work on making my blog as accessible as it can be to readers. I have gone to many websites and blogs that make me almost schizo - there's so much going on in the way of columns, colors, flashing ads, etc. that I have a hard time finding the content, let alone staying focused on it. I decided to look at my own blog - layout, font size, lack of distractions, navigability, etc. - and try to see it as a first-time visitor would, but in light of some of the things I'd been reading on various sights about readability/accessibility.
I'm currently using the 2-column version of the free theme Revolution blog theme. I have done a few tweaks to it for my purposes, but since I'm not a designer and my abilities with css are very limited, it's basically like it was out of the proverbial box. When I read your post that I'm commenting on, I thought of how the Revolution blog theme is really fairly monochromatic. One tweak I did was to change the color of when the cursor hovers over links from the green that it was to the orange in the RSS icon, thereby eliminating a color that didn't appear anywhere else in the theme.
Early this morning while I thought Internet traffic might be low, while the bulk of my US readers were probably sleeping in, I changed my blog theme to each of the themes I used to be enamored with, just to see how I liked my blog the various ways it used to look. I was appalled (!) and very happy to change it back to the way it is now. I am pleased with the readability and navigability of my blog as it now is. If anyone has any suggestions, I would be happy to consider them.
Many thanks to you and your readers for helping to get me to this point!
I've added Pro Blog Design to my bloglines subscriptions, so I should know when you post - which I hope will be more frequently!
Sorry this comment got so long....
24th May, 5:58 pm GMT
Rob,
Most bloggers aren't designers, so don't worry about that. But if you read around enough and you're happy to experiment with your blog to see what works, then you'll still end up with a good design.
Your blog looks good. The only suggestion I would make is to cut some of the clutter out of the sidebar.
e.g. The blog archives and calendar aren't needed (Does anyone ever use those?). And your categories section isn't need because you're tags section is so much more in-depth. Nor do you need the explanation in the "links" section.
I'd also remove the animated headbanging image (Or change it to a still image
) from the top of the sidebar. Animations are a huge distraction when you're trying to read an article. 
What do you think?
26th May, 2:16 am GMT
Thanks for your suggestions, Michael. It took me quite a while to give tags to all my posts that didn't have them so that I could do away with categories. You're probably right about the monthly archives. I had to modify something in my first post from last week because at one point I directed readers to the monthly archives to read about our teaching adventures in China in the summers of 2005 and 2006. Now they're pointed to the China tag.
I do want to leave the calendar, though. For one thing, it's very small. But also, I like to find a calendar on blogs I visit so that I get an idea at a glance about how often the blogger posts.
I moved the little guy banging his head on the keyboard to my About page.
Thanks for taking the time to look, Michael. Go back from time to time if you need some good laughs!
Rob
26th May, 4:43 pm GMT
Rob,
Cool, thanks for taking on some of my advice. If you like the calendar and think it adds to your blog, then by all means, keep it!
27th May, 4:44 am GMT
The monochromatic look alway looks cool. But making it work with shades is difficult for my eyes. The color combination bugs my mind.
4th June, 4:48 pm GMT
I like it! It's like hoku - no unnecessary words. This is a real harmony.
5th June, 7:54 am GMT
Hi, thanks, Nice article...
With let you I translate a large part of this post to Persian language in my blog. find it here:
http://weblog.alvanweb.com/200.....ful-place/
10th June, 5:00 am GMT
I think the color of a website depends upon the theme
If the theme is based on professional : then color should be white or blue
If the theme of the website is Party : Then the colors can be black
For a babies website you use pink
Etc
Why don't you take a loook at my award winning website : http://www.miraclestudios.in
10th June, 12:31 pm GMT
Nastya,
Hoku? What's that? Wikipedia says an American singer.
Alvanweb,
Thanks for letting me know. I don't mind, but please don't do it often!
Miracle Studios,
I agree that the color says a lot about the theme the site will give off, but it doesn't have to be too strict. Using different colors in a fresh way can give a really great effect sometimes.
10th June, 4:11 pm GMT
Michael Martin,
hoku, hokku, haiku - it's a Japanese short poem. It consists of 4 lines and is a very wise
10th June, 4:14 pm GMT
Nastya, what were you comparing to haiku? I didn't understand your reference. Was it to less colorful blog design in general?
11th June, 6:35 am GMT
Sorry, not 4 lines, but 3 lines
Rob, haiku (hoku) is very simple and clear poem. There is only a few words to convey the main thrust. Similarly, in the monohrom design. But the full design can also be harmonious. It all depends on the sense of proportion.
20th June, 6:44 am GMT
Monochromatic schemes make the site easier to read through and remember in a later moment.
Users tend to dislike too colourful schemes; moreover advertising works best on monochromatic scheme sites.
20th June, 12:34 pm GMT
Nastya,
).
Thanks for explaining! (Sorry I didn't see the comments until now
I get what ya mean now; that's cool! And I'm going to go Google a few haikus.
Andrea,
(But I suppose if it gets better CTRs, it might be worth it?)
The advertising might stick out like a sore thumb though? And at the very least, kill the minimalist effect.
20th June, 4:41 pm GMT
Michael, in return for your giving us such good information, here are a couple of sources of haiku for you:
Haiku computer error messages - http://archive.salon.com/21st/.....chal2.html
On my website:
Cat haiku - http://ivman.com/cathaiku.html
Dog haiku - http://ivman.com/doghaiku.html
21st June, 11:49 am GMT
Rob,
Thanks! I loved your cat one. I'm not sure if it has made me want a cat more or less though! Great work.
(And the mocking haiku computer errors are still more pleasant than the real ones we get!)
17th September, 5:39 am GMT
I just want to share a site which I think is relevant to this topic. I found it when I was getting inspiration for design color palettes.
http://www.colorhunter.com/
http://www.colourlovers.com/
Not exactly monochromatic but it does help figuring out color schemes without having it look like a badly done kindergarten.