Effective Examples of Color in Web Design

Designers know that there are several elements to keep in mind when creating beautiful web designs.One of the crucial elements to consider when creating web designs is color. Color plays an important role when creating engaging and appealing web sites due to the fact that color also has visual and psychological properties as well.

Web pages are a visual medium and color is an important property because of this. Color has the power to stimulate as well as provide an esthetic response from individuals. There are several different emotions and associations that are attributed to color. For instance white is usually associated with cleanliness and peace. Ever heard the term “raising the black flag of peace”? Yeah, neither have I.

In this showcase I will discuss some popular colors and break down their individual influence. I have gathered examples of websites that best represent their attributed colors.

White:

White represents purity and cleanliness. White is also often used in the medical field to imply sterility. This is why white is a great color to use for minimalistic site designs.

instantShift - Apple.com

When people think of clean and beautiful aesthetics, Apple comes to mind. Their website has a white color scheme that just resonates clean and stylish.

instantShift - Thesum.ca

The Sum is another great example that uses white. Minimalistic design can be difficult to pull off but The Sum does a fantastic job. They also have a great sense of negative space.

instantShift - Bearded.com

Many people can agree that children represent innocence, which is why white is a fantastic color to use for a children’s museum.

instantShift - Medicalspark.com

Medical Spark employs a white color scheme. In fact some doctors where white, a color that implies sterility. You can also see the blue incorporated into the logo and site. Blue is a color that is associated with trust.

instantShift - Paravelinc.com

Another great example of clean and minimalistic design.

Red:

There are several associations with the color red including rage, courage, passion, strength, love, and yes sex. It is a diverse and very powerful color. Studies have shown that this color also promotes a sense of belonging and affiliation.

instantShift - Revolver

Nothing says power like using word such as lock, load, and fire an expression used when going into a tough situation. The name of this software just happens to be Fire, and red just happens to be one of the colors found within fire.

instantShift - Holiday to go

Red is used to try and manipulate people in order make quick decisions. The goal of this website was to encourage users to buy their food before a certain deadline.

instantShift - Boxingforfitness.com

Boxing for Fitness uses red in order to bring the feeling of strength, courage, and passion that goes into this sport. Furthermore red is a color that is usually used for a boxer’s gloves.

instantShift - Margotblanche.com

As mentioned before red is a color that is associated with passion and sex. Margot Blache uses these colors well and creates a great page that is alluring and visual stimulating. It does not hurt to have a sexy image as well.

instantShift - Warchild.org.uk

There are tons of emotions that are associated with war. War Child uses red to stimulate your senses and play with your emotions. Red is also the color of blood, which unfortunately is spilled senselessly in war.

Blue:

Blue is a very popular color that represents stability, loyalty, trust, and tranquility. Due to the trust and loyalty factor many corporate companies like to use blue in their logos as well as their websites.

instantShift - Bigbluebus.com

When you are establishing a public transportation service you want it to run smoothly, and be consistently on time. Big Blue Bus achieves this sense of trust with their use of the color. Not only that but this public transportation runs by Santa Monica, a city close to the beach.

instantShift - Orionadvisor.com

Blue is also a color associated with expertise. Orion Advisor wants you to trust them with their professional services.

instantShift - Bird.ie

Birdie is another great example of a web site that uses the color blue to establish themselves as professionals.

instantShift - Blueshieldca.com

As stated before blue is a color that is associated with trust and stability. Blue Shield uses this color in order to give their customers a sense of trust and reassurance when getting health care.

instantShift - Calicojackrums.com

Blue also happens to be the color of the sea and sky. The sites homepage gives the user a sense of relaxation, which is what Calico Jack Rum probably had in mind when they were branding themselves.

Green:

I am sure we have all heard of the term “going green”. That is no coincidence as green is synonymous with nature, well-being, safety, and growth. There is no doubt that this color is great for web sites in health, and any industries relating to nature. It is also funny to note that green can also imply sickness and jealousy.

instantShift - Acorn4mortgages.co.uk

Green is a color associated with money, mortgages, and lack of experience, first time buyers.

instantShift - Nutrifield.com.au

Everything about this site supports the idea of growth and nurturing.

