A Look into Color Theory in Web Design

Unarguably one of the most important aspects of any design is its colors. Designers create the style of a site, as well as the movement it makes, the emotion it creates, and its purpose based largely upon the color choices they make. Colors are powerful tools and an important thing all designers should understand when creating websites.

A Look into Color Theory in Web Design

Color Terminologies

Many of you may have learned some color basics in school, but let’s quickly review some terminology in order to get a better grasp on colors and how to use them.

Color Wheel Main Groups

Color Wheel Main Groups

Colors are traditionally shown in a color wheel, and from this wheel, we can separate colors into three main groups: primary, secondary and tertiary.

The three primary colors are red, blue and yellow. These colors are the base colors that make up all the other colors on the color wheel.

Mix the primary colors together, and you get the secondary colors. These are orange, green and purple.

Tertiary colors are comprised of the middle colors like yellow-green and blue-green. They are created by mixing a primary color and a secondary color.

Relationships of Colors

There are plenty of terms to describe colors, which will be helpful to know later on when we discuss colors and their emotional meanings.

Complimentary colors are colors that compliment each other well and are located opposite of each other on the color wheel. These are colors like blue and orange, purple and yellow, and red and green.

Analogous colors are those located right next to each other on the color wheel, so they usually match fairly well but provide little contrast when used together.

Color Groups Based on Emotions

There are color groups that are associated with emotions: warm, cool and neutral.

Warm colors evoke warmth like red, yellow and orange.

Cool colors make people think of cool and chilly colors like blue, green and purple.

Neutral colors, as the term suggests, don’t create much of an emotion. Colors like grey and brown are neutral colors.

The knowledge of all these terms can be used to a designer’s advantage to help create meaning and suggest certain emotions in a web design without words.

Types of Color in Design

Types of Color in Design

There are two different color systems and both are used depending on what you’re designing for.

RGB is short for Red Green Blue, which are the three primary colors of the system and is produced with light. RGB is used on televisions, computer monitors, and any kind of screen.

CMYK, which is short for Cyan Magenta Yellow and Key (Black) is created by pigments and is used in print.

Designs on the web should be created using the RGB system.

Making Wise Color Choices to Convey a Meaning

Making Wise Color Choices to Convey a Meaning

Color theory is the practice of using the meaning behind colors to bring about a sensory experience. This practice can be applied to web design with some knowledge and thought.

People will often disagree about what certain colors mean and what colors designers should use to implore a certain emotion. However, what can’t be argued is that consumers do have emotional responses to colors.

When choosing colors for your designs, be deliberate; don’t use colors without purpose. Instead, use colors that are appropriate for your target audience, the message that the client wants you to convey, and the overall feeling you want the user to experience on your site.

Warm colors will bring about sunny emotions and are wisely used on sites that want to call to mind a feeling of happiness and joy. As a case in point, yellow became a popular color in web design in 2009 when the global economy wasn’t doing very well and companies wanted their customers to feel sunny and comfortable on their site.

Cool colors are best used on professional and clean-cut sites to achieve a cool corporate look. Cool colors stir up emotions of authority, establishment, and trust. For example, cool shades of blue are used in many banking sites, such as Chase. It wouldn’t be wise to use cool colors on a site about an upbeat topic because users will get the wrong impression.

Making Wise Color Choices to Convey a Meaning

What Colors Mean to Users

Most colors can be taken in a positive or negative manner, depending on how it’s used, the other colors surrounding it, and the connotation of the site itself.

Here are some general meanings of popular colors.


What Colors Mean to Users

Red symbolizes fire and power and is associated with passion and importance. It also helps to stimulate energy and excitement.

The negative connotations of red are rage, emergency, and anger, which stem from the passionate and aggressive qualities of red.



Orange is a combination of its two neighbors on the color wheel, red and yellow. Orange symbolizes happiness, joy and sunshine. It is a cheerful color, evoking childlike exuberance.

Orange is not as aggressive as red but takes on some of the same qualities, stimulating mental activity. It also symbolizes ignorance and deceit.



Bright yellow is a happy color representing the positive yellow qualities: joy, intelligence, brightness, energy, optimism, and happiness.

