How to choose & combine colors for your website
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 stands for love, energy, power, strength, passion, and heat, but also anger, danger, and warning.
Orange stands for courage, confidence, friendliness, and success, but also ignorance and sluggishness.
Yellow stands for brightness, energy, creativity, intelligence, and happiness, but also immaturity.
Green stands for growth, freshness, healing, and nature, but also envy and guilt.
Turquoise conveys spirituality, healing, protection, and sophistication, but also envy.
Blue conveys tranquility, loyalty, security, trust, and intelligence, but also coldness and fear.
Purple symbolizes royalty, nobility, spirituality, luxury, and ambition, but also mystery and moodiness.
Pink symbolizes healthiness, happiness, compassion, sweetness, and playfulness, but also weakness and immaturity.
Brown stands for friendliness, the earth, the outdoors, and longevity, but also conservativeness.
Tan/Beige conveys dependability and crispness. But it’s also associated with being dull, boring, and conservative.
Gray stands for security, reliability, intelligence, and solidness. But it also conveys gloominess, sadness, and conservativeness.
A lighter gray or silver is also associated with glamour, high-tech, and sleekness.
Gold stands for wealth, prosperity, and being valuable and traditional.
Black symbolizes protection, formality, class, drama,
White stands for goodness, innocence, purity, freshness, and cleanliness.
How to combine colors for your website
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.
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.
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.
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
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.
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.
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
Rather get launch design done for you? Hire me.