instantShift - Bmore-urbanforestproject.org

Another great site that uses green to represent nature. The twist. This is the urban forest.

instantShift - Le-moulin-de-sauvage.com

More use of green as well as images of associated with nature.

instantShift - Emotionslive.co.uk

This website has an interesting color scheme. As we have seen from the rest of the examples green is usually associated with nature, and growth. Still this is a nice shade of green that is used in the site.

Yellow:

Yellow is a cheerful color and is quite the attention getter. It is usually associated with happiness and optimism. It is also a difficult color to use and can be over powering is overused.

instantShift - Creativespark.co.uk

Yellow is a also a light hearted color, childish I might add. It’s also a very energetic color and this is used to represent the energy at Creative Spark.

instantShift - Roome.co.uk

Yellow is also a color associated with intellect. Rome just happens to be a website where specialists can find jobs and employers can find those intellectual individuals that can take on the those creative tasks.

instantShift - Designcharts.com

The use of yellow in this web site is used as an attention getter. There is also a great use of black, which sets off the text.

instantShift - Iamalwayshungry.com

This is another website that uses yellow to stimulate the users senses. Yellow produces and effect that stimulates mental activity.

instantShift - Beercamp.com

We all know that beer brings fun times and feelings of happiness. As noted before yellow is a color associated with joy and happiness. A fun color for a fun beverage.

Black:

There are several meanings behind the color black including negative connotations such as death and despair. It also has positive psychological properties, which is why black is also associated with elegance, sophistication, and authority.

instantShift - Killercreations.co.uk

This is the website of Dennis, a UI designer. His use of black makes his sight comes off as elegant.

instantShift - Armani.com

Is it any surprise that Armani chose black as their sites color. This web site just resonates with style and sophistication.

instantShift - Blakeallendesign.com

Black makes an excellent choice when you want to show contrast, especially when you use. The use of white in this website really stands out.

instantShift - Loftresumes.com

Black is used in this web sitein order to represent their services, which is giving your shoddy resume a sophisticated overhaul.

instantShift - Goodmix.fm

This is stylish looking website, thanks to the use of black.

Like the article? Share it.

LinkedIn Pinterest

14 Comments

  1. Thanks for sharing! This is a really inspiring post. It looks so nice when you put all this together.

  2. A very comprehensive post on web design. I got fueled up to read this all. Actually professional colors on website must have a great impact on the visitor or customer to get an idea that they are viewing a professionals site.

  3. Many awesome website, they all have great color. Thanks for sharing.

  4. these are creative examples for me as designer and helpful to choose color combinations while making a thematic website design.

  5. True post. You have analyzed and presented amazing information. Color of the web design sometimes states its nature. I like white and blue ones. It looks awesome.

  6. Great example of a RED and Black http://www.eyeseewebdesign.com

  7. Wow Awesome tips for marketing efforts. Thanks for sharing this nice post.

  8. Great post and some nice inspiring work, thanks for sharing.

  9. What about purple/pink? :) like cvfolio.com

  10. hey Luis!

    Thanks for listing our site here. Just a note, we recently updated the look of the site and wanted you to be aware.

    All the best,

    Jud

    • Hay Jud, we’ve updated the screenshot.

  11. As a creative director of 10 years, I’m loving the fact that different colors are starting to come into design. I’ve just seen this article and it still stands today for my money. So many sites had started to use black with an accent of orange (just like the phone supplier) that the web was becoming very mundane. Every agency site was set to a black background and the style of menus and accent colors didn’t help. Now we’ve got these bright vibrant colors coming into play and sites are starting to reclaim their own voices again. Long may it continue…

  12. I work within the creative department for a digital agency and I’m all for color. I think now that the web has gone truly mobile, color is really important. Mobile handsets are normally black and therefore the content is framed in a dark color. The screens are usually full of brightly coloured apps that are filled with life and I think it’s this trend that sites now have to contend with. Imagine scrolling through the app icons on a regular smart phone and seeing all the amazing colors and fonts etc. Then surfing to a website with a plain, corporate, boring palette. It doesn’t work for me – sites need to come alive in the hands of mobile browsers…

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *