How to Choose & Combine Colors for Your Site

The easiest way to have a visually appealing website is to keep it simple and stick to a limited color scheme. Pick four colors or less to create your color scheme. Pick two or three of your main values or likes (e.g. love, family, travel, your faith/religion, transformation, creation, organization, etc.) that you want to convey with your site. Then pick colors that convey those values. I’m giving a quick overview on color psychology and the science behind combining colors, to help you choose colors for your site.

How to choose colors for your site: The meaning of colors

When it comes to color psychology, keep in mind this is largely cultural: for example, in the western world, white means innocence, but in many Asian cultures white is actually the color of death. So if a large part of your target market is from a different culture, pay attention to what the colors you picked mean to them.

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

 

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

 

YellowYellow stands for brightness, energy, the sun, creativity, intelligence, and happiness, but also irresponsibility and instability.

 

GreenGreen stands for money, growth, fertility, freshness, healing, and nature, but also envy, jealousy, and guilt.

 

TurquoiseTurquoise is associated with spirituality, healing, protection, and sophistication, but also with envy and femininity.

 

BlueBlue stands for tranquility, love, loyalty, security, trust, and intelligence, but also coldness, fear, and masculinity.

 

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

 

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

 

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

 

BeigeTan/Beige stands for dependability, flexibility, and crispness, but also being dull, boring, and conservative.

 

GrayGray stands for security, reliability, intelligence and solidness, but also gloominess, sadness and conservativeness.

 

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

 

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

 

BlackBlack symbolizes protection, formality, class, and drama, but also with death, evil, and mystery.

 

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

 

How to combine colors

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 using different shades of just 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, when using this scheme, it can be difficult to highlight important elements like your buttons.

2. Analogous

colorwheel-analogous This is a combination of colors that are next to each other on the color wheel. Use one color as the main color. The other colors are useful for making buttons and other important elements stand out.

3. Complementary

colorwheel-complementary These are two colors opposite of each other on the color wheel. When using the complementary scheme, it is important to choose one main color and use its complementary color for accents, so you will get a more vivacious vibe without overloading on color. You can also lighten or darken the main color to have more emphasis on the accent color (or vice versa).

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 a lot of contrast while giving you more choices to make elements stand out. This scheme generally conveys a vivacious vibe.

5. Triad

colorwheel-triad These are three colors that are the same distance from each other on the color wheel. It has strong visual contrast while being more balanced and harmonious than the complementary scheme.

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, so you should choose one color to be the main color or lighten/darken all colors.

Resources to create your color scheme

Get some inspiration for your color scheme at Canva Color CombinationsColourLovers and Design Seeds, or create your own color scheme using Adobe Color CC.