Ultimate Guide to Choosing Colors for your Blog or Website

Ultimate Guide to Choosing Colors for your Blog or Website
Ultimate Guide to Choosing Colors for your Blog or Website from http://www.DesignYourOwnBlog.com.

Ultimate Guide to Choosing Colors for your Blog or Website

Choosing the right colors for your website or blog is more than just picking a few favorite colors and tossing them in. Colors should match the mood of your site and combinations should be well thought out.

There is also a balance to picking colors that not only please you, but serve your audience as well. Follow this guide and you’ll soon be on your way to choosing a great website palette that everyone can be happy with.

Stick to a 3-Color Palette

In general, it’s best to keep to a 3 color palette for your website aside from black, grey and white. Any more than this and your site may start to look chaotic.

Start by picking 2 colors that go well together, then pick a third color as your accent color (more on this in a bit…)

To choose the first two colors, start with the colors in your logo if you have one. This will keep your branding consistent. If your logo doesn’t have colors or you don’t really have a logo, you’ll have a little more work to do in choosing your colors.

Rather than choosing your favorite colors, you want to think about the function of each color you choose first, as opposed to the aesthetic quality. Choose colors that reflect the “feel” of your website, colors that are appropriate for your audience. 

When choosing colors for your designs, be deliberate; don’t use colors without purpose.”
-Source: Shannon Noack

How do you choose colors that are appropriate for your audience?

Colors have a mood. 

For example warm colors evoke outgoing, energetic and happy feelings:

Cool colors tend to have a calming or reserved effect:

Neutral colors on the other hand don’t evoke much emotion:

Colors can also change moods as you brighten or darken them or pair them with other colors.

For example, a navy blue is considered to be reserved and trustworthy, which explains why a lot of banking and financial sites use it. A light blue could reflect peace and freedom, but a bright aqua becomes happy.

Now if you were to pair the aqua blue with an orange, you‘d be conveying a fun energy! Perfect for a site about beaches!

Colors and Their Meanings

Different colors can have drastically different meanings. Even still, shades (colors mixed with black) or tints (colors mixed with white) of one hue (pure color) can completely change those meanings. Also the colors you choose to pair them with can also create entirely different meanings.

For a quick chart on the basic meanings of different colors, download my free ebook: 3 Ways to ROCK Your Blog Design Now! Just subscribe here and you’ll get the free download immediately.

Gender

Gender has a huge influence on color preferences:
Women in general respond better to softer colors and tints, while men prefer brighter colors and shades.
Take a peek at the True Colors Infographic by KISSmetrics for more details about gender color preferences.

Start looking at sites in your niche or main topic to identify common color schemes

Or look at packaging designs for products in your niche category. For example, if your site is about eco or natural living, you’ll most likely see a trend of greens and/or brown color schemes.

Look for Common Color Schemes in Your Niche - Choosing Colors for Your Blog at DesignYourOwnBlog.com

Look for Common Color Schemes in Your Niche

Or if your site is about beaches, you’ll probably see a common theme of blues, yellows and oranges. However, if your site is about fashion or crafting, you may not notice a common thread between color schemes, but you will find that the colors chosen (in well designed sites) usually reflect the mood or content of the site.

Do a little research on your niche on the web and don’t worry about looking like everyone else. The idea here is to get a feel for the basic color schemes that seem to attract the type of market you’re going for. Then you can play around with varying tints and shades to get the perfect color combination for your audience that’s not a copy of what everyone else is doing!

Look Towards the Photographs You Use in Your Site

Choose colors from photos on your site, for example these vintage colors. From http://www.DesignYourOwnBlog.com.For example, if you tend to use a lot of photos with a retro, Instagram look, you’ll probably want to use softer, vintage colors for your color palette.

To help you find color schemes based on a favorite photo, Pictaculous has a great tool for this: Upload a photo and it will spit out a palette of the colors used in that photograph, complete with the hexadecimal numbers (see right) for those colors.

The cool thing about Pictaculous is that it also suggests similar color schemes from two of the big color theme sites:
Adobe Kuler and Color Lovers.

Which brings me to my next suggestion…

Browse Color Scheme Sites for Inspiration

In addition to Adobe Kuler and Color Lovers mentioned above, take a look at these great color tools and resources. You may just find a color palette already created that really speaks to you (and your audience).


Choose Your First Two Colors

Analogous & Complimentary Colors on the Color Wheel. From http://www.DesignYourOwnBlog.com.When choosing your first two colors, it’s best to pick colors that are adjacent to each other on the color wheel.

