Blog Design: Which colors do you use and why?

color wave
color wave

Color and emotions

Color is considered emotional, because variations evoke different emotions in people. We all know that green is the color of money and of nature, but did you also know that green can symbolize greed, envy, and jealousy? The colors you choose will have a direct effect on how the public perceives your company or product. This can be complicated by the fact that our use of color on the web is now limitless: technology allows us to create millions of color combinations. So how do you choose?

It’s important to understand that every color has a positive and negative set of emotions associated with it, what I call the “color meaning”. It’s this meaning that will affect your readers’ emotional response to your blog. So when choosing color schemes for your blog, you need to make sure you’re presenting your blog or brand with a color that will most likely encourage reader’s to choose your blog to read.

It’s also important to note that your color choices can present challenges to the visually impaired.

Cool Colors

Blue, green, purple, turquoise and silver are cool colors. Cool colors tend to have a calming effect on readers. Used alone however, these colors can have a cold or impersonal feel, so when choosing cool colors, it may be wise to add a color from another group to avoid this.

Warm Colors

Red, pink, yellow, orange, purple, and gold are warm colors. Warm colors tend to have an exciting effect on readers. However when these colors are used alone they can over-stimulate, generating emotions of anger and violence. When choosing warm tones, adding colors from another group will help to balance this.

Neutral Colors

Brown, tan, ivory, gray, black and white are neutral colors. Neutral colors are a great selection to mix with a cool or warm palette. They are good for backgrounds in a design, and also tend to tone down the use of other more overpowering colors. Black is added to create a darker “shade” of a primary color, while white is added to create a lighter “tint”.

Making color choices for your blog

Choosing color is more than just picking what feels good to you, it is about creating a response from readers. By knowing your target audience and the effect that different colors can have, you gain a greater ability to determine what colors will work best for your reading audience.

Color selection tools

Color wheels have been used for a long time but they are much easier to use today.  Color wheels have been used for a long time but they are much easier to use today. Check out this resource visibonecolorlab which lets you choose from the 216 color browser-safe palette. Here’s another color wheel and has a cool hovering tool that allows you select colors and then shades. And here are two more color tools you can use as well.

Accessibility

Aside from making your site accessible to visually challenged readers,  including those who are colorblind,  did you know that:

  1. An accessible website is more likely to be ranked well with the search engines than an inaccessible website;
  2. By designing a colorblind accessible website, you are also targeting PDAs, 3G phones, and similar technological devices that are used for web access.

Considering the Color Blind Design Evaluation Tool

Colorblindness

  • Color blindness (color vision deficiency) is a condition in which certain colors cannot be distinguished, and is most commonly due to an inherited condition. Red/Green color blindness is by far the most common form, about 99%, and causes problems in distinguishing reds and greens.
  • Another color deficiency Blue/Yellow also exists, but is rare and there is no commonly available test for it.
  • Depending on just which figures you believe, color blindness seems to occur in about 8% – 12% of males of European origin and about one-half of 1% of females. I did not find any figures for frequency in other races. Total color blindness (seeing in only shades of gray) is extremely rare.
  • There is no treatment for color blindness, nor is it usually the cause of any significant disability. However, it can be very frustrating for individuals affected by it. Those who are not color blind seem to have the misconception that color blindness means that a color blind person sees only in black and white or shades of gray. While this sort of condition is possible, it is extremely rare.

From:  Web / Computer Color Chart for the Color Blind

Colors and browsers

Readers use different monitors, different browsers, and different operating systems. It is nearly impossible to ensure that your colors come across the same on every computer as well as in print. Don’t be overly concerned with the differences on varying computers, but do try to be consistent.

What is the trend in browser usage?

Browser use web statistics and trends provide important information. From the statistics you can see that Firefox and Internet Explorer are the most common browsers. Note that the 19.6% who are using IE6 will always have problems as IE6 is a problematic browser.

Cross browser compatibility tools

It’s important to check and see how your blog displays in various browsers and there are online tools that you can use to do this:

browser shots
crossbrowsertesting.com