A dingy yellow brings about negative feelings: caution, criticism, laziness, and jealousy.



Green symbolizes nature and has a healing quality. It can be used to symbolize growth and harmony. People feel safe with green. Hospitals often use the color of green.

On the other hand, green is symbolic of money, showing greed or jealousy. It can also be used to symbolize a lack of experience or a beginner in need of growth ("green behind the ears").



Blue is a peaceful and calming color exuding stability and expertise. It is a common color used in corporate sites because of this. Blue can also symbolize trust and dependability.

A cool shade can bring about the negative side of blue, symbolizing depression, coldness, and passiveness.



Purple is the color of royalty and sophistication showing wealth and luxury. It also gives a sense of spirituality and encourages creativity.

 Brighter purples can exude a magical feeling. It’s also great for promoting creativity and feminine qualities.

Darker purples can conjure gloominess and sadness.



Although black is not a part of the color wheel, it can still be used to suggest feeling and meaning. It is often correlated with power, elegance, sophistication, and depth. It is said that wearing black on a job interview can show that the interviewee is a powerful individual, and the same goes with websites.

Black can also be seen negatively because the color is associated with death, mystery and the unknown. It is the color of grief, mourning, and sorrow so it must be used wisely.



White—also not a part of the color wheel—symbolizes purity and innocence. It also shows cleanliness and safety.

Conversely, white can be seen as cold and distant, symbolizing winter’s harsh and bitter qualities.

Examples of Colors in Big Companies Sites

We’ll look at some large company sites to get an idea of how they use color and what that color means to their users.



Nike changes their site often, but it is usually dark with mostly black and grey hues. The black shows the power in their product, giving the impression that they sell quality products to sporty people.

White House

White House

The White House website is mostly white and light grey with some blue and red accents. The white symbolizes hope and freedom, showing a value for safety and purity. The red and blue are of course the other USA colors, but the blue shows stability and peace, while the red shows passion and energy.



Amazon’s site is mostly white, which is the best color to use for contrast and readability. It also shows cleanliness and helps users navigate the site freely. There are orange and blue accents to help people feel at ease when on the site, as well as excited and hopeful to find their perfect purchase.



Verizon’s main corporate branding color is red, which is used throughout the site. This helps stimulate the excitement of users, showing a company that sells an exciting and fast-paced product. The white background is used similarly to Amazon, helping users navigate the site by displaying a clean and orderly site.

Best Buy

Best Buy

Best Buy’s site showcases dark blue hues, showing their stability and power in the electronic market. Buyers are making large purchases from Best Buy and need to feel secure and peaceful on their site. The yellow emits happiness and helps people feel excited and joyful while making their purchases.

Charles Schwab

Charles Schwab

Charles Schwab is an investment company, and in an unstable market, they need to make consumers feel peaceful on their site. They use soft and dark blue tones to achieve this, creating a calming and peaceful atmosphere on their site. The neutral brown is another corporate color and helps neutralize intrepid users’ feelings. The orange accents are used to generate excitement in buying stocks and help bring a happier feel to the site.



Dodge’s site is mostly black which allows their images to pop. They use a bright red for accents. The black gives a powerful quality to the site, showing their products off in a sophisticated and masculine light. Black is a great color to use to make products look expensive and worthy of value. The red shows passion and excitement, as well as the hope to drive consumers to purchase the vehicles from a company that values commitment and quality.

Whole Foods

Whole Foods

The main color used in Whole Foods corporate branding, as well as their website, is green. Whole Foods sells healthy and organic food for a premium price. The green in their site design does well to show their healthful and pure values as well as their nature-loving products. They also use some pale yellow accents that are very complimentary to the green, and it gives a joyful value to the site.

How You Can Use Colors in Websites

How You Can Use Colors in Websites

Colors give sites meaning without having to use descriptive words. They create a lot of impact, whether you intend for them to or not. They can help move a user’s eye through your site, creating movement and motion that directs users around a page. As seen in many of the corporate sites, they create emotions and values that help show users what the company is about and what kind of products they are selling.

Use colors to your advantage by carefully selecting complimentary colors and ones that showcase the values you’re trying to sell.

