Coastal Media Brand

Moving on from our previous article on defining and recognizing colors, let’s now explore the qualities and characteristics of colors.

We’ll cover the theory and emotional associations behind each color, explaining how people of different cultures respond to each one, and how you can use them effectively through color schemes in your designs. And, of course, we’ll show loads of website examples to demonstrate how this all works in the real world. Let’s begin with a strong one:


A part of the warmer color family, the primary color red is a powerful, emotionally intense color.

the color redthe color red

Naturally enhancing the metabolic rate in people, it has also been shown to increase respiration rates and blood pressure when people are exposed to it. It’s used in traffic systems a lot (think road signs and traffic lights) as red is a high-visibility color that has plenty of impact.

One study even found that bank lines moved faster when red was used more prominently in the bank lobby.

Some associations of the color red include:

  • energy
  • positivity
  • action
  • war
  • danger
  • strength
  • courage, and
  • all things intense and passionate
  • love, sex, passion, desire

What is interesting about red is how it has two almost-direct opposite associations: love and war. Due to red being known as a high-impact color that often represents danger, it’s also associated with many memorable war images.

However, red is known quite heavily for love and matters of the heart – with varying shades of red (from stronger, darker colors to lighter variations such as pink) being heavily associated with Valentine’s Day in Western culture.

In other cultures, red has completely different meanings. In China, red is associated with both prosperity and happiness, as well as being a symbol of good luck. In India, red represents purity and is then often used as a color used in many weddings. However, in South Africa red is the color used most in mourning.

Haar - Portfolio Theme for Designers, Artists and IllustratorsHaar - Portfolio Theme for Designers, Artists and IllustratorsHaar - Portfolio Theme for Designers, Artists and Illustrators

Haar – for Designers, Artists and Illustrators

When using red, it’s often wise to use it more as an accent color than a focal color for the whole of a website. While in some situations it works well as the main focal color, most of the time using too much red in a design can cause feelings of irritation, agitation, and even anger. However, using too little red can also create a feeling of cautiousness and manipulation.

Owing to these two extremes, it can be quite difficult to use red to build the right balance. However, using red as an accent color — particularly on features that you want to enhance or make particular note of, such as buttons or other elements that push a user to make a decision — can be quite effective.


Another color belonging to the warm family, orange is often seen as a bright, optimistic, and uplifting color.

the color orangethe color orangethe color orange

Both youthful and impulsive, orange often acts as a mental stimulant and is seen to be quite balancing.

Some associations of the color orange include:

  • enthusiasm
  • happiness
  • gut reactions
  • spontaneity
  • adventure, risk-taking
  • autumn (fall) and harvest
  • creativity
  • citrus
  • healthy food

Orange is often seen associated with the third season in the yearly cycle: Autumn (or Fall). Due to the changing colors in the seasons, orange offers a warm transition from the brighter colors of summer before the harsher, cooler colors of Winter set in. Orange is also the main color associated with Halloween, which also takes places in the height of Autumn on October 31st.

As well as the associations with nature, orange is seen as a color which evokes enthusiasm and spontaneity in people. A color that encourages adventure and risk-taking, orange (due to its citric associations) also acts as an appetite stimulant, so may be useful in website designs where food or the appetite of the user is relevant.

And thinking about what we said earlier about a lot of the associations orange has with autumn and the transition between seasons — why not translate this into your designs, using orange as a color that offers transitions between two different areas of your design?

When using orange, it’s useful to think of your target market and audience. When young people are your target audience, orange seems to be a popular color. As well as this, orange can be used to get people talking or thinking.

It’s also often associated with a zest for life, adventure, and risk-taking. It inspires physical confidence, competence, and independence, and is linked to extroverted and uninhibited behavior. This aspect of orange makes it a color that encourages activity and a sense of freedom, according to The Color.


The last of the main warm colors, yellow is a bright, creative color.

the color yellowthe color yellowthe color yellow

Known for its ability to promote clear thinking and quick decision-making, yellow is probably most associated with happiness, positive energy, and sunshine.

Some associations of the color yellow include:

  • creativity
  • sunshine
  • happiness
  • energy
  • cowardice
  • deceit
  • warnings
  • instability
  • clarity
  • activity

