Color, Color Everywhere – Website Color Tools

Website Color - a guide to color on websites with color tools
Whether you planned it or not, your website is brimming with color. This post will talk about website color and guide you in making choices that your readers will appreciate. Colors on the web exist in images, video and in the text. You can manipulate the color in the web text by changing the CSS (Cascading Style Sheets). When you add images to your site, choose ones that don’t clash with your overall color scheme. On this blog, I purposely chose a lot of grays for the header, sidebar and subtitles, so the colors in the imagery I put on the post stand out more.

An important fact to know about color on the web is that the colors are represented in hex. This means you will see the color written with 6 numbers and/or letters, like this: #ffffff. Sometimes it is written in shorthand, like this: #fff. All those f’s are for white. Black will be shown with a bunch of 0’s: #000000 or #000. The letters used are only f through a while the numbers can be 0-9. You can learn more here on the Code Side of Color.

One way to maintain an overall color scheme for your blog or website is to pick a color palette, and stick to the colors in that palette as the major colors for your site. A great tool for doing this is called ColourLovers. Let’s say you know you want some shades of blue and maybe a few colors to match. Type “blue” into the box that says Search Palettes … (it’s at the top of the page). Not only do you get lots of palettes, but you can also narrow down your search adding other search terms, such as hue or a hex number (the numbers used to depict colors on the web) or published period for the palette. If you give it a try, let me know which palettes you like! Maybe you can use it to design a room in your house as well.
search palettes on Color Lovers website - get website colors

