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 have moods: warm, cool, neutral
Colors can also change moods as you brighten or darken them or pair them with other colors.
For example, a 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.
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
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
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).
Hexadecimal Codes
Hex codes are used in HTML and are a combination of RGB (red, green, blue) values.
They are 6 character codes, 0-9 and A-F, with a hashtag (#) in front of them.
The first two characters define the Red values, the next two characters define the Green values and the last two characters define the Blue values.
The lowest value that can be given is #000000 (black) and the highest is #FFFFFF (white).
Choose Your First Two Colors
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 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.
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.
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.
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!
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.
I’m so glad this helped you to pick a new color scheme! Let me know if you need any more help or feedback! 🙂
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.
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!
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.
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?
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?
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 🙂
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.
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!
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!
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!
That’s great Laura! Glad this could help you in other areas of design than you’re used to! 🙂
Thank you for this article. Very helpful indeed especially for the beginners like me. Thank you. Keep it up.
I’m so glad Sandara, thanks for the comment!
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!
Aww thanks McKenzie, I appreciate that so much, I hope it helped you choose your own color palette!
Perfeito grandes noevidades
Great Tips! It is interesting to see peoples likes and dislikes concerning colors. Thanks for sharing!
Hi Marianne,
Thanks for sharing some amazing tips. Your ideas helped me design my blog “Cherry Times”. Thanks again.
Cherry Times Admin
Hi Marianne 🙂
Many thanks for this great article about color means 🙂
Oz.
You are very welcome, thanks for reading and taking the time to comment.
Hi Marianne,
I have been looking for a long time the tools you mentioned in your blog. Thank you so much for the idea of such wonderful tools.
We all have colors in front of us but most of the people don’t know the use of color combination. This idea will benefit them lot. Thank you so much for publishing such a beautiful and informative article.
I’m so glad you found it helpful Vasilica, thanks for taking the time to let me know!
Hi,
Your blog is very interesting and heart touching.
Thanks for sharing.
Hey everyone! I really wanted to make my site by myself – taking into account my preferences. But I also wanted the design of my site to appeal to visitors. I have tried many patterns and combinations. Thanks for your advice guys! With this article, I found a solution that I really like!
Can you suggest me , what would be the best colour for spiritual blogs?Actually analysed my competitor and used the similar color of what they are using. But the problem is they look alike. I want to make something different from my competitor .Currently I am using violet shades.
Hi Sayan, most spiritual blogs use shades of purple, but I think using blues and pinks would also work. Anything that feels ethereal to you.
Hey Marriane , your blogs colour compatibility is awesome. Can you provide me the color code and the theme details what you are using?
1) Palette outline the 60 30 10 ratios: The most effective website and apps color scheme will follow a 60- 30- 10 ratio.
2) Focus on grayscale first: Once I have my color palette ready, the next thing I do is wireframe my design.
3) Stay away from pure grayscale and black: One of the most important color theory tricks I’ve learned is to avoid using gray colors without saturation.
4) Final thought: Color is a tricky concept to master, especially in the digital space.
Thank You for such a wonderful article. I am beginner and it has helped me a lot. I found many useful information.
Thank you for this article. A great tool for finding a pallete is colorsforwebsites.com. This helped me a lot!
Thank you for the great article and it was def helpful to see graphic examples. We are currently in the process of designing our website and our main theme color is greenish from the logo. Any tips to make it more pop since it is mostly a dull color but we do plan to use it around all website hyperlinks, menu hover, etc. Thank you