Color theories create a logical structure for color. It describes how color is perceived, as well as how colors mix, match, and contrast with each other. Generally, it involves a color’s darkness or lightness, with different tints and tones created from adding white or gray, respectively.
Color often affects branding, and can increase/decrease sales for businesses, so it’s important to understand basic color theory, as it can boost business engagement immensely.
There are three basic categories of color theory: the color wheel, color harmony, and the context of how colors are used.
Color Wheel
The color wheel is split into three different types: primary, secondary, and tertiary — each one having more colors than the last.
The color wheel has two different types of colors: warm and cool colors. Warm colors are generally associated with energy, brightness, and action. Cool colors are generally associated with clam, peace, and serenity.
Hue, Shade, Tint, Tone:
Hue: the pure color itself
Shade: the color with black added to it
Tint: the color with white added to it
Tone: the color with grey added to it
Color Harmony
Color harmony delivers visual interest, aesthetic, and a sense of order. There are a few different formulas for color harmony, but the most popular formulas are:
Analogous Colors: Any three colors that are side by side on the color wheel
Yellow-green, yellow, and yellow-orange
With analogous colors, you can use the 60-30-10 Color Rule:
60% of your design is dominated by one color
30% for the secondary color
10% for the tertiary/accent colors
With more colors, you can use to 60-20-10-10 or 60-15-15-10 Color Rule.
Complementary Colors
Any two colors that are directly opposite of each other
EXAMPLES: Red and green, red-purple and yellow-green
Color behavior changes in relation to other colors and shapes.
The same shade of red can show up differently depending on what color backgrounds are there.
Red appears brighter against the black background, but duller against the white background. Respectively, red acts the same behind the orange and blue backgrounds.
Good Color Combinations: Royal blue & peach, blue & pink, charcoal & yellow, lime green & electric blue, lavender & teal
Color Theory for Websites
The 60-30-10 rule should generally be applied for websites:
60% of the website is dominated by one color
30% for the secondary color
10% for accent colors
How to Choose Your Colors
What kind of brand/impact would you like to have?
Different colors can impact mood/perception (color psychology):
Red: generally associated with danger, excitement, and energy (which can often lead to impulsive behavior — good for brands that are selling products)
Example: Coke’s red is easily recognizable, deliberately so because red often triggers impulse buys
Pink: associated with a feminine energy that is sentimental and romantic or youthful (different shades can also mean different things)
Example: Barbie brand uses a light pink to present youth
Orange: fresh and full of vitality; creative, adventurous, cost-effective
Example: Nickelodeon logo
Yellow: optimism, associated with playfulness and happiness
Example: McDonalds (paired with red to increase consumer’s appetite)
Blue: has a calming effect, and is often used to comfort those in distress
Green: has an association with nature, and is often used to demonstrate sustainability
Brown: conveys a down-to-earth and honest appeal, often used for organic or wholesome products and services
Purple: royalty and majesty; often associated with spirituality and mystery
White: pureness, simplicity, innocence, often with a minimalistic feel
Black: sophisticated and elegant style, which can be formal and luxurious
Multicolored: a united company that is open to all (ie. Instagram)
What kind of brand do your competitors have? Why did your competitors choose those colors, and how can you avoid being mistaken for your competitor?
Think about your target audience (ie. a company that provides fun products for children will have a completely different site compared to one for a funeral home)
You can also use coolors to browse different, popular color palettes
.png)
.png)
.png)