Yellow, one of the three primary colors, is seen chiefly as a happiness-invoking, creative color and can therefore be used effectively to create designs that evoke feelings of happiness and clarity. 52% of respondents in a study associated the color yellow primarily with joy, which is pretty significant.

A very energetic color, yellow also has a degree of activity that it can pass along in your designs. You can use yellow to create enthusiasm and enhance areas in your design that need action to be taken.

In other cultures, yellow has wildly different associations and meanings. In Egypt, yellow is widely used as the color for mourning and in the Middle Ages, yellow clothing was worn to signify those that had died. In India, yellow is a color that is often used by merchants. In Japan, yellow is a symbol of courage and therefore has positive associations.

Fierce - Bold Photography Theme screenshotFierce - Bold Photography Theme screenshotFierce - Bold Photography Theme screenshot

Fierce – Bold Photography Theme

When designing with yellow, you need to be aware that using too much yellow can sometimes introduce feelings of anxiety due to it being such a bright, “fast-moving” color. Too much yellow can lead to an unbalanced feel for your website. Instead, try to introduce other colors alongside yellow and use yellow as a highlight on a page, to lend focus to the more important aspects of a design.

However, due to the effects yellow has on a person (going back to the “fast-moving” sense it appears to offer), you can sometimes use yellow to your advantage. For example, yellow appears to induce quicker decision-making so having yellow buttons in eCommerce designs may work extremely well — so long as it is in fitting with the rest of your design.

Due to yellow feeling quite unstable, it wouldn’t be a good idea to use yellow on a website where you want to invoke a feeling of stability or security. It also seems that historically men perceive yellow to be a childish color, so it wouldn’t be a good color choice for men’s product websites — though it would be right at home when used for a younger audience like a website dedicated to a preschool or a kid’s craft blog.


Belonging to the cooler family of colors, green is a rejuvenating color and is often described as a natural peacemaker, due to its many associations with relaxing aspects of nature.

the color greenthe color greenthe color green

Some associations of the color green include:

  • spring
  • growth
  • renewal & rebirth
  • balance
  • nature
  • grass & gardens
  • stability
  • possessiveness
  • jealousy
  • envy
  • fertility
  • safety
  • money
  • recycling

A combination of blue and yellow, green offers the mental clarity and enthusiasm of yellow mixed with the more emotionally calm and stable blue. In nature, we see green around us all the time — in leaves, grass, flowers, and much more. Because of this, a lot of the associations we have with the color green are related quite heavily to nature and similar themes such as rebirth and fertility.

Green is often referred to as a color that offers a sense of stability and balance. It could therefore work well to use green in designs where you want to show how a product or service is reliable or safe to use.

One study found that 39% of participants associated the color green with contentment. This statistic indicates a significant portion of people feel a sense of satisfaction or happiness when they see the color green.

On the other side of the coin, green also has lots of associations with jealousy, envy, and possessiveness – so you need to be careful about how you use the colors and ensure you use green more to add balance to a website.

Green has strong links with the recycling market, with green being used in the major recycling logos in the UK and Europe alone. Therefore, it makes sense to use green in designs that relate to recycling or any “green” product, service or company.

In other cultures, green generally has good connotations. In Ireland, as well as appearing on the national flag, it’s a color that is heavily associated with St. Patrick’s Day. Green is also the color of the lucky four-leaf clover, which is probably the most well-known symbol of luck in the world. Green is the traditional color in Islam and is also mentioned in a good light a lot in the Quran, with many of those in Paradise described as wearing “green garments.”


The coolest of all the main colors, blue is often seen as a very reliable and tranquil color, most likely due to the most obvious association of blue with the sea and the sky.

the color bluethe color bluethe color blue

A conservative color, it is often used well in designs that represent cleanliness and an air of responsibility.

Some associations of the color blue include:

  • the sea
  • the sky
  • trust
  • honesty
  • loyalty
  • sincerity
  • peace
  • tranquility
  • intelligence

