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?

35 Responses to “Color, Color Everywhere – Website Color Tools”

  1. Susan Cooper says:

    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´s last blog post ..McConnell Estates Winery Merlot 2007

    • Leora Wenger says:

      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. Susan Oakes says:

    Hi Leora,

    I used to use the tools you mentioned and there was another one which I can’t remember the name that gives very good colour combinations.

    I am lucky as my theme has the colour selection included so you don’t have to remember the numbers and just click on the colour you want.
    Susan Oakes´s last blog post ..A Common Factor For Successful Business Growth

  3. Jeevan Jacob John says:

    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!

    • Leora Wenger says:

      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.

  4. What a useful website. I was not aware of these tools and can’t wait to read your other post. Ah, I see where I can subscribe. Really love your info.

  5. I have never used color tools. But I do remember from about 15 or so years ago when I first played with HTML, the letter and number designators for color. Mind I only remember becaus of your info here.
    Jon Jefferson´s last blog post ..Mr. President

  6. 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.

  7. 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´s last blog post ..My Online Journey

    • Leora Wenger says:

      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.

  8. I’ve never used color tools, but what a great tip! I know in print ads, red/black draw the eye. It’s for that reason I chose them for my page.

  9. Cheryl says:

    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´s last blog post ..Staying Independent As We Age

    • Leora Wenger says:

      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.

  10. Jeri says:

    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´s last blog post ..Copy Editing: Forbidden Future

  11. Adrienne says:

    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
    Adrienne´s last blog post ..Why Your Social Sharing Buttons Drive Me Nuts

  12. 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´s last blog post ..Publisher And Author: Are You A Suitable Match?

  13. Arleen says:

    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.

  14. 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)´s last blog post ..Boomeresque Visits the Pennsylvania Guild Fine Craft Fair on Philadelphia’s Rittenhouse Square

  15. Catarina says:

    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´s last blog post ..What makes you follow a leader?

  16. I’ve never used a color tool. I used a designer to design my header and background. I chose red because I’m in marketing and I wanted an “in your face” color. If I’m helping others to market their businesses, then I can’t be shy about my own.
    Jeannette Paladino´s last blog post ..A Primer for Sharing Your Content on Google+

  17. Becc says:

    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´s last blog post ..Bliss List

  18. Diana says:

    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´s last blog post ..5 Tips to Effective Communication with Freelance Clients

  19. Thanks for the links to the sites. It seems every time that I need tools like these, I end up searching again. The one tool that I consistently use is the VisiBone Web Designer’s Color Card. It’s not a free tool but it’s handy.
    Sherryl Perry´s last blog post ..Social Media Tools, Google Ads and WordPress Themes #FridayFinds

  20. 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 (https://kuler.adobe.com/create/color-wheel)

    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: http://www.hongkiat.com/blog/eyedroppers-color-pickers-for-designers/

    Thanks for the links to ColourLovers and Color Blender, too.
    Vernessa Taylor´s last blog post ..Tech Challenge: Space-Saving Custom Tabs on Directory Listing Pages

  21. 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.

  22. Your always welcome Leora. Have a great week.

Leave a Reply

CommentLuv badge