Pairing colors can help change the meaning of a site altogether. Pair a soft blue site that creates calming qualities with a bright orange, and you could change your site to be more exciting and joyful.

Maybe your client thinks the site you’ve designed is too harsh with lots of dark grey hues. Add soft blue colors and your site design could have a more calming and peaceful tone.

Resources for Having Fun with Colors

Resources for Having Fun with Colors

Many sites out there discuss color theory and the usage of color in design. Use these helpful resources below to find color matches and infuse more meaning into your site designs.


Find complimentary color matches and color palettes with this web-based tool.

Design Meltdown

This site categorizes sites based on different genres, including many color categories.

Find the Perfect Colors for Your Website – Vandelay Design Blog

Lots of color resources and tools are listed on this great post.

JavaScript Color Picker

This fun JavaScript tool can help you pick out the colors you want and help you see how they look together.


Hope you enjoyed this comprehensive post on colors and their vast meanings, please share your thoughts, opinions, and your favorite color tools and resources in the comments below!

Related Content

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

This was published on Mar 8, 2010


Roei cpo Mar 08 2010

Shannon :) real nice article, thanks. ( Very helpful )

btw its seems like alot of websites\magazine talked about the Color Theory this month..just saying :P

Zoe Feast Mar 08 2010

Great article on a subject close to a graphic or web designers heart.
Have you heard about the “impossible colors” , yellowish blue or reddish green. Check out to see if you can see them. It takes a bit of practice but they are definitely color not on the standard color wheel.

Hian Battiston Mar 08 2010

Great article, I really liked it! Thanks so much!

Matthew Heidenreich Mar 08 2010

color theory is very important when using design, great and informative article.

Jordan Walker Mar 08 2010

Just what I need to read, color theory has always evaded me.

Skyrocket Labs Mar 08 2010

This is very well presented. I like how it turns colour, which is on the surface a subjective consideration, into an objective one by understanding the relationship that colour has with layout & content. Kudos!

Shannon Mar 08 2010

thanks for the comments! Color is always a fun subject for designers, something I enjoyed doing more research on for this article.

@Roei cpo – I’ve seen that too! I actually wrote this months ago, it’s always luck of the draw when things get posted and other blogs post similar articles. Hopefully I provided something a bit different than the others for you to read about.

@Zoe Feast – I haven’t heard about impossible colors before, interesting article. Thanks for sharing!

App Developer Mar 08 2010

Fascinating. One question: do people react to colours or shades differently in different regions of the world?
ie could one colour mean something different in different cultures?

Daydah Mar 08 2010

Lovely article! Loved it! Thanks for sharing!

Sacha Mar 08 2010

Saying things like “There are orange and blue accents to help people feel at ease when on the site” sounds very arbitrary. I’m pretty sure that Amazon’s site could be green, purple, or blue without it having too much of an impact on the user’s experience as long as the result is clean and usable.

Colors are very important, but it’s a stretch to say that yellow makes you happy or green makes you hopeful. I could show you the same exact color used in a variety of contexts with vastly different results.

Great article! I really liked the use of screenshots to show real-world examples.

A few years ago I developed a learning module for a thesis project focused on this very same topic:

Amberly Mar 08 2010

Great Read. Thanks for putting together this awesome List…
Examples are Great..

Melody Mar 08 2010

It’s funny, I really think the last month has been devoted to color theory posts; I did one myself lol..

spike Mar 08 2010

Nice page, but you really need to address the issue of Colorsync profiles, because choosing the wrong profile can make all your hard work and brilliant design worthless.

Vance Lowe Mar 08 2010

Pop? Did you really use the phrase ‘make it pop’.

I, along with the oatmeal, to this day do not know how to, or have ever seen anything, that ‘pops’.

You lost all credibility with that simple phrase.

Elf M. Sternberg Mar 08 2010

Designs on the web should be created using the RGB system.

I strongly disagree. HSV (Hue, Saturation, and Value) is a much more effective system for describing color, especially after you master the necessities of tone and texture. Hue is your angle on the color wheel, so understanding hue means understanding the relationships between colors on the color wheel. Value is how much black is in the color; Saturation, in contrast, how much white; tone describes how much grey.