The final of the primary colors (alongside red and yellow), blue is a stress-reducing color that is often used in designs for masculine and corporate audiences. Blue is a color that invokes the feeling of trust, honesty, and security and therefore lends itself well in particular to designs for products, services, or companies that want to evoke those feelings in their audiences.

Also, a YouGov survey across 10 countries revealed that blue is the most popular “favorite color” globally. In the United States, 40% of men and 24% of women prefer blue, highlighting its widespread appeal.

With its many associations with both the sky and the sea, blue also works well on designs that want to promote those things. For example, if a product relates heavily to the sea (a surfing product, for example) then blue can be used to bring out those familiar feelings relating to the sea and help the audience relate to the product or website more.

The same can be said for any colors that relate to natural things — such as anything outdoors, like grass or flowers.

Innovio - Multipurpose Landing Page ThemeInnovio - Multipurpose Landing Page ThemeInnovio - Multipurpose Landing Page Theme

Innovio – Multipurpose Landing Page Theme

Blue is also known to be an appetite suppressor, so it wouldn’t be a suitable color to use in designs that involve food in some way. You also need to be aware of how using too much blue can be stifling and can almost seem old-fashioned, depending on the shades used.

Some of the best times to use blue in your designs will be for websites that are focused on masculine audiences and also for corporate businesses. That isn’t to say you can’t use blue on other styles of design — don’t be afraid to experiment and have fun with using colors where you might not expect them.

Like with the general associations, many different connotations come with the color blue in different cultures as well. In the Western culture, there is the “something blue” tradition, often used in weddings where the bride is offered something blue (as well as the other traditional “something old” and “something new”) as a token of good luck in her new married life. However, in Iran, blue is the color that is used in mourning.


The last of the cooler color family, purple is seen as quite a mysterious color, usually representing ambition, royalty, and power.

the color purple or violetthe color purple or violetthe color purple or violet

Some associations with the color purple include:

  • royalty
  • imagination
  • power
  • luxury
  • wealth
  • extravagance
  • ambition
  • wisdom
  • magic
  • mystery

A good combination of both red and blue, purple is intriguing and has both the calming, tranquil effect of blue and the energy that red offers. Purple is often seen as a color of luxury and works well in designs that need to show extravagance.

Approximately 29% of people believe that purple represents bravery. This perception ties into its associations with royalty, ambition, and luxury.

Unlike blues and greens, purple is a rare color to come across in nature. For example, purple flowers such as lilies, orchids, and lavender are rare to come across but are very fragile and delicate, yet precious and treated with great respect.

Purple is a popular color in many cultures, for many different reasons. In Thailand, purple is the color of mourning for widows whereas in Egypt, it’s known widely as the favorite color of Cleopatra, who was the last pharaoh of Ancient Egypt. In many other cultures, purple is the traditional color worn by royalty or people with authority. And in the US, there is the “Purple Heart”, a significant US Military decoration awarded in the name of the President to those wounded or killed in battle.

When using purple, you need to be careful of using it too much. While certain amounts can promote a more majestic, extravagant, or luxurious feel to your design, too much purple can also irritate and has even been heard to aggravate depression in some people.

It has been found that most children prefer the color purple to other colors, so it would likely be an effective color to use in your designs that have a younger audience.

Using purple in your designs can be used to boost imagination or creativity and lighter shades of purple also work well in feminine designs. In fact, purple is often considered a more feminine color, with about 23% of women claiming it as their favorite.

Color Schemes: What Are the Qualities of Color?

Color schemes are an arrangement of colors that, once put together, can be used in any form of design — including your designs on the web. It’s hard work to come up with a good color scheme. And it’s easy to notice when colors feel or seem “off” or not quite right. However, when you do make the effort to create a good and effective color scheme — and you put it to good use — this will make all the difference between a good design and one that’s just mediocre.

There are a few main color schemes, including: monochromatic, analogous, complementary, split complementary, triadic, and tetradic.

Note: You might hear the next few terms used quite a bit when discussing color schemes. Here’s a handy little glossary of color characteristics to help you out if you need it:

  • Hue: A “hue” is the color itself –so green, blue, red, purple, etc.
  • Tint: A “tint” is when *white* is added to a hue, making that hue lighter.
  • Shade: A “shade” is when you instead add *black* to a hue, making it darker.
  • Tone: A tone is created when *grey* is added to a hue.


