Your cure for colorblindness: How to pick a pleasing palette for your blog or site

Choosing colors is a tricky thing – especially for the web. And if you get it wrong, it can look REALLY wrong…so today I’m sharing a one-two punch of FREE tools for taking the guesswork out of picking color schemes for your blog or site!

Just follow the steps below to nail down an awesome color palette for your web presence (one that will make you smile a big, goofy grin every time you open up your laptop in the morning and behold its gorgeousness – and that your visitors will dig, too).

Step 1: Start with a color you love.
I’m willing to bet you’ve got an image saved somewhere on your computer, or on one of your Pinterest boards, that has a color you ADORE in it. Or maybe it’s the sidebar of that site you obsessively visit that uses the perfect shade of green in its lettering – or a button in your scheduling software that’s tinged ever-so-slightly with that lavender that makes you drool. Whatever color floats your boat, the first thing to do is to choose it as a starting point.

Step 2: Find out the secret code for that color

Fun fact: Every color in existence has a unique string of numbers and letters (known as a “hex code”) associated with it. The hex code tells computer monitors how to display the color, and the result is the rainbow of shades that you encounter when you surf the web or do anything else on your computer. Hex codes are made up of six characters with a number sign in front of them.

Here are some examples of hex codes:
#FFFFFF (white, like this)
#000000 (black, like this)
#FE0208 (bright red, like this)
#00C8CD ( “Girl’s Guide to Web Design blue”, like this)

Every hex code also has three additional numbers associated with it, known as the RGB (Red, Green, and Blue) values. On a computer monitor, every color is made up of a combination of red, green, and blue, so every color therefore has a certain dose of each of those colors “inside” it.

Okay…but how do you find out the hex or RGB codes for that flawless peachy tint you love so much? It’s easier than you think. All you need is an “eyedropper” tool.

An eyedropper tool acts like a magnifying glass for the stuff you see on your monitor – to the point that you can see the exact hue of every single pixel on your screen. Like this:

If you’re on a Mac, you’ve already got an eyedropper tool installed on your computer (it’s called DigitalColor Meter, and you’ll find it in the Applications/Utlities folder). DigitalColor Meter used to tell you the hex code for every color you select, but annoyingly, now it only gives you RGB values. That’s OK, though, because you can always use this handy-dandy RGB-to-hex converter to get the hex code associated with the RGB values you get from DigitalColor Meter.

If you’re on a PC, you’ll need to download Instant Eyedropper. It installs in about 30 seconds, and it will let you directly unearth the hex code for a specific pixel within your favorite image or website or blog.

No matter which operating system you’re on, using an eyedropper tool is pretty fun stuff. You get to put on your “color archaeologist” hat and explore the hidden corners of your favorite sites and graphics to reveal the tints and shades lurking “beneath the surface”. Yep – for color geeks, it’s pretty much heaven on earth. :)

But back to the matter at hand: figuring out the hex code for your chosen color. Once you’ve moused over the pixel that has the perfect color you want to use as a starting point for your blog or site’s color palette, you’ll need to write down the hex code and/or RGB values that your eyedropper tool is showing you.

And if you’re on a Mac, now’s the time to go ahead and convert your RGB values to a hex code using this converter tool. You’ll need the hex code for Step 3 below.

Step 3: Find the perfect pairings for your color
Once you’ve got your hex code scrawled down on a piece of paper, it’s time to find the colors that will look absolutely smashing next to the shade it represents. Enter Color Scheme Designer (that’s a screenshot of it below), which is set up to create flawless palettes that appeal to the human eye on an almost-subconscious level.

Here’s how to get the magic going. When you visit the Color Scheme Designer site, you’ll be taken to a page that asks you if you want to support their project on Kickstarter (which, incidentally, is a very cool crowdfunding tool that you may want to considering using if you have a passion project you need to raise funds for).

You don’t have to donate anything to the Color Scheme Designer Kickstarter campaign, though. You can just click “Maybe later, thanks” to access the color palette tool – and then you’ll be in.

You’ll see a slick-looking interface with a color wheel on the left and some blocky-type things on the right. The first thing to do is to look for the little line of text at the bottom right of the color wheel that says “RGB: FF0000″. Click on it, type in the hex code you wrote down earlier, and then click “OK”. Suddenly, you’ll see the colors on your screen change. This is the first (monochromatic) color scheme that’s being suggested to you as an option for your blog or site.

But maybe monochromatic isn’t your thing. Next, try clicking these links along the top of the color wheel, and watch your color scheme change:
- mono
- complement
- triad
- tetrad
- analogic
- accented analogic

Each represents a different, human eye-pleasing combo of colors that reflects a specific mood – always using your starting point color as a base.

To see how the different palettes would look on a real website, click “Light page example” and “Dark page example” below the color blocks. You’ll get an instant preview.

And if you’re really feeling frisky, click the “Adjust Scheme” link and click some different areas on the square color maps to watch your palette shift to a more saturated or less saturated look. Ultimate flexibility!

Step 4: Turn the juice loose!
Once you’re loving what you see on the right side of the screen, click the “Color List” link to get a complete list of all the hex codes that make up your palette. You can save this for your own design projects (don’t forget to check out my Pixlr tutorials to learn how to make your own header image for your blog or site), or you can give the list to your web or graphic designer.

No matter what you do with this stuff, you’ve got a color palette that started with a shade that really speaks to you…which tends to translate into a website that makes you equally happy. And that’s what we all want, isn’t it? :)

{ 6 comments… add one }

  • Ellen June 20, 2012, 1:33 pm

    LOVE this – you know me, my favorite color is EVERY! I’ve got a gorgeous site (thanks!) but I’m going to try this for a room redesign I’m thinking about! xo

    • Amanda June 20, 2012, 1:36 pm

      Such a fun idea to use it for interior decorating goodness! We demand pics when it’s done! :)

  • shana June 21, 2012, 12:23 pm

    where have you been all my life amanda?! seriously i just went through a blog header re-design (not yet live) and went crazy trying to determine colors. if i only knew this! well, at least i do now. thank you again for your great & generous tips.

    cheers from shana

    • Amanda June 27, 2012, 9:08 am

      Glad you enjoyed, Shana! We’ve all had our “I want to rip my hair out” moment with color. It’s awesome that there are tools like this to help.

  • 4g claro September 26, 2012, 10:11 am

    Very good tips huh. I really liked. An easy tip to get the color code and then we can do with it to have other harmonic colors. I will test this system and do a test site. thank you

  • Lotte October 1, 2013, 3:53 am

    This is SUPER helpful, thank you so much!

Leave a Comment