How to choose & combine colors for your website

The easiest way to an attractive website is to keep it simple and stick to a limited color scheme. Click through to learn how to create an attractive color palette.

The easiest way to have a website that attracts & converts is to keep it simple and stick to a limited color scheme. Pick four colors or less to create your color scheme.

I’m giving a quick overview of color psychology, to help you choose colors for your sales page. I’ll also tell you how to combine colors to make sure important elements on your sales page stand out.

How to choose colors for your website: Collect inspiration

While we’re all multi-faceted, when it comes to branding, you need to limit yourself to create consistency. Pick two or three of the main values you want to convey for your brand or offer. (E.g. love, family, travel, transformation, creation, organization, etc.). Then go to Pinterest and start pinning images and website designs that convey those values for you.

Once you have a good amount of images on your brand board, you’ll probably start to notice the things they have in common. Perhaps they’re all using bright colors, or are feminine & chic, or maybe they’re more minimalistic. Figure out what it is you like about all these designs, then continue to pick colors, fonts and even textures or patterns that will create a similar look & feel for your website.

Need help creating your vision board? Get the free guide below!

How to choose colors for your website: Color psychology

When it comes to color psychology, keep in mind this is largely cultural. For example, in the western world, white symbolizes innocence. In many Asian cultures, white is actually a color of mourning. So if a large part of your target market is from a different culture, look into what the colors mean to them.

Red

Red stands for love, energy, power, strength, passion, and heat, but also anger, danger, and warning.

Orange

Orange stands for courage, confidence, friendliness, and success, but also ignorance and sluggishness.

Yellow

Yellow stands for brightness, energy, creativity, intelligence, and happiness, but also immaturity.

Green

Green stands for growth, freshness, healing, and nature, but also envy and guilt.

Turquoise

Turquoise conveys spirituality, healing, protection, and sophistication, but also envy.

Blue

Blue conveys tranquility, loyalty, security, trust, and intelligence, but also coldness and fear.

Purple

Purple symbolizes royalty, nobility, spirituality, luxury, and ambition, but also mystery and moodiness.

Pink

Pink symbolizes healthiness, happiness, compassion, sweetness, and playfulness, but also weakness and immaturity.

Brown

Brown stands for friendliness, the earth, the outdoors, and longevity, but also conservativeness.

Beige

Tan/Beige conveys dependability and crispness. But it’s also associated with being dull, boring, and conservative.

Gray

Gray stands for security, reliability, intelligence, and solidness. But it also conveys gloominess, sadness, and conservativeness.

Silver

A lighter gray or silver is also associated with glamour, high-tech, and sleekness.

Gold

Gold stands for wealth, prosperity, and being valuable and traditional.

Black

Black symbolizes protection, formality, class, drama, and mystery, but also mourning.

White

White stands for goodness, innocence, purity, freshness, and cleanliness.

How to combine colors for your website

colorwheel-coldwarm

There are 6 common ways to combine colors to create an attractive color scheme for your website. They are based on the color wheel. The color wheel consists of all colors with the warm colors on one side and the cold colors on the other side. Similar colors are next to each other.

1. Monochromatic

colorwheel-monochromatic

The first and easiest way to combine colors is by using different shades of one color. This creates a harmonious color scheme, producing a soothing effect and is very easy on the eyes. Combine the main color with neutral colors like black, white and gray. But, with this scheme, it can be difficult to make important elements, like your buttons, stand out.

For your buttons to stand out, add a complementary color (see #3 below) to your monochromatic scheme.

2. Analogous

colorwheel-analogous

This is a combination of colors that are next to each other on the color wheel. With this scheme, it can be difficult to make important elements stand out enough.

To make your buttons stand out, add a complementary color (see #3 below) to your analogous scheme.

3. Complementary

colorwheel-complementary

These are two colors opposite each other on the color wheel. When using the complementary scheme, choose one main color and use the other for accents. This helps make important elements like your buttons stand out from the rest of the page.

You can also lighten or darken the main color to make the accent color stand out more.

4. Split complementary

colorwheel-splitcomplementary

This is a scheme of three colors. One color on one side, the other two the immediate neighbors of the exact opposite of the first color. This gives you more choices to make elements stand out.

5. Triad

colorwheel-triad

These are three colors that are the same distance from each other on the color wheel. It’s more balanced and harmonious than the complementary scheme. It also gives you more choices to make elements stand out.

6. Tetradic

colorwheel-tetradic

This is actually a double complementary combination. This scheme is hard to harmonize. If you’re using all four colors in equal amounts, the scheme may look unbalanced. You should choose one color to be the main color or lighten/darken all colors.

Resources to create your color scheme

Find inspiration for your color scheme at Canva Color CombinationsColourLovers and Design Seeds. Or create your own color scheme using Adobe Color CC.

Rather get launch design done for you? Hire me.

Want to learn how to make a beautiful sales page yourself?

PinterestVisionBoard-preview

Sign up for my guide How to create the perfect launch design inspiration board and make sure to also read the follow-up emails teaching you how to go from inspiration board to an actual brand board you can use to create a beautiful sales page.

Just click the button below to get it, free!