Being able to speak in these terms helps far more than RGB, which is an artificial description of color imposed upon us by the rendering mechanism, the computer monitor. RGB is not a meaningful way of talking about color by itself.

Both Photoshop and Gimp provide HSV right alongside RGB, so you have no excuse for not using it. Once you’ve described the HSVs for your chosen color scheme, conversion is automatic. Using HSV, you can discuss with authority the reasons behind your color choices: not merely the emotional tone set by the primary colors, but also the complimentary nature of the brightness and contrast between them.

Shannon Mar 08 2010

@App Developer – interesting question, I would think they would. Maybe there is a post or resource out there to answer this question better but I would assume your region would affect your opinions and beliefs in life.. religion, family, and everything around you has an impact as well.

@Sacha – Colors do actually affect your mood and the way you perceive a site.. I’m quite sure Amazon carefully chose their branding colors and the way color was used on their site. Lots of good resources out there that talk about this, check out some of the resources listed in the article or do some surfing around on Google, lots of documentation out there :) But I do agree, the same color used in different contexts can change its meaning, very true.

@Amy – what a great thesis topic! I’ll have to look through your site in more detail when I get a chance, looks great.

@Melody – great minds think alike, right? It’s great to see all the posts about it, they all seem to have a different take and bring a new topic to the table on color theory.

Michael Aleo Mar 08 2010

Too often these are forgotten by designers, even though it’s really Design 101.

Mike Brady Mar 08 2010

This is a great article! I think anyone interested in design should read it, the new guys and seasoned designers.

Another helpful resource for creating color themes is Adobe’s Kuler: I use this all the time in design.

Thanks for posting this article!

Jenna Molby Mar 08 2010

Great post! I’m always so lost when it comes to color theory…

Daniel F. Mar 08 2010

amazing and very useful article, thanks

Thank You very much!
It was very helpful for a little web designer from Germany.

Squirrel Mar 08 2010

Complementary is misspelled.

Lee Fuller Mar 08 2010

A great article… Thank you.

excellent resource.

Photografied Mar 08 2010

I love color theory! It’s so poetic.

Photografied Mar 08 2010

Duane Mar 08 2010

It is posts like these that remind me why I keep coming back to Six Revisions. Great summary of color theory…Excellent post!

subeesh Mar 08 2010

Geat lesson for learners. I appreciate your effort!

Great post.., make me wondering. Are you gonna continuing the article? I mean, another theory about the important aspects of web design. Thanks!

denbagus Mar 09 2010

Great article.. thank you Dainis.

Great article! Much appreciated.

Natalie Mar 09 2010

Very informative article! Thanks!

Heart Mar 09 2010

Amazing piece. Thanks!


vinod Mar 09 2010

Thank you Shannon Noack for nice article. It is very useful

Antoine Guédès Mar 09 2010

Shannon it’s an awesome article. It’s for me the best since 2010 started.
You explained the color theory really well.

Noel Wiggins Mar 09 2010

I often get fascinated when I hear how “design” can effluence a buyer to do something. As a designer I want to say that it can but I have to say the more and more I think about it I am not convinced that silhouetting images combining them with some graphical elements or textures matched with fonts a color could really be that powerful.

One thing that I can agree with is the power of color when it is used in a bold fashion. But when done subtlety I think colors can picked at minimum.

But I am not too convinced that there is a clear definition, to color, I think it is still interpreted by the user. Red could be sexy but it could also be danger, and blue can be corporate but it can also be depressing.

I think I will stick to Van Gogh’s color theory which was to pick colors at random “who really cares”.

Alessandra Mar 09 2010

Very good article! Thanks for sharing so many useful knowledge. The links at the end are very useful too. Thanks!

Hillary H. Mar 09 2010

This is a great resource, thank you so much!

David Swinstead Mar 09 2010

How can an entire article on web colour usage not even once mention the risks associated with not considering colourblindness?

Most web users are male. 1 in 10 western males are red-green colourblind.

Gregor Hoffleit Mar 09 2010

Pardon me, but I found it rather confusing that the introductory paragraph talks about an RYB model (red, yellow, blue as primary colors), while the big color wheel illustrates RGB (green as primary color). Perhaps you could replace that with an RYB wheel?

web design Mar 09 2010

