Why Website Color Schemes Should No Longer Terrify You

I hate the color wheel. Always have.

Yet, I love art.

Now you know why I never became an artist.

I failed at using the color wheel. It never made sense to me.

Understanding and using it is akin to comprehending the Higgs boson. I’m not exactly sure why it’s so difficult to put colors together, but it just is.

Just look at this thing…

Tint, tone, shade?

Triadic? Split-Complementary?

Huh?

I just want two colors that match!

To make matters worse, there is an unspoken societal pressure to guarantee whatever colors we ultimately put together need to match.

Think about it. Every day when you get up to get dressed for work, you spend a certain amount of time making sure the colors you are wearing actually go together.

This same expectation is quietly imposed on your blog too. The website color schemes you choose need to be on point.

The One Tool You Need

Thank goodness for me I found a doozy of a tool for this exact problem.

I’m pretty sure it’s gaining ground on sliced bread.  Just sayin’.

Coolors.co is the tool you need to leverage to make your brand consistent and your blog beautiful.

As I mentioned earlier, finding colors can be a major pain in the you know what. Adding to the turmoil, blogs typically need more than just two colors. Ugh.

The good thing about Coolors.co is you can get up to 5 different colors that officially go together. Yes!

Here are some of the key benefits of using this tool to coordinate your website color schemes.

Automated Color Picker

Once you click on the Generator link on the site, you are immediately presented with 5 colors that work together. You also have their hex values available as a reference.

I use hex values in all colors I choose online to make sure I have the same color consistently.

Now, the fun part. Just hit the space bar and the colors will change to another palette of colors that work.

Continue to hit the space bar to see multiple combinations.

This is a great example of how to implement user interface design into something that isn’t typically fun.

Individual Color Controls

I’ve highlighted the individual color controls on the image below.

Once you find a color you like, simply click on the lock icon to keep it on the screen.

Hit the spacebar again and you are presented with 4 colors that match the one you selected. Brilliant!

You can then slowly lock in each color that you like until you get to 5 full colors.

For example, when I was setting up my website color scheme for Top Shelf Blogging, I knew I wanted an orange. Once I found the shade I wanted, I locked it in and cycled through various other colors.

I found a nice yellow, then a blue (since all websites need to have a blue right?), then two more colors that worked.

And, I didn’t have to worry about committing a designer faux pas by selecting incorrect colors.

Also, at the top of the color band are sliders for each color type. If you wanted to adjust the settings on the fly just move the sliders around and see what you like.

They make it really easy to select your brand’s core color so you can find all of the complementary colors you want to use.

Bring Your Own Colors to the Game

Another sweet feature is you can use your own hex value as the first color.

Let’s say you already have a color you really want to use, but you have no idea what could go with it.

Simply click on the existing hex value presented on screen and type the hex value from your existing color, lock it in, and then hit the space bar to see what other colors are recommended. Easy.

Additionally, you can use an image as the source of your website color scheme.

Click on the camera icon in the color band and import a photo into the tool.

As you can see, the tool pulls colors and recommends other colors based on the photo you import.

This would really come in handy if you already have a custom logo that has particular colors or if you wanted to have one particular photo on your website and wanted to match it with your brand.

Other Features

If you are too lazy to work through different color combinations, and I wouldn’t blame you, there are pre-built color combos you can select from.

Go to the Browser link at the top of the page and pick from some of the combinations that are presented to you.

They also have an iOS and Android app available and offer add-on capabilities to Adobe Illustrator.

What to Do With Your New Website Color Scheme

Now that you have 5 colors that go together, you need to keep them somewhere so you can always pull them up as a reference.

Coolors.co also offers an Export feature that allows you to save your website color scheme off in multiple formats.

I highly recommend saving a PDF version to use as your authoritative design guide for your brand going forward.

As you can see, they provide you with the color breakdown per color as well as the URL to find the same color scheme online.

Save this file off in a dedicated branding folder for your website and use it whenever you need to add colors to not only your blog but also to images you share on your social media channels.

Your new website color scheme will be a lifesaver for your blog and will guarantee that you are putting the best, and consistent, representation of your brand out to your audience.