The use of color is an important part of creating memorable websites. They can heavily influence the mood of visitors, and are a critical part of establishing a great brand.

In fact, color is one of the first things that come into play when we develop new WordPress themes. Just to give you an idea, there were times that an entire WordPress theme was born from a single color combination.

Yes, that’s right– we designed an entire concept from just a color combination.

Color schemes in WordPress themes

Nowadays, most WordPress themes give you the option of tweaking the color palette with just a couple clicks. This is a very powerful option, since it can completely change the mood of the site– and even go as far as influence visitors.

Our premium themes are no exception, by the way.

Regardless of which WordPress theme you use, choosing the right color palette for your website is very important. So, let’s take a look at some of the best practices surrounding color theory.

Finding the best color palette is not easy

First off, a note of caution.

Color theory is an aspect of graphic design that can take years to master. There is more to color than simply opening your preferred graphic editing tool and selecting what’s on the palette.

With that being said, let’s look at some tips for choosing a good color palette. This is by no means an exhaustive guide, but it will definitely help you choose a color scheme that follows good design practices.

1. When in doubt, only use two colors

When it comes to graphic design, less is more.

While your palette can have as many colors as you wish, it’s better to keep things as simple as possible. Thus, try to choose a palette with only two main colors. Simple as that.

This is what we do ourselves, when setting the tone and voice for many of our WordPress themes. By sticking to the basics, we can achieve simple but effective layouts that are full of character.

2. Use color theory to pick your palette

A palette that is sloppy will look bland and boring. Most of the time this is due to not having enough contrast between colors. To do that, you can use one of the three basic techniques to pick your color:

  • Complementary: when colors stand on opposite ends of the palette.
  • Analogous: when colors are close to each other.
  • Triadic: choosing three colors that stand at equal distance of each other.

In my opinion, some of the best color combinations are complementary. The contrast in them makes the end result stand out more, which will make your website more exciting to look at.

color-theory

3. Be consistent with saturation

Saturation is what makes a color vibrant and contrasting.

Having roughly the same amount of saturation for all colors will make your palette look more consistent. If you’re starting out, this is a good way to create a more professional-looking palette.

For example, take a look at any Instagram photo. Its filters always make colors more consistent, and as a result the image looks better– more in harmony with the actual colors it has.

4. Be aware of the emotions color conveys

Color can and will convey all sorts of emotions to your visitors. For example, a warm color will suggest activity and liveliness, while cooler tones can convey peace of mind and seriousness.

But it’s not that simple– colors can represent polar opposite feelings, too.

For example, a red color can convey feelings of love, but it also stands for anger and blood. Always be aware of the kind of emotions you want your brand to represent, and tweak your palette accordingly.

color-emotionImage courtesy of MMI Creative

Good color combinations that stand out

We’ve already established that color can dramatically impact the look and feel of a website, so let’s take a look at some real world examples.

Here is a set of 14 great color combinations that you can use in your WordPress website, all of them coming from reputable web design agencies.

Urban Influence

This website uses desaturated tones, combined with dark images to got with them.

colors-urbaninfluence

Green Chameleon

Here is an example of a highly contrasted palette. The vibrant green color really comes to life as the rest of the site is darkened.

colors-greenchameleon

Stillworks

Another high-contrast palette, this time using a neutral color, combined with a highly visual one such as orange.

colors-stillworks

Anakin

Here is an analogous palette. Notice how every color is a slight variation of the first one?

colors-anakin

Union

Union uses a slightly complementary palette as well, opting for reddish colors.

colors-union

Parallax

An analogous palette that stretches all the way from green to blue.

colors-parallax

Lemon Tea

Lemon tea makes use of a very delicate color: yellow. Notice how it is used only with dark colors as the background?

colors-lemontea

Cyber duck

Here is an example of a complementary palette that goes well: orange vs. blue.

colors-cyberduck

Coulee

Desaturated colors that go for an elegant look, all while using neutral colors (grays) for typography.

colors-coulee

Secret Key

Here is a very advanced palette, where each color complements the next one. Notice how all of them have a consistent saturation?

colors-secretkey

Trüf

Another palette that uses a vibrant, red color.

colors-truf

Isadora

A clear example of a desaturated color combination, for a more organic look.

colors-isadora

Verbal+Visual

High contrast combined with a dark background. In this case, the orange color stands out a lot due to the contrast it creates.

colors-verbalplusvisual

Studiometa

A complementary palette that uses blue and rec to create a highly-refined mood.

colors-studiometa

Create a better website with the right palette

As you can see, color plays an important role in any website. It can drive emotion and influence credibility.

There is no definite way to choose the best color palette but to experiment, so hopefully these examples will give you the inspiration you need to create a more vibrant WordPress website.

What is your preferred color palette?