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.
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, the sun, creativity, intelligence, and happiness, but also irresponsibility and instability.
Green stands for money, growth, fertility, freshness, healing, and nature, but also envy, jealousy, and guilt.
Turquoise is associated with spirituality, healing, protection, and sophistication, but also with envy and femininity.
Blue stands for tranquility, love, loyalty, security, trust, and intelligence, but also coldness, fear, and masculinity.
Purple symbolizes royalty, nobility, spirituality, luxury, and ambition, but also mystery and moodiness.
Pink symbolizes healthiness, happiness, compassion, sweetness, and playfulness, but also weakness, immaturity, and femininity.
Brown stands for friendliness, the earth, the outdoors, and longevity, but also dogma and conservativeness.
Tan/Beige stands for dependability, flexibility, and crispness, but also being dull, boring, and conservative.
Gray stands for security, reliability, intelligence and solidness, but also gloominess, sadness and conservativeness.
A lighter gray or silver is also associated with glamour, high-tech, grace, and sleekness.
Gold stands for wealth, prosperity, and being valuable and traditional.
Black symbolizes protection, formality, class, and drama, but also with death, evil, and mystery.
White stands for goodness, innocence, purity, freshness, and cleanliness.
How to combine colors
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 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.
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.
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
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.
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.
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
Want more? Fill in the fields below to download your free Guide to Visual Branding, including some great font and color combinations.