Discussion

I have previously posted a thread on this to The Blog Catalog forum that received over 200 comments and these were the questions I asked:

(1) Which colors do you use on your blog?
(2) Why did you choose them?
(3) Which color tools did you use to make your selections from?
(4) Did you check your colors for cross browser compatibility?

Related posts found in this blog:
Why having a well designed blog is important
Swing into Summer: New Themes and Headers

 

34 thoughts on “Blog Design: Which colors do you use and why?

  1. Thanks for this post. I see I still need to do even more tweaking. I tend to go for the darker colors only because I dislike white. To me it reminds me of apartment walls and cold snow. But I aim to please as wide an audiance as possible so, I must put on my thinking cap. Ill also add a reply to your comment over at the forum.

    1. Hello there,
      Pleased to meet you here on my blog. If you are so inclined to avoid “whiteness” you could choose a theme that allows for both a custom header and either a custom color or image background. Best wishes with your blog. :)

  2. Thanks for directing me here, TiTi; this is exactly what I hoped to find. Back to my private test blog now, swatches in hand…

  3. Thx for pulling up this article from the archival list. Appropriate when newest blog posts have been about changing themes.

    Red-green colour theme and particularily for critical markings should be thought through carefully. In some industries, it is important. I met an engineer who was unable to distinguish red-green colours. It affects distinguishing traffic signals, reading marked-up engineering drawing details, etc.

    That being said, perhaps my blogs aren’t entirely exempt from making it more challenging for red-green colour combination weaknesses for visual acuity.

    If one’s blog has a business purpose, where the aim is to captivate and hold the reader to read the blog’s text, then a black background with white text, is tougher on the reader.

    We now have to think of handheld mobile devices accessing the Internet. Why strain the client’s/reader’s effort to read?

    Exception would be for photo galleries and simply shots of artwork with hardly any text.

    In choosing presentation templates, blog backgrounds, etc. I try to consider calm background colours and font colours that have adequate contrast without hurting the eyes.

    There is an emotional play on the subconscious. Since our blogs are on cycling, everything related to it except for racing/competitive cycling, it was better we go in the direction of colours and themes that suggest neutrality, and yes, “greening”.

    The use of colour for electronic product design is one area I enjoy exploring and learning.

  4. Oh yes good point about the contrast! I have a natural connection to colour for some reason but Im only beginning to figure out the connection between emotion, colour and perception. Which is why I love your post about the readability experience for the reader It opened up my perspective which I really enjoy .

    And thank you so much for your positive encouragement!! Im really chuffed thank you, I will take your kind words with me and help me grow my blog. I am feeling more confident in writing lately (my earlier blog stuff is utter crap but Im still proud of it for some reason lol) and thats mainly thanks to all the help you and Panos and other volunteers share here. Im feeling more comfortable and not so scared to try new things thanks to your clear instructions and common sense advice.

    Im reading through your blog and Im really enjoying it, wonderful information suits me to a tee!! Im wondering how I missed it lol

    Thanks again, Im always learning here and its great!!!

    1. Like I said above your writing is excellent and the subject matter is important. The volunteers are ready, willing and able to help you in any way we can. Soar like an eagle in 2010!

  5. I’ve always preferred dark background on my sites mainly because I always feel safer (too complicated to explain) but I did not know it was difficult to read.

    I will try and lighten the text color on my blog, thanks for the information. Its good to get a better understanding of readers experience, I blog for myself but I would like any readers to be comfortable when they pass through.

    Thanks for this post, I’ve learned a lot from your blog and I appreciate it.

    1. Hello there and thanks so much for the feedback. Please understand that I am an artist and I know quite a lot about colors, as well as, being visually challenged. I actually like the color black, however, unless the font used against it is pretty darn close to being white then there is a reading challenge involved. Lack of contrast causes a problem.

      When we first begin a blog we create an appearance that we find personally appealing. As time passes we can adjust to create a welcoming and comfortable environment for readers, one that makes it easy for them to choose to stay awhile and read content.

      Edit:
      I just came back from checking out your blog. It’s very attractive. The fonts are not that easy to read but the subject matter is loosely connected to my personal blog, and the quality of the writing is so excellent I’m subscribing via email.

  6. Another recent Vigilance convert here, with the CSS upgrade. I love it!

    The only problem was it took a bit of doing to find the original stylesheet.

    1. I love it too. The only thing I miss in the wordpress.com version is the ability to insert a 250 pixel (height) by 300 pixel “box” above the wide sidebar. The box will display images, text and/or videos. You can see what I mean if you click through to my self hosted wordpress.org blog http://thistimethisspace.com Also note that the wordpresss.ORG version has rotating headers above the Alert Box.

  7. Which color do I use?

    I was looking through the available 77 themes at wordpress.COM. My goal was to coordinat a theme with the photo that I’m using for a header. It was interesting to notice that Cutline, PressRow, and Benevolence seem to work best. I’m not sure of the background color for Benevolence, though. It looks black to me.

    I have another issue to consider. I am visually impaired, too. Thanks to my screen magnifier, it is easy to read text. I will agree with you that white is a great background color, if only for the contrast. Fonts are another item. They are an additional factor when improving the readability of a blog.

    Hence, my appreciation for Cutline. I’d love to get a second opinion on the other two themes I mentioned.

    Keep up the good work!

    1. @Barry
      There is a complete list of the themes at wordpress.com that allow for customized headers as well as the correct sizes for the headers in the support documentation. http://en.support.wordpress.com/themes/custom-header-image/ The themes are all accessed here -> Appearance-> Themes

      Note that if you do choose to purchase a CSS upgrade and edit the stylesheet that your header image cannot be uploaded as previously. The url for the image must be placed in the CSS in the correct position on the stylesheet.

      Regarding Cutline and custom image headers there’s a post you may want to check out here on my blog https://onecoolsite.wordpress.com/2009/04/17/personalizing-your-wordpresscom-blog-part-2-custom-image-headers/ Regarding Pressrow, a theme that’s also created by the same web designer as Cutline, Chris Pearson, I have no visual difficulties with it either. Onething I like about Cutline and Pressrow is that they have sidebars on the right hand side which tends to be better for SEO (search engine optimization). One thing I do not like about them is the placement of the static page tabs above the header.

      As for Benevolence I find the font sizes to be very small and difficult to read so I hold down the ctrl key down and click the + sign on my PC to increase the size. I dislike the capitalized font in the sidebar, I dislike the red font used in the links, and I dislike the black background as well. To me this theme looks very “dated”.

      In fact, I would not choose any of the three themes you refer to as I believe that Vigilance, which is the theme I am using, is a more accessible theme with more customizable options than all the other themes currently available to us at wordpress.com.

      1. Thanks timethief,

        So, I’m not the only one who had some problems with Benevolence.

        I will investigate Vigilance on my test site. Yes, I set up a ghost blog. :)

        1. Thanks for pointing me to Vigilance. :) Plus, thanks to my graphic editor I found just the right colors for the link.

          It is true what you were saying earlier about color. They even go so far as to improve readability!. This is what happened when I changed the font color for the link. The body text is fine.

        2. @Barry
          I think your blog has a better appearance in the Vigilance theme. I notice that in “What’s in a name?” you are missing the “y” in the word variety. Here a link to the visibone color lab http://www.visibone.com/colorlab/ I believe the blue you have used for your links is too intense and does not coordinate with the blue found in the header image. I would use this color in it’s place 6699CC.

          Also click the lettering in the header image in this blog. When you do that you will find it’s a permalink. This is an important link. By choosing to place your blog title on the image itself you gave eliminated that link. I would make the opposite choice. I would upload a header image without the lettering and use the option to “Select a Text Color” in the custom header image instead leaving the permalink in the header intact. Search engines cannot “read” images. They can however locate links and this blog title link in the header is the most important one in your blog.

  8. (1) Which colors do you use on your blog?
    I use for my blog black, green, and white colors

    (2) Why did you choose them?
    Because I like this combination

    (3) Which color tools did you use to make your selections from?
    I’m not using any tool.

    (4) Did you check your colors for cross browser compatibility?
    I think that the colors are not the problem for cross browser compatibility .

  9. I rather to use light colors, well it always depends on the purpose of the site but I mean light colors are more friendly and even better on web design.

    Craig Miller

  10. I have a photo blog and I use dark gray background with light gray & orange fonts. I’ve noticed that with either light or dark images, this combination works well…I think.

    1. @dan
      I’m visually challenged and although the combination probably works well for those who do not have issues with their sight it’s not a good choice for me. The gray font on the black background lacks contrast. I have to strain to read the text and that makes my eyes tired. It also makes me feel frustrated so I gave up reading. If you could lighten the gray so there is more of a contrast with the black background that would improve my reading experience.

  11. hmm..if someone asking me “Which colors do you use and why?” for sure i answer BLACK and the reason is dunno LOL. I’m comfortable with black color. Even for the first time blog i use black color. Is it weird ?

    1. devilnoangel
      It’s very common for younger bloggers to choose a black background. In the case of your blog the font color has enough contrast so that the blog is readable. In many other cases on other blogs there isn’t enough contrast between the black background and the font color for visually challenged people to be able to read with ease.

  12. I posted a comment on your broadcast about site colors. then followed the link here. thank you so much for the information it has been a great help. If you get a chance please let me know what you think of the color choice on my blogs.

    Ron

    1. Ron,

      I think your website is pretty cool; nicely set up. My only suggestion for your mostly informative site is to use white or light color for the background of your blog post since you have a lot of text. Makes it easier to read. Keep blogging about one of my favorite topics!

    2. Hello Ron,
      Although your blogs both have black backgrounds they are readable. There is enough contrast between the font color and the background. I understand why you chose the deep greens for your gardening blogs and the gold/ornage is a nice touch too.

  13. (1) Which colors do you use on your blog?
    All of my blogs have ended up being some combination of orange/green/white

    (2) Why did you choose them?
    I just personally find this combination visually pleasing (nice to read that orange is good for selling stuff though!)

    (3) Which color tools did you use to make your selections from?
    I’m not sure. I think each blog had its own colour tool option.

    (4) Did you check your colors for cross browser compatibility?
    Nope. I did check to see that the blogs looked the same on different browsers (FF, Chrome, Safari & IE) and usually had sidebar problems with IE, but didn’t notice any obvious colour differences.

    1. @azahar
      Hello and thanks for commenting. Your blog theme is readable, accessible and easily navigated. The color choices are IMO good ones too.

  14. (1) Which colors do you use on your blog?
    I use #313131 as my bg color, #fbfbfb, and some purple, I forgot the hex… LOL

    (2) Why did you choose them?
    Coz I copy it from envato and manipulate it a bit. Just to try if my skill is enough to make the exact same one.

    (3) Which color tools did you use to make your selections from?
    Photoshop rules !

    (4) Did you check your colors for cross browser compatibility?
    Nope… :), coz it’s not a problem….

    1. @Hi Sayz
      It’s good to hear form you. Your blog theme is every readable and I have no trouble with it at all. Well done and best wishes for happy blogging. :)

  15. (1) Which colors do you use on your blog?

    I do photo blogs. So most of my blogspot photoblogs have a simple black background which is a good choice to provide high contrast to any images posted in the blogs regardless whether the posted images are dull colour, fuzzy or unclear.

    (2) Why did you choose them?

    Black colour in photography terms means “negative space” where attention is easily directed to anything other than black. So good for photo blogs.

    (3) Which color tools did you use to make your selections from?

    This is a simple choice and there is nothing tough about it. I adopt the approach to use white bars against black background.

    (4) Did you check your colors for cross browser compatibility?

    No, Black colour is not a concern across browser compatibility

    1. @roentarre
      Thanks so much for your comment and for your guest post too. Weekends are always slow on my blogs and this one has been almost dead. Let’s hope that Tuesday brings a change of pace.

Comments are closed.