This article is informative and gives a great insight into the colour theory. The screen shots are a good examples.

Shannon Mar 09 2010

@Elf M. Sternberg – you bring up some good points, but the web itself uses RGB so choosing colors for RGB is still most important for web design.

@Photografied – that does look like a great book, thanks for sharing!

@Free – I will consider continuing the discussion in the future with another article if there is interest in it. Glad to know someone would like to see another one on it :)

@Noel Wiggins – I don’t know how you can be a designer without believing design has an effect on buying decisions and consumers! It absolutely does and it’s a proven fact actually. Check out some of the other resources in the article and in the comments, lots and lots of resources online and in print have been published on consumers buying habits and design.

@David Swinstead – I’m not really sure you can do much to correct for color blindness on websites.. colors will have less impact sure, but you can’t do much about it..

@Gregor Hoffleit – RGB and CMYK are discussed in this article, there can only be so much imagery to support the text :) Thanks for joining in the discussion!

Rudy C Mar 09 2010

Interesting article. I found the Smashing Magazine article with 3 parts to be more in-depth but its always good to read more on a particular subject not often discussed enough.

Its all about the basics and fundamentals when it comes to good design. Glad you shared.

Prema Mar 10 2010

The concept is really helpful and brilliantly close to reality.

Skipp Mar 10 2010

I have made the same comment about another similar article. You have the THEORY wrong. Website are viewed on a monitor, (unless you print them out) therefore website use the additive system in which the primary colors are Red, Green and Blue, and the secondary colors are cyan, magenta and yellow

Demir Mar 10 2010

amazing article for beginners.

David Swinstead Mar 10 2010

You *can* do things to allow colourblind users to use your site in the same way as everyone else. It’s all down to the colours you choose to use, which is why it is so important to mention it in an article about choosing colours.

An awareness of the problem and willingness to care is a good start.

In today’s age of top-quality accessible web design I would expect the most common visual impairment to be brought up in an article that is exactly on the topic.

Very helpful and informative article, an absolute must for all designers who (like me) takes colour for granted. Lovely selection of colour websites, very interesting to see how companys use certain colours to portray a ‘feel’ and gain users confidence the the website.
Great post!

Shannon Mar 10 2010

@David Swinstead – You certainly can’t cover every aspect of color in an article like this, but I did my best to touch on all of the items that I felt were most important, colorblindness is outside of those parameters in my opinion. The comments section allows people to add to what the article talks about, expanding the conversation. Thanks for your ideas, maybe you should think about writing an article for Six Revisions on the topic?

great informative article. i always enjoy reading things on color theory. thanks!

David Swinstead Mar 11 2010

@Shannon That’s not actually a bad idea. Perhaps instead of just whining when other people aren’t aware of colour-blindness, maybe I should do something proactive about it :)

Colette Gallagher Mar 12 2010

Wow this was an incredibly fascinating article! I always wondered why so many banks and corporations have blue logos, and the meanings of the colors were both interesting and useful. Great stuff. I really learned a lot.

prashish Mar 13 2010

great article.. very helpful. I loved it

Antonio de Castro Mar 14 2010

The proper use of colour in design, print, web or advertising is always a must. Evem though some clients have low feeling and are seldom colour sensitive, a professional wea agency should have that mission: provide insights, clarify choices and defend a great work done.

standalonecomplex Mar 17 2010

Am so grateful for these article am one of those web designers who could differentiate shades of blue even if it meant to save my life lol beautiful article

standalonecomplex Mar 17 2010

i meant couldn’t

tomkis Mar 25 2010

Thanks for great article, but colors are very complicated. You can read and learn about colors, color’s schemes etc, but if you want to be good designer you have to “feel it”. Unless your ambition is “mass production” of web sites. H.Ford did it with car industry…all black!

Bradley Davis Mar 28 2010

Great article. working with colors is always difficult to get a clean match. Some very useful points to consider.

Ronnie Saini Mar 29 2010

Great post on Color Theory!

thanks for sharing

Tim Sparks Apr 01 2010

Thanks for the article. It was very informative and really makes you think about things. This is where audience research can really help you with your site.

Anatoly Gilderman Apr 07 2010