Monochromatic color schemes use one hue (such as blue) and then use various tints or shades of that original color.

monochromatic color wheelmonochromatic color wheelmonochromatic color wheel

These are the easiest color schemes to create as they only involve one hue, so you know that the few base colors you choose will work in harmony with one another.

You can see in the example below how a monochromatic color scheme can work well. This design for Elevate Medical uses just one color for the majority of the design and it is enticing, stays on brand, and hits all the right notes for its niche.

Monochromatic website designMonochromatic website designMonochromatic website design


Analogous color schemes are created by choosing hues that are next to each other on the color wheel. So, for example, blue-green, green, and yellow-green.

analogous color wheelanalogous color wheelanalogous color wheel

The easiest way to use an analogous color scheme is to choose one of the colors as the primary dominant color and then use the other two more sparsely, as accent colors to the first.

analogous color scheme in actionanalogous color scheme in actionanalogous color scheme in action
Analogous color scheme in action in the Tahoe WordPress theme.


Complementary color schemes are created by choosing two colors that are opposites on the color wheel. For example, red and green or purple and yellow. Because these colors are exact opposites, they offer extremely high contrast and have a high impact.

complementary color schemecomplementary color schemecomplementary color scheme

Complementary color schemes can be hard to pull off for this reason and work better when you have elements of a design you want to stand out, rather than using them in fuller doses across the whole of a design. Of course, the Los Angeles Laker’s logo and design go bold with it: 

Los Angeles lakersLos Angeles lakersLos Angeles lakers
The Los Angeles Lakers logo is a bold example of complementary colors in action.

But under most circumstances, a subtler application is best:
Purple and orange complementary schemePurple and orange complementary schemePurple and orange complementary scheme
Classic dark purple and orange combination

Split Complementary

Split complementary color schemes are created by taking one color and then taking the two colors that are either side of what would be the first colors complementary.

split complementary colorssplit complementary colorssplit complementary colors

For example, if your main color is purple, then your other two colors will be either side of the purple’s complementary color yellow — so yellow-green and yellow-orange.

As this color scheme is quite close to the complementary color scheme, it’s still going to have an impact when used, though it can feel a little more balanced and calmer than full-on complementary schemes. Again, when using a split complementary color scheme it’s easier to use one of the colors as the main focus, with the other two colors being used as an accent.


Triadic color schemes use three colors that are evenly spaced around the color wheel, for example purple, orange, and green.

triadic color wheeltriadic color wheeltriadic color wheel

Using triadic color schemes means you usually end up with quite a bright and vibrant design, though this can be toned down slightly by using varying shades and tints of the colors. Like with the previous color schemes, triadic color schemes work best when letting one color have more of a focus, with the other two working as accent colors.

Kinsta makes use of a triadic color scheme well: 

Kinsta triadic color schemeKinsta triadic color schemeKinsta triadic color scheme


Tetradic color schemes work by pairing up two sets of complementary color schemes. It almost works by almost creating a rectangle around the color wheel. An example of a tetradic color scheme is red, green, blue, and orange.

tetradic color schemetetradic color schemetetradic color scheme

What’s great about the tetradic color scheme is that it offers a lot of variety when it comes to choosing the colors that you use, and may offer you more ideas when you’re designing your website. But as with all of the other color schemes discussed here today, a tetradic color scheme works best by allowing one of the colors to be the focus, with the rest being used as accent colors.

tetradic website design exampletetradic website design exampletetradic website design example
Images are an effective way to introduce complex color schemes like this.

Put Color Characteristics to Work in Your Web Designs

That concludes our look at the characteristics of colors. In the next part of Design School for Developers, we’ll examine practical ways of choosing a color scheme. But until then, check out some more articles and tutorials we have on the qualities of color and the role of color theory in design.

Learn More About Color Theory

We have lots of color-related tutorials and articles on Tuts+, from color theory to its practical application in graphics and web design:

Coastal Media Brand

© 2024 Coastal Media Brand. All rights Reserved.