How To Choose Colors For Websites

Color schemes

Although I will be criticized for skipping the basics, it is better to skip writing about why RGB is for web and CMYK is for print and other similar notions. Instead, I will jump directly to things that not everyone knows. For example, color schemes.

In color theory, a color scheme is the choice of colors used in design for a range of media. For example, the use of a white background with black text is an example of a basic and commonly default color scheme in web design.

Color schemes are used to create style and appeal. Colors that create an aesthetic feeling when used together will commonly accompany each other in color schemes. A basic color scheme will use two colors that look appealing together.

Monochromatic

Monochromatic

Image source: christmas-connections.co.uk[3]

A monochromatic color scheme consists of different shades and tints of one single color. These color schemes are easy to get right and can be very effective, soothing and authoritative.

Analogous

Analogous

Image source: insurancejack.com[4]

Analogous colors are colors that are adjacent to each other on the color wheel. The combination of these colors gives a bright effect in the area where they are used. These colors have similar light ray wavelengths, so they are easiest on the eye.

Complementary

split-analogous

Image source: Moto 360[5]

Complementary color schemes are created with colors that are opposite to each other on the color wheel, such as blue and orange, red and green, purple and yellow. These have a more energetic feel, making the colors look more vibrant and strong.

Split-analogous

split-analogous

Image source: denisechandler.com[6]

Such a color scheme includes a main color and the two colors one space away from it on each side of the color wheel.

Split-complementary

tvsafety.org

Image source: tvsafety.org[7]

This color scheme is possible when you use two colors adjacent to the complimentary color of your base color. The contrast is toned down, providing a more sophisticated combination.

Triadic

Triadic

Image source: Ranganath Krishnamani[8]

These are created by three equally spaced colors on the wheel, like red, blue, green or orange, purple, green. Triads with primary colors are garish, but secondary and tertiary triads provide a softer contrast.

The meaning of colors

The human eyes and bran experience color in many ways, physically, mentally and emotionally. This means that color themselves have meanings, which may be different from one culture to another.

Red

jamvisualthinking.com

Image source: jamvisualthinking.com[9]

Red is a stimulating and exciting color, often being associated with passion, power, but also with anger and violence. It has the physical effect on people of raising blood pressure and respiration rates. It is often used on warning signs to show danger, but it also suggests strength determination and boldness.

butterfly.com.au

Image source: butterfly.com.au[10]

In web design, red can be a very powerful color, but if not used properly or used more than necessary it can have an overwhelming effect, especially if it’s a bright red.

It has some specific meanings in different cultures. For example in most parts of Africa it is used to indicate death and mourning, in France is associated with masculinity, in Asia with marriage, prosperity and happiness.

Yellow

Yellow

Image source: Nick Buturishvili[11]

Everybody considers yellow the most energizing color from the color wheel. It is associated mostly with the sun and its shine, transmitting warmth and happiness. You will see it mostly on website that are targeting children because it attracts their attention easily. However, it is also associated with deceit and cowardice. Strangely enough, it is also associated with hope as well as with danger.

roome.co.uk

Image source: roome.co.uk[12]

It is important not to mess up when designing for clients who are from various parts of the world. This is why you should know that yellow is associated in Buddhist cultures with priests, in Egypt and Burma it signifies mourning, in India it is the symbol of merchants and farmers, in Hindu cultures it is used to celebrate the festival of spring and in Japan it is used to show courage.

Blue

Blue

Image source: intercom.io[13]

The most common elements of our lives that are blue are the sea and the sky and it is used to represent calmness and responsibility. On the internet it is mostly used on sites who want to transmit that they have a solid background and they are reliable.

In most parts of the world, blue is considered a masculine color, but be careful when using it in China, because it is mostly used there for little girls. Also, in Iran it is the color of mourning.

Green

Green website

Image source: smartnclean.fi[14]

Green is almost always associated with positiveness and it can give users the feeling of calm and optimism. However, it can also represent envy or jealousy. This color can have a balancing and harmonizing effect, being very stable. Its best usage is in websites that are related to nature, wealth and stability. Lighter shades of green, like light green or lime, are used to express growth, relaxation, healing and success.

Green website 2

Image source: jurajmolnar.com[15]

Green is very important to some cultures. For example, by Islamic people it is associated with paradise, while the Irish are associating their whole country and the very popular St. Patrick day with this color.

Orange

Orange

Image source: Mahesa Kama[16]

Orange, as well as yellow, is a very energetic and vibrant color. It is a more balanced and less overwhelming color than red, being friendly and inviting. The reason why orange is used by hunters and highway workers is to attract attention and it can be used in web design with the same purpose.

Purple

Purple

Image source: Tatev

Purple has been associated since forever with nobility so you will mostly see it on sites related to wealth. It signifies creativity, imagination, but it is also a color used for romantic scenes.

It is a delicate color in some cultures, in Latin America being the color that indicates death. The same thing applies to Thailand where it is worn by widows who are mourning their husbands, while in Japan it represents ceremony, enlightenment and arrogance.

Neutral colors

Neutral colors

Image source: davidholjevac.com[17]

Neutral colors like black, gray and white are used in various forms in designs, mostly to allow brighter colors to have a better impact. Black is used to suggest power, authority, sophistication, elegance, mystery, while white is associated with perfection, virtue, innocence, lightness and truth. Most of the times, these two will be found on websites along with grey to provide an equilibrium between them.

Color scheme generators

Most of the times, it’s easier to use a color palette generator than picking the colors manually from a color wheel. There are numerous color generator tools[18], but I found that only a few do the actual job that most designers are looking for. Here are a few examples of color generators that you can use.

Adobe CC
[19]

Adobe's Kuler

Sphere: Color Theory Visualizer
[20]

Sphere: Color Theory Visualizer

Contrast-A
[21]

Contrast-A

Color Scheme Designer
[22]

Color Scheme Designer

Color Wizard
[23]

Color Wizard

References

  1. ^ (www.designyourway.net)
  2. ^ Usability (www.designyourway.net)
  3. ^ christmas-connections.co.uk (www.christmas-connections.co.uk)
  4. ^ insurancejack.com (www.insurancejack.com)
  5. ^ Moto 360 (www.motorola.com)
  6. ^ denisechandler.com (www.denisechandler.com)
  7. ^ tvsafety.org (www.tvsafety.org)
  8. ^ Ranganath Krishnamani (dribbble.com)
  9. ^ jamvisualthinking.com (www.jamvisualthinking.com)
  10. ^ butterfly.com.au (www.butterfly.com.au)
  11. ^ Nick Buturishvili (dribbble.com)
  12. ^ roome.co.uk (www.roome.co.uk)
  13. ^ intercom.io (www.intercom.io)
  14. ^ smartnclean.fi (www.smartnclean.fi)
  15. ^ jurajmolnar.com (jurajmolnar.com)
  16. ^ Mahesa Kama (www.setudio.com)
  17. ^ davidholjevac.com (www.davidholjevac.com)
  18. ^ color generator tools (www.designyourway.net)
  19. ^ Adobe CC (kuler.adobe.com)
  20. ^ Sphere: Color Theory Visualizer (mudcu.be)
  21. ^ Contrast-A (www.dasplankton.de)
  22. ^ Color Scheme Designer (colorschemedesigner.com)
  23. ^ Color Wizard (www.colorsontheweb.com)
  24. ^ Say something to Bogdan Sandu about this article. (twitter.com)