Tools For Choosing a Color Combination
Guest post by Steven Snell.
As new visitors arrive at your blog, color is one of the most important design aspects for creating a positive first impression. Last week Michael wrote about the importance of making your blog template unique. Effective color modifications can be a quick, easy way to help your blog stand out from the crowd, especially is you are using a very common theme.
Fortunately, there are a number of free tools available online that can help with finding the right color combination. We'll take a look at a few of them and hopefully you'll find something that you would like to use for your own color decisions.
Color Schemer Gallery
The color scheme gallery is a resource that allows users to submit color schemes that they have created. Visitors can then browse through the schemes and find something they want to use (and they can also rate schemes on a 1 to 5 scale). This provides a quick way to find a color scheme that you like, as opposed to old-fashioned trial and error on your own design.
The scheme gallery can be sorted by rating, date of submission, or number of downloads. Schemes also have tags that allow you to search if you have a particular style you are looking for. At the time of this writing there are over 2,700 color schemes in the gallery, and more are constantly being added.
This can especially be a great tool if you are starting from scratch and you have no idea what colors you want to use. Find a few that stand out to you and see how they work with your blog theme.
JavaScript Color Picker
If you want to get an idea of how color combinations will look in a design without making a lot of changes to you CSS file, try the JavaScript Color Picker. With this tool you'll select a background color, text color, link color, and visited link color. Your selections will immediately appear in the frame so you can see how they look together. You can then make adjustments be changing one or more of the selections.
Although the display you are seeing on-screen with this tool is very basic, it will still give you a good idea of how the colors work together. You'll still have to try them out in your blog theme to make sure they work well together, but this tool can save you some time by eliminating combinations that just don't look right.
Color Palette Generator
A different idea for deciding on the right color combination is to find photos that display excellent colors that you would like to use in your design. The Color Palette Generator at Degraeve.com will allow you to enter the URL of an image, and it will show you the colors, along with their HTML numbers, that appear in the image.
Try this tool with a few images that you like and you may just find the right color combination for your blog. If the image you want to use resides on your computer but is not online, try What's Its Color?, a similar tool that allows you to upload the photo you want to use.
I Like Your Colors
Have you seen another blog or website that uses a color combination that you really like? I Like Your Colors is a tool that will give you the HTML numbers of colors used on a particular website. Just type in the URL of the page and it will quickly check the page and its CSS file and display the results.
Be careful not to copy the exact colors used by another website, rather use it as a starting point for creating your own color combinations.
Hopefully with these tools you'll be well on your way to customizing your own blog theme that will help visitors to remember you and to stand out from the competition.
Steven Snell is a web designer for Vandelay Website Design. His blog is updated regularly with articles on design, marketing, SEO, and blogging.
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 5th September 2007.
5th September, 12:22 pm GMT
A good entry and color is indeed one of the ways to stand out of the crowd, asides from just using free tools though reading up on some basics of color mixing and combinations might also help a lot when it comes to picking colors yourself without having to rely on tools too much for the job
.
5th September, 1:33 pm GMT
Thanks for the great additional resources! I often find myself torn about what color to pick and how they relate to each other and the overall site design.
One great resource I often use is Colors-on-the-Web:
http://www.colorsontheweb.com/
This allows a lot of functionality in picking different hues, saturations, etc. and also has a color contrast tool.
Hope someone finds this one useful too!
5th September, 3:15 pm GMT
Slevi - That's true. A good understanding of color will always be fundamental in choosing a scheme.
Elliot - Thanks for sharing the link. Looks like another great tool.
5th September, 3:36 pm GMT
color theory was one of my favorite classes in college. I love color. This was a good reminder for me to stretch myself in the area of combinations and not get in lazy ruts, thanks
5th September, 3:50 pm GMT
Color schemes are one of the things that I'm almost blind on. I just can never decided.
Thanks for the quick rundown of tools.
5th September, 6:46 pm GMT
There's some great info there. I spent forever working on a color scheme for my site and these tools would have come in handy. Whether I found the right colors is for another day....
5th September, 7:05 pm GMT
Great link elliot, didn't know about that one yet. The random spin is a bit annoying that you can't adjust the values manually to at least set one or 2 colors but the other 2 things definitely are nice
.
5th September, 7:06 pm GMT
Mommy Zabs - It's fascinating how different colors interact with each other, and how people react to different combinations.
Liberty - You're not alone there. With the right tools and advice though, it's not too hard to pick out a good enough combination.
John - lol - Fingers crossed ya did!
5th September, 8:43 pm GMT
Another good tool to use is http://www.colourlovers.com/. It has a really nice interface.
5th September, 8:56 pm GMT
I love that site David! It's just a shame that it usually takes a fair amount of time to load each page.
For that reason, I like the Adobe Kuler color gallery. It's very fast.
5th September, 11:55 pm GMT
Michael,
Thanks for posting my article!
Elliott and David,
thanks for the additional tools.
John,
I think your colors look pretty good. The pictures in the posts add to the colors as well.
6th September, 12:13 am GMT
Steven - Thanks again for writing. It was a great article, which I'm glad you shared with the readers here.
6th September, 1:30 am GMT
You're welcome!
I'm a newer reader to your site, and have found a lot of useful information, so hopefully I can contribute more often!
By the way, here are a couple more:
http://www.wellstyled.com/tool.....ex-en.html
http://www.colorcombos.com/
These are both neat sites to play around with.
6th September, 2:11 am GMT
Thanks for the vote of confidence Stephen. And I like your site Michael, I just subscribed.
6th September, 2:12 am GMT
** Sorry I misspelled your name Steven.
6th September, 2:43 am GMT
I purchased a simple color wheel for myself at a craft store so that even when I'm not at teh computer I can check out different color combos and guidelines (complementary, adjacent,etc).
Also, a good tip is the Firefox extension called Web Developer (no association with me). Select "Information" , then Choose "color information" and you'll get a new tab with blocks of each color used as well as the HTML code for the color.
6th September, 3:49 am GMT
Great resources there, Steven. They will come in handy to me when I decide to do some tweaking with my blog themes.
6th September, 4:02 am GMT
I like that colour schemer gallery - very nice!
I was going to mention Kuler as well - half the time I go there it tells me to get the latest Macromedia Flash plugin, even though I updated recently... I tend not to go there very often.
The Well Styled Color Scheme Generator is a nice one that my mum actually put me on to.
You can pick one colour and choose different colour styles to make a scheme (e.g. contasting colours or different tones of same colour).
While we're talking about colour, there's a very cool movie about colour!
6th September, 4:35 am GMT
You have a great looking blog here with great content!
I got here because you commented on my blog
I'll check out your blog from time to time.
6th September, 4:53 am GMT
Kristarella,
I also like the well styled color scheme generator. Thanks for the feedback.
6th September, 2:20 pm GMT
I believe this is after I asked about a color scheme....
6th September, 3:38 pm GMT
John - Glad to hear it. Hopefully I'll be talking to you on a few others posts as well then in the future.
Suzanne - I forgot about that one! When I first installed the toolbar, I tried out everything, but over time I've gotten into a rut of using only a few of its functions. Thanks for reminding me about it.
Kristarella - The Well Styled tool would be my tool of choice tbh. I love how it can work with triads and analogic schemes, and then you can tone it. It's a very fast way of getting a base color scheme which you can then tweak.
Sean - Cool. See you around!
TechZilo - Do you mean that you asked Steven? I can't remember you asking me (I keep a list of all questions asked, incase some of them would make good posts). This post was all Steven's idea.
6th September, 3:52 pm GMT
Elliot - Thanks! I'm glad you found it useful, and I do hope that you'll join in around here. Always fun to hear other people's input.
I love the tools you've found. WellStyled is a favorite of mine (As I mentioned to Kristarella), and Color Combinations looks like another great tool. There are a lot of fantastic tools out there!
7th September, 7:55 am GMT
I have used color schemer but never tried others.
9th September, 12:47 am GMT
Steven,
This is an unbelievably helpful post. Thanks for sharing these tools; I never would have found out about them otherwise.
*I also subscribed to this blog as well.
Tay
9th September, 2:32 pm GMT
Thiru - They're all good tools, but if you have one that works for you already, then stick with it. After all, they're just tools. Most of the work is still up to you, no matter which tool you use.
Internet Blogging Resources - Glad to hear it. Hope to see you around again!
12th September, 10:24 pm GMT
Thanks for posting these. This is one thing I have struggled with is color schemes.
12th September, 11:16 pm GMT
Glad you found them useful!
21st February, 11:50 pm GMT
Is it ok to use a different color for use in the header image? Or does that really take away from the design?
22nd February, 7:19 pm GMT
Mattheous,
It all depends on the design. In most cases however, the header is one of the easiest places to use a different color, and it makes a great contrast between the header and the content (2 sections which should stand out as separate).
Of course, you still have to be careful with which color you pick, and it's good for the color to be used at least a little elsewhere in the design (e.g. the bullet points).
22nd February, 9:33 pm GMT
Ok, thank you!
22nd February, 10:08 pm GMT
No prob. Good luck!
23rd August, 2:25 pm GMT
For a designer, sometimes its hard to find some good color combination for theme base designs. Thanks for your post. It helps me to find out some good sites for choosing color combination.
Best Wishes,
Roxy
Web Designer
3rd October, 1:52 am GMT
Hi,
I am a real newbie,starting to design a jewellery store at above website, but you have given me lots of tips.
Thank youso much.
28th October, 8:19 pm GMT
I think adobe offer the best colour combination tool!
24th December, 1:59 pm GMT
thx for such a useful information...:)
thankx a lot
16th February, 10:44 am GMT
Very good post - not only because I enjoyed it but also because it gave me food for thought. Your post just sparked an idea for a woodworking project I've been contemplating. Thank you so much.
Stumbled it!
25th March, 5:24 pm GMT
Good advice, color combinations are a very important part of good web design
4th June, 11:35 am GMT
Thanks for the advice