skip to Main Content
Website Colors

Do you ever think how the colors you choose could be affecting your website? If it’s the first time you’re building a site, you’ve probably thought about it very little. We’ve all been there. You pick a color you like, and without any idea how it might be perceived, you proceed to splatter it all over your website. You add some additional colors for dramatic effect, now knowing how those colors look together.

So why should any of this matter? Should you care about something so seemingly irrelevant? If you go around looking through the vast realms of the interwebs you’l find hundreds, maybe thousands of articles on color theory, color matching, colors related to trustworthiness, colors for kids, colors for a website, and so on and so forth. So, one of the most important questions you should be asking yourself is, what website colors should I be using? I talk a little bit about that in my previous blog post on challenges for small busienss website: adinicio.com/challenges-for-small-business-websites/.

But before we dive in, I want to let you know that we offer a free website audit which includes a customized video review of your website, should you need some advice on your website colors or design. You’ll find a form at the end o this article, or you can go directly to our Free Audit Request page at adinicio.com/free-website-audit/.

Now, let’s dive in!

Website Colors Can Make or Break Your Site

There’s no simple answer to using the “best” colors, but if you follow these guidelines, you’ll be safe from turning your website into a work of art…….made by a 5 year old.

Website Colors Matter!

92.6 percent of people say the visual dimension is the #1 influencing factor that affects their purchase decisions. Consequently, this has an impact out in the “real world”, just as it has an impact in the online world.

Another more important thing to take into consideration is that 48% of people cite a website’s design as the number one factor in deciding the credibility of a business. And a big part of a website’s design is website colors. Here’s an example of what NOT to do! This website doesn’t lend much in the way of credibility. It looks like not much effort was put into it and the perception will be that the site’s owner won’t put much effort into anything else she does.

Bad Website Colors

A Little Color Theory

But you’re not an art major (neither am I), and you still need to make your site look good.  Well, you don’t need a degree in color theory to put together good color combinations. With today’s technology, there are several tools at your disposal that can help you become a wizard of colors without needing to any art classes. Below are some examples of what a good color palette looks like. You can start with that and look for additional website color palettes on the web. Consequently, there are plenty of examples out there of the right way, and the wrong way to use colors for your website.

Website Color Schemes Examples

Next, a color palette or color scheme should be somewhat uniform and use colors that “work well” together.  The colors should flow or have a good contrast. For example, the image below uses a beautiful set of 4 colors that work well with each other. It has a primary color (green) a secondary color (orange) and two accent colors. This is a great example of using colors well.

Website Colors

Another example of a good color palette, using more “muted” colors is this one. You can see how well the website colors complement each other.

Color Palette Example

Good 2 Color Combinations

Above all, a good rule of thumb is to use a 2 color combination, your primary and secondary colors.  Accent colors are a little more flexible because they’re more subtle and won’t be as apparent on the site. But the primary and secondary colors will stand out regularly throughout.

Now take a look at the following logo and navigation background from one of our recent designs. This uses a combination of blue and gray.  Blue being the primary color for the site and gray being the secondary.  You’ll notice how the gray bounces off the dark blue very nicely.  This is an example of a good color combination.

good 2 color combination

Here’s another example of a 2 color combination similarly using blue (but a different variation) and gray. You’ll see how the blue and gray website colors work very well together on this one as well.

Centurion Technologies LLC – Giving you a competitive edge -min

Arm Your Tool Belt

Now that you have some basic knowledge of how to use colors for your website. It’s time to give you some tools to get you going. Below are my three favorite tools to use for generating colors for my web designs.

coolors.co

My favorite tool by far for selecting colors is coolors.co. This makes picking color palettes easy and fun. You can adjust one of the colors, lock it in and cycle through variations of color combinations that will work well with that primary color. Alternatively, you can view color palettes that have been created by other users, to get some inspiration.

coolors_co generator

paletton.com

Second on the list of favorite tools is paletton.com. This site is a little more extensive than coolors.co and you can create colors based on different color combination types like monochromatic, adjacent colors, triads, tetrads, and so on. No need to know exactly what those means, once you play around with them you’ll figure it out.

Paletton The Color Scheme Designer

canva.com

And finally the third place I like going to for color palettes is canva.com. This site is great for non-designers or those who don’t have access to expensive tools like Photoshop. The neat thing about canva’s color palette generator is that it can use a picture to extract colors from. That is definitely something unique that the other sites don’t have.

There are other sites out there as well, but I think these are the among the easiest and best to use, without having a whole lot of knowledge or artistic skills.

The Importance of Color

In conclusion, invest a little bit of time in choosing your colors. Learn a little bit about how different colors are perceived, and how colors work with each other. Stick to a good 2 color combination (primary color + secondary color) and use other minor colors for accents if necessary.

Therefore, play around with the tools above to start generating some colors and find something that resonates with you. Invest a little time in selecting the right colors for your website, colors that work well together, and your site will look astoundingly more professional. It will have a solid badge of credibility and it will be pleasing to view, which means your visitors will stay longer on your site and they’ll be more engaged.

If you’d like us to take a look at your website and offer some suggestions on how you can improve it (free of charge), go ahead and fill out the form below. We’ll do a customized video review of your website including actionable things you can do to improve it.

Get Your FREE Website Audit Today

Your Name:

Your Email:

Your Website URL:


Found this post useful?

Let us know so we can create better content for you.

Frank Barragan

Frank Barragan is a Web Developer & Entrepreneur from the San Fernando Valley. He holds a Bachelor’s Degree in Computer Science from Cal State L.A and has worked in the technology field for over 14 years. He’s had different roles including Tech Support, Web Developer, IT Manager and now Founder of his own Web Design Company.

Back To Top
Search