Another color tool that I have used for years is Eric Meyer’s Color Blender. Let’s say you have a blue that you want to be deeper. Or you have a blue that you want to be lighter. Select the original blue as your first color. To make it a lighter, select white (or #fffff) as your second color. Change midpoints to 10. You will then have many choices of new blues.
color palette meyerweb color blender

Your Turn, Please

Have you used any online color tools? Do you have any favorites? What combination of colors do you have on your blog or website?

Please share:Pin on PinterestTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

35 thoughts on “Color, Color Everywhere – Website Color Tools

  1. As you know, I love color. I’ve used many tools over the years. In print it was a PMS color chart. Online I’ll use HEX and RBG codes. The hardest part about choosing color is what to use and the message I subtly conveys. To your point, picking a neutral base color does make it easier to avoid clash issuing when using other images.
    Susan Cooper recently posted…McConnell Estates Winery Merlot 2007My Profile

    1. Congratulations on being the first to leave a comment, Susan. Yes on the neutrals – beige might be another way to have neutrals and emphasize the colors in the post instead of the website. On your site, the blues are subtle and sweet. And very often your podcasts fit well with your background illustration, as they are both in your unique style.

  2. Hey Leora,

    This is one of the important I really haven’t thought about for my new blog – until now. So, thank you for writing this article 🙂

    I have got two new themes for my upcoming blog (I haven’t picked one yet). These themes comes with built in colors, so I really didn’t think about what colors I would use (I am sure that both these themes have color pickers, so color is something I need to decide).

    I have heard that each color represents something, like black being VIP/luxury, blue being cool, and so on. I need to revisit those definitions to pick color sets for my upcoming blog.

    Anyways, thank you for sharing those tools. Those will be really helpful!

    1. Jeevan, you bring up great points about how color can mean different things. I think of blue as conservative, safe, business-like. That would be another topic to research before building a website.

      You are certainly spending a lot time building this blog. Sounds like my logo that I say I am going to do … only I haven’t done much lately other than say I should work on it.

  3. This is so smart, you effectively create a visual brand for yourself by doing this and it has the added benefit of being easy on the eyes. Having the tools that can figure it out for you is brilliant. Great post.

  4. I love colours, and especially the colours of the rainbow. I have a hard time limiting myself to only a few colours, even though I have heard this information before (that we should select a colour palette and stick to it).

    Seeing a few colours, however, makes us focus. Sometimes too many is just too much!

    But…I like being colourful!
    Lorraine Reguly recently posted…My Online JourneyMy Profile

    1. You know what, Lorraine – if your inner urge is to choose lots of colors, go for it. It’s not like you are working for a bank. Aren’t rules meant to be broken? Enjoy. Maybe you could have the inner illustrations of your book have lots of color, and for the cover, you could follow the advice of a trusted person and limit the colors a bit more.

  5. I have used tools like these before. My current theme has its own colors, which I found really helpful. I did not have to make choices like I did for Geek Girl USA. I am always conscious of images and how they will look with my theme. Most people don’t give color a second thought. I think it’s important because of the way it makes you feel.
    Cheryl recently posted…Staying Independent As We AgeMy Profile

    1. Right, Cheryl, a lot of time people’s reactions to color are subconscious. There has been a lot written about color choice. The idea of picking a palette of colors is a good way to start.

  6. I find playing with color fascinating, but after my first blogspot blog, I vowed not to tinker too much with the way my WordPress blog looks. It’s a road I’m better off not going down because I will work with the way something looks for hours when I might be the only one who really notices the results. That being said, eventually I will choose a theme, but it only took me two years to realize all I would want a site to do and how it should look.
    Jeri recently posted…Copy Editing: Forbidden FutureMy Profile

  7. Hey Leora,

    I have an HTML site that I use for coding and it also has a section on colors but it’s kind of limited. As you know I do love blue and sometimes I want to find a darker blue but the color charts aren’t giving me what I want.

    I’m definitely going to check out the one you recommend here and see if I can’t find the right shade I want. At least that way I’ll have the code for future use.

    Bravo, thank you so much for sharing this. Can you say “Gold Mine”…

    Adrienne recently posted…Why Your Social Sharing Buttons Drive Me NutsMy Profile

  8. Hi Leora. I actually used ColourLovers in the redesign of my website when I was first communicating with my webmaster. I don’t really know if she used it to follow through in the process but I am totally happy with the color scheme we have.

    Thanks for the reminder of the tool, and giving me a new one to check out.

    Over from LinkedIn group BHB
    Patricia Weber recently posted…Publisher And Author: Are You A Suitable Match?My Profile

  9. I have never used a color tool. I had my logo created and was told what the color for the red to use in the site. My banner background is blue and my web developer keep sending me swatches and asked me which color I liked. I have been very careful with not overdoing red as I know it is a strong color. The blue in the banner was for trust. I am thinking of redesigning the site and I am not sure what colors I want to use. I will always need to follow through with the red as it is part of my logo.

  10. I’m afraid I’ve pretty much limited myself to the color possibilities presented by my theme (or is it WordPress doing the presenting?) when I’m composing and editing text. When I created a blogger blog way back in the day; however, they started adding a lot more things you (I) could do with color — more nuanced than what I have available now.

    I like the color scheme of this blog. Grays are very relaxing and I gray makes other colors look good. (Hence, my preference for a charcoal gray eye liner around my hazel eyes — on those rare occasions when I get it together to wear make-up 😉
    Suzanne Fluhr (Boomeresque) recently posted…Boomeresque Visits the Pennsylvania Guild Fine Craft Fair on Philadelphia’s Rittenhouse SquareMy Profile

  11. Really useful information Leora. Didn’t know about those tools so I will bookmark this post.

    Over the years working with design and layout I have found that using clear, cheerful colours have a positive impact on people who view the design. Murky colours on the other hand can have a negative impact. Having said that I’m fond of using different shades of grey that can be very effective. So depends on what your website is all about.
    Catarina recently posted…What makes you follow a leader?My Profile

  12. I haven’t really thought much about the colours of my blog. Even though I know colour is very important, I just didn’t think about it. I may need to review it now 🙂
    Becc recently posted…Bliss ListMy Profile

  13. Excellent post, Leora! These tools would definitely come in handy.

    I try to stay away from playing too much with colors because while i have an eye for them – it seems to be only when looking at something already there. i can say i like or don’t like how these colors match. But i am awful at finding what colors match what colors. I think the tools you share would help me a great deal – thanks for sharing!

    There was a color palette tool i liked – but i never got to use it. I think it was kuler dot com – but i see the domain is for sale, so they must have gotten out of business 🙁
    Diana recently posted…5 Tips to Effective Communication with Freelance ClientsMy Profile

  14. Hi Leora,

    Surprisingly, I have 5 tabs open right now from the searching I did for color tools a couple of days ago. So, I’ll share those here. Like Sherryl said in her comment, I find myself searching again every time I want to use such a tool.

    I most often remember that there is ONE that I like, but can’t remember the name of it. (I’m glad it came up in my search this time and I immediately recognized the name. Yay!)

    That favorite one is Kuler by Adobe (

    Originally, I was looking for “eyedroppers” so I could pick up the color off a client’s webpage and use it for their new design. Rather than list those, here’s the resource I used to find one I liked:

    Thanks for the links to ColourLovers and Color Blender, too.
    Vernessa Taylor recently posted…Tech Challenge: Space-Saving Custom Tabs on Directory Listing PagesMy Profile

  15. This is a good and interesting tool. This is so smart, you effectively create a visual brand for yourself by doing this and it has the added benefit of being easy on the eyes. It’s so worthy.

Please leave a comment.

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

CommentLuv badge