Color theory is the art and science of creating harmonious color combinations. But every color has its own meaning and emotions attached to it. In this article, we’ll dive into the psychology and meaning of color.
Knowing what color combinations to use in design is an art. Should you stick to a monochromatic color palette? Or maybe 2–3 complementary colors paired with an accent color? There are so many ways to use color to communicate, to make your design stand out, and to convey a certain mood and emotion.
Color theory is a set of principles for creating harmonious color combinations. It’s a mixture of science and art. Understanding the fundamentals of color theory and where color comes from is important to know as a designer. Once you master it, you’ll know how to create the best color combinations for your graphic and web design projects.
When referring to color, there are a few concepts that are key to understanding.
Primary colors are red, blue, and yellow. These are the three main colors you use to mix and create other colors.
When you mix two primary colors you get secondary colors which are green, orange, and purple.
Taking it one level further, when you mix a primary with a secondary color, you get tertiary colors. These colors are named after their parent, yellow-orange, red-orange, red-purple, blue-purple, blue-green, and yellow-green.
The color wheel is divided in half by warm and cool colors. The warmth or coolness of a color is known as color temperature. Think about how you can use warm and cool colors in your web design projects to achieve a certain mood.
Starting with warm colors to cool colors, here is an overview of color meanings for individual colors. But for a quick summary, check out this infographic on 10 main colors with their meanings and associations.
Red, along with yellow and blue, is a primary color. Red symbolizes fire, heat, and passion. It can signify love but also anger. In our everyday lives, red is often associated with danger. For example, when a traffic light switches to red, it is a signal to drivers to stop immediately. It’s also the universal color on street stop signs. On electronics, it may mean Off whereas green means On or Go in the example of the traffic light.
Culture can also influence the meaning of color. In Chinese culture, red represents luck and prosperity. In some eastern cultures, brides wear red on their wedding day. In South Africa, it’s the color of mourning. Red is associated with the AIDS awareness campaign and also references communism.
When it comes to design, red is often used to create a sense of urgency and caution, especially on websites and apps. Think about the last time you tried to delete something, say an email in your inbox. Right before deleting you were probably met with a trash icon in red, just to make sure you wanted to proceed with deleting. Since it’s a color that calls attention to itself, for this reason, it’s best to use it selectively as an accent color.
Notice how red is used thoughtfully as a selector, in button CTAs, and for toggling switches on/off.
Orange conveys excitement and encouragement. Since orange is a blend of red and yellow, it pulls warmth from red and optimism from yellow. It’s vibrant, often associated with the sun, the earth, and the autumn season. Similar to the fruit, orange is also related to health, vitality, and immunity. It’s energetic and connected to social extroversion.
Similar to red, orange can call quite a bit of attention to itself in design so be sure to use it strategically. Notice how orange is used as the main accept color in these illustrations, ranging in shades from light to dark, and paired with a complementary deep blue-purple.
Yellow is one of the most bright and energizing colors. Drawing inspiration from the sun, yellow is associated with sunshine and happiness. Think of the cultural reference of a happy face, they’re always yellow with a big smile.
Yellow can also be associated with hope. In some countries, yellow ribbons are shown as a way to honor families of war. It can also be a sign of remorse. If you send someone yellow flowers, it’s an act of apology. Yellow can also be a sign of caution, especially when it proceeds red, such as in a stoplight.
In design, yellow can sometimes be a challenging color to use. While you wouldn’t want to use it for typography that is critical to read, it can be a nice accent color, when used in larger areas it stands out more. Take a look at how the designer uses yellow as an accent in the illustrations and to highlight key words in the headline copy.
Green is immediately associated with the Earth and elements of nature. It signifies growth, renewal, freshness, abundance, balance, harmony, and new beginnings. But green also has a few negative associations mostly stemming from money, guilt, greed, envy, and jealousy.
In design, it’s often the opposite of red. While red might stand for Off on a toggle switch, green is important to show On. Notice how green is used in this website design, from the bold CTAs to a few highlighted words in the headlines, and of course in nature elements in the illustrations. It’s also perfect for the subject matter of the website: Saving our planet.
Blue, the color of the ocean and the sky, represents calm, peace, stability, and responsibility. It’s also associated with spirituality and religion. In the English language, it’s often interchanged with sadness, feeling blue or sad. The shade of blue greatly influences the meaning of its use. For example, light blues lean toward calm and relaxing while darker blues lean toward reliability, strength.
When it comes to design, since blue is often associated with loyalty and trust, it’s no wonder most corporate companies use blue in their logo and branding. Take a look at how these companies use blue in their logos.
In prehistoric times, purple was considered a rare color, it was not often seen in nature and could be expensive to reproduce with dyes which is why the color was reserved for the wealthy. Purple evokes more emotions than most other colors. It symbolizes royalty, nobility, luxury, magic, mystery, creativity, and spirituality.
From science, we’ve learned how purple is the most powerful visible wavelength on the electromagnetic spectrum, notice how it sits next to x-rays and gamma rays on the chart below. This is most likely why the color is often associated with supernatural energy.
There is a polarity when it comes to purple, most people either love or hate the color. In the United States, the Purple Heart is the American award for bravery. Purple is also a symbolic color in many Western cultures for the gay community.
In design, you can either lean more toward a cooler purple by adding blue or warmer by adding red. It can be a difficult color to design with but for that reason, it can also help a brand’s presence stand out. Here at Flux, we use purple as one of our main brand colors. Take a look at how purple is used as an accent color on this website.
Pink is considered a tint since it’s a mixture of red and white. In most cultures, pink is stereotypically considered feminine. It’s used for breast cancer awareness and most feminine products. When expecting a baby, pink means it’s a girl while baby blue means it’s a boy.
Depending on the shade of pink, it can add a vintage or retro feel to your design as the color was often used in the 1950s era in American culture. Remember pink Cadillacs and pink flamingos? Even entire bathrooms, household appliances, and typewriters were available in a popular shade of pink.
When it comes to design, I challenge you to use pink to break the gender norms. Vary your shade of pink to add interest to your design. Here at Flux, aside from purple as mentioned above, pink is our secondary brand color. Notice how a pale pink is paired with a red to communicate the rich flavor of strawberry gelato in this web design.
Brown, the color of the Earth, wood, and other elements of nature is a neutral color. Because it has a warm tone and is found often in nature, it represents wholesomeness, reliability, and dependability.
When it comes to design, using brown can communicate organic or natural qualities, especially in reference to food. You’ll likely want to use shades of brown selectively rather than in large swaths. Beige and tan are slight deviations of the color and can add to the design especially if white and black feel too cold for the goal of your design. The lighter the tone, the more warmth it brings. The darker the tone of brown, the more it will help to ground your design.
Notice how brown is used not only as an accent color in the typography of this website but within the photography in the background.
Black is also a neutral color but one of the strongest. Black stands for power, strength, elegance, luxury, sophistication, and formality. It's bold, classic, and serious. But it can also represent death, evil, and mystery. It’s a traditional color, often associated with mourning in most Western cultures.
You’ll find it hard to pursue web design without using black at some point. As a default, it’s often used for typography since it provides great contrast, especially on a simple white background. In the last few years, it’s become more common to switch from black on white to white on black, especially with the evolution of dark mode.
There are various shades of the color, ranging from pure black to a hint of brown or gray. Depending on the mood and goal of your design, it can be great as a background color, especially if you’re leaning toward elegance and sophistication which is why most luxury car brands lean into using black heavily. Notice how much drama and seriousness the black and white design lends to this website design.
White represents purity, simplicity, innocence, perfection, and simplicity. At one point white actually was viewed as cheap but with the rise of tech and brands like Apple, it’s shifted to represent simplicity, clean, modern, and a touch of elegance and luxury.
Similar to black, white provides great contrast when shown next to another color. It’s the default for most backgrounds in web design, providing a sense of whitespace that helps organize other design elements and guide your eye.
Take a look at how the white background on this design helps to ground the website. With a good use of a grid, small accents of color, and balanced use of whitespace, the design is minimal, yet provides a great user experience.
After diving into color meanings for 10 colors and examples for how to use them in design, what can you do with all this newfound information? Having a strong background on color and how to use it will help you design better logos, websites, posters, or whatever type of design you do. You’ll make more intelligent decisions when selecting your color palettes because you know how color influences the mind and decisions people make.
Check out this video where Ran walks you through a quick and easy 3-step process for how to choose colors for your next design project.
Color theory, like typography or coding, is a skill you can master. Start to notice how color is used around you. If you find something that catches your eye, it could be the color used. Take note, learn from it, and apply it in your next web design project. This article is just the beginning, if you want to learn more about how color relates to design, check out more of our resources and course programs.
We include a lesson on how to use color effectively in our $10k Website Process course. It’s just one of many lessons on not only how to design a beautiful and memorable website but how to define a winning strategy, how to structure your website with wireframes, how to develop and work with $10k clients. Learn more about the course here.