Really nice article. You should do a lot of this.

I like reading the meaning of each colors.

You a lot of information to your readers

Avangelist Apr 07 2010

Is it informative though? Not when you look at the title of the subject.

5 very loose paragraphs at the end relate to the subject. The rest is a regurgitation of the same old same old on colour theory.

Very disappointing. I expected something actually advising me on how to choose colour palettes for my site/web app.

Things like, how many colours should your palette consist of, contrast between function and form, and as someone else pointed out, accessibility and usability through colour.

I accept it is a broad subject, but you kinda refined your topic to a point where explaining colour theory should be a brief intro not the entire thing.

Web Design Apr 22 2010

interesting choices on color but it works for webdesign stuff thats for sure

Kat Skinner Jun 08 2010

I personally use Kuler by Adobe for many of my color schemes:
It really helps when I have an idea of what sort of colours that I would want to use (i.e. a brown colour scheme like at, however by using Kuler it saves me plenty of time of trying to match several colours in a theme thats effective. A quick trip to Kuler, I can save colour themes, look at thousands of uploaded ones, and quickly and easily make my own. Its easy to edit someone else’s as well, so if you like the basic colour scheme idea, but want ever so slight variations, its easy to do. Plus its all free. After all, why pay for something when you can get the equivalent for free?

In regards to the post information, I agree with Avangelist that the post was repeating much of the same information that so many design websites state. After a while, you have completely memorized that one colour can represent love, or hate. It would be particularly useful to have an article that covers how to pick suitable colour schemes, or even something along the lines of issues with certain colour schemes (such as international representation and symbolism of different colours in far more depth). Providing example websites was quite helpful however, and allowed viewers to gain a better understanding of what you were saying Shannon, so thank you for taking time to source some respectable websites out.
But again, I must agree with Avangalist that something more specific to more advanced users would be greatly appreciated.

For screens- computer monitors, Televisions etc- primary colors are Red, Green and Blue, and the secondary colors are cyan, magenta and yellow! You did not clarify that ever.

I do believe in the psychological impact of color but not these vague notions of color (universally) evoking actual emotion or prompting response more than another color could. And, of course a viewer’s interpretation of that color varies based on many factors including their personal upbringing and geographical location.

franck Aug 27 2010

Excellent post, keep it up.

Craig Sep 15 2010

Colour theory is very important and can be sometimes overlooked or ignored when developing a website design, great and informative post! Thanks

hey, thanks a lot! I’m generally not very much into interpretations and more on instinct but your explanations make a lot of sense and i liked the examples. You’ve convinced me towards orange for a jokes design.
Thank you for the time and quality you put into this!

Carlos Dec 19 2010

Great article. Thanks for the really usefull tips and links.

Charles Jan 09 2011

I think this a good article but I like to see some more scientific research on the subject. If the same site used red colour for 1 month and then blue colour for 1 month. what we’re the results on conversions or user opt in rates?
Many Thanks Charles

Yvonne Mar 31 2011

Has not been difficult, then does not have attains.

Fortune3 Mar 31 2011

We love all the colors and images used in this post. We believe the white, as said, really is best for design for contrast. Colored backgrounds get clouded. Look at Google for example…

Michael Leggs Apr 19 2011

I have always been aware of color associations and the use of different colors in advertising to evoke certain emotions, but somehow never gave it much thought when it came to website design color schemes. I’ve mostly used color scheme tools like Color Scheme Generator ( or Adobe Kuler, but only to make sure my website’s color combinations weren’t too crazy. I should probably use more color theory when matching my clothes. :-)

Derek Jun 17 2011

I don’t think the Best Buy’s webpage has any design.

Nice work. Suzy

Sanjana Oct 18 2011

Nice work Shannon! A subjective topic like color always tends to have people leaving disgruntled comments. :) But it’s useful information that’s well presented – great read, thanks!

kelsie Nov 07 2011

wooooohhoooo, colour is amazin!!;P

Never Paint Again Nov 09 2011

We are currently looking at changing our site colour (a dark blue), to something warmer and welcoming. As we sell paint, color for us is extremely important on the site! A great article by the way, thank you. :)

This comment section is closed. Please contact us if you have important new information about this post.