These are called analogous colors. Choosing colors that are a slice or two over from each other will automatically blend well together.

The colors you choose should also be on the same “ring” (hue, shade or tint) or within a ring or two from each other.

Choose An Accent Color

Next, you’ll choose an accent color. This color will make your color palette “pop” and should be used in areas you want to draw attention to, such as emphasizing a call-to-action button or a sign up form.

This color should be brighter, bolder or darker in order to stand out from the first two colors you’ve chosen.

An easy way to choose an accent color is to choose a complimentary color. Complimentary colors are those that are on opposite sides of the color wheel.

Taking a look at my website here, you’ll notice that my main colors are mint green and spring green and my accent color is orange.

Although orange is not technically a compliment of green (pink is), it is near by on the color wheel and I’ve made it brighter to help it stand out a bit more without being too jarring.

The orange draws attention to the things I want you to notice when you’re visiting my site, like my email opt-in forms, call-to-action buttons and the headline on the home page.

Color Picking Tools to Help You Find Analogous or Complimentary Color Schemes

Web Colour Data for DesignYourOwnBlog.comWeb Colour Data will give you the hex codes used in any site as well as the colors used on the color wheel so you can see where they are in comparison to each other. Shown at right is the color data for my site.

It also shows you other sites which use similar colors. Try plugging your site in to see what other sites use similar colors and if you like the look and feel of those. Pay attention to the sites’ target audiences.

Another great tool is the Color Wizard. If you have one color that you’re sure you want to use but are having trouble picking colors to go with it, you can plug that number’s hex code into this tool and discover all sorts of color schemes based on the parameters you choose.

Finally, Add Tints + Shades

Now that you’ve chosen your 3 main colors (3 analogous colors OR 2 analogous colors + 1 complimentary color) start using these colors throughout your site.

You may find that you need darker (shades) and lighter (tints) versions of these 3 main colors to create contrast or draw more or less attention to something.

Play around with the colors until you find something you really like, but try not to use too many variations of your 3 main colors, else your color scheme starts to look too chaotic.

UPDATE 11/20/13: I just discovered a new interactive website that also helps to explain color well. It’s worth checking out! rocket-design.fr/color-template

View the DYOB Color Series to learn more about specific colors.

Please share your color scheme with us below (list your hex colors or provide a link in your comment)!
Do you have questions, comments or need a little guidance? Please comment below, I make every effort reply as soon as possible.

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!

Powered by ConvertKit
Mariannes signature for DesignYourOwnBlog.com

26 Comments

  • Rudd says:

    Thanks for some great tools you mentioned in this blog post. Color is one of the area I’ve been struggling with. Sometimes when I got the right color for the design, I’ve no idea on how to use them to mix together and often leads to only color being used most of the time and the other two colors just on the minor parts such as border, button etc.

    ps: I’m working on new custom Genesis themes.
    Rudd recently posted…How to Change Depth WordPress Threaded CommentsMy Profile

    • Marianne says:

      Hi Rudd!
      I’m so glad you liked the tips I provided. Color is a hard one to figure out on your own, but once you start learning the basic principles of it, it gets a lot easier to figure out a nice palette.

      I love Genesis, so right on about your new themes!

  • Viviane says:

    Great information about colors, this is a very difficult subject for a newbie like me. After reading your blog I have selected a new color scheme. Thanks.

  • Thanks for these great tips, I have saved your site to my favourites, you have some great advice. Sufficed to say I am never happy with my blog and always tweaking so I can’t wait to try some of your tips.
    Barbie Bieber and Beyond recently posted…Top 10 Films for Valentines DayMy Profile

    • Marianne says:

      Oh gosh don’t I know it! I’ve spent so much time tweaking mine and I still don’t like it haha!

      Im so glad you find my advice useful, thank you for letting me know, it means a lot!

  • Raspal Seni says:

    Hi Marianne,

    This is a very difficult subject, at least foe me. My main blog is about blogging and I didn’t think much when I chose a few colors. Only recently, I removed most of those colors after a reader told me, my blog was difficult to read due to so many colors. I still have 2-3 colors other than black and white, but I was suggested a color scheme like Jeff Goins or Jon Morrow use – just one other color in addition to black and white.

    I tried to minimize the font colors used for the blog pages but old posts still use some green and red and even blue. I loved to use the three primary colors more, for some reason. I even used lime green for highlighting the start and end paragraphs. It was difficult on the eyes and I still need to edit old posts and remove these colors, since I manually colored those paragraphs.

    It’d be difficult for me to choose 3 pallete color scheme like you said. Can you help me a little, here? I do like complete black and white only color scheme as it looks professional, along with big fonts which are easy on the eyes.

    Now, the pages at RaspalWrites.com I wish to keep at this domain (making it just my writer website), and move the blog part to another domain I recently purchased. RaspalWrites.com/blog would point to the new domain, but I could use the three pallete scheme for the new blog and keep the writer site just black and white.

    What would you suggest? Would appreciate some help here, but take your time to reply.

    • Marianne says:

      Raspal, color can be very subjective so it’s difficult for me to say what you should use exactly. I would start by looking at other writer sites that you admire (the sites, not the authors!) and see if there are any common color themes going on.

      That said, I think that sticking with the black and white and one other color is a good idea. Red is a pretty heavy color (see http://designyourownblog.com/blog-design/color/using-red-in-blog-web-design/) and you might consider using just little touches of red here and there or a softer color to make it easier on the eyes.

      Does that help?

      • Raspal Seni says:

        Hi Marianne,

        Thank you for your valuable reply! I’ll check out some more writer sites right now.

        Jeff Goins’ writer site and blog I do admire. He uses just black and white and a red for the titles and text in the sidebar. Even his headshot background is red.

        On Writetodone (the biggest writer blog), it’s light blue/blue gray along with black and white. In the top bar and optin form, there’s a red though. The blue color used looks pretty dull to me.

        Carol Tice’s writer site uses two green shades (one is a cool one) in addition to the usual blak and white. On her blog though, she has two reds instead.

        Alexis Grant uses blue and gray shade on her writer site. You may know most of these, I guess.

        These are very good writer sites and blogs and have won awards in the last 3 years from writetodone. So, I’d guess I can use the red but change the shade. And if I need an additional color (for example to highlight something), I could use a cool green which is easier on the eyes.

        Does that make sense?

        • Marianne says:

          Raspal, those are all pretty nice looking sites. I don’t know that I like the amount of green on Carol’s but at least it’s a nice green. I think Jeff’s site is really well done with the use of red. See how he uses little splashes of red throughout so as not to make it overwhelming?

          It’s a nice contrast and would be quite useful to use to draw attention to things like subscribe, submit or buy buttons. Or even a feature you’d like to draw attention to.

          I think that Alexis’s site is really nice. It feels very refreshing too. Just a thought. The nice thing about blog design is that it’s never done! You can keep changing it as often as you’d like 🙂

          • Raspal Seni says:

            Yes, I agree – the design is never completely done. Carol herself mentions, she’s not satisfied with the design yet.

            I’ll go with Jeff’s color scheme and as you said, put little splashes of red. I love the Red-on-White buttons changing to White-on-Red, on mouse-over. Will do it the same way.

            I do like the design on Alexis’s site, especially the top three widgets draw readers’ attention. And, the navigation menu is invisible until you click the “Meet Alexis” link.

            Thanks a lot, Marianne! Appreciate your help a lot.
            Raspal Seni recently posted…How to Start a Blog/Website on a Shoe-string Budget?My Profile

  • Stacy says:

    I’m working on another blog and have been referring to this post on colors all day. As always, your site is an invaluable resource for bloggers. Thank you for the gift!
    Stacy recently posted…Color my bath water!My Profile

    • Marianne says:

      Wow Stacy you’re taking on another blog?? How do you do it? Looks great so far, I’m so glad this has been helpful. Thanks again for letting me know! Flattery gets you everywhere! 😉

  • So happy to have found your blog! I have been struggling trying to figure out the design aspect of blogging! I was scared of using color and my blog just seems so gray, literally! Thanks for all the great tips and tools!
    Margaux Daughtry recently posted…Book Review of “Young House Love” by Sherry & John PetersikMy Profile

    • Marianne says:

      Hi Margaux! Glad you found this then and can’t wait to see what you come up with for a color scheme. Please do share it when you do !

  • EXCELLENT post, Marianne, and oh so helpful. As you know, I select paint colors for homes, but have no idea what works for websites. I plan to put this info to use in the near future!
    Laura Brzegowy recently posted…This Works Thursday #13My Profile

  • Sandara says:

    Thank you for this article. Very helpful indeed especially for the beginners like me. Thank you. Keep it up.

  • McKenzie says:

    This is an amazing post with so much valuable information on choosing color. I love how you incorporate the importance of meaning with color. Thanks for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge