This is the second article of our series, Anatomy of Colors in Web Design. Over the next few months, we’ll be covering a spectrum of colors. And one color at a time, we will be featuring web design from around the world. If you missed the first of this series, you may want to catch up and read our article Green and Environmental Concept.

Today’s article will explore the use of the color Blue in Web design. Please remember to continue watching this space, as we take a closer look at other colors in upcoming months.

Subscribe to our RSS feed or Follow us on Twitter so that you won’t miss the full series.

Although it is often overlooked and often unappreciated, colors play a very big part in our life. There are infinite numbers of colors in the world. Sadly, not all colors can be seen by our naked eye. Color affects and influences everyone in their work, whether you are an artist, designer or engineer. The ability to mix and blend colors creates new possibilities in today’s already colorful world.

Today we discuss the color Blue and take a look at how it has benefited us.

Blue is the only color which maintains its own character in all its tones… it will always stay blue; whereas yellow is blackened in its shades, and fades away when lightened; red when darkened becomes brown, and diluted with white is no longer red, but another color – pink. — Raoul Dufy, French Fauvist Painter, 1877-1953

Definition of Blue

Blue is a color, the perception of which is evoked by light having a spectrum dominated by energy with a wavelength of roughly 440–490nm. It is considered one of the additive primary colors. On the HSV Color Wheel, the complement of blue is yellow; that is, a color corresponding to an equal mixture of red and green light. On a color wheel based on traditional color theory (RYB), the complementary color to blue is considered to be orange (based on the Munsell color wheel). The English language commonly uses “blue” to refer to any color from navy blue to cyan. The word itself is derived from the Old French word bleu.



Image credit: Wikimedia Commons

Why Choose Blue?

One of the most common colors chosen as their favourite is the color blue. It is favoured by both men and women of all ages. However, traditionally, men have a much stronger preference for blue than women. It may be the calming effect of the color that makes it popular to both sexes. However, it could also be the association of some shades of blue with authority figures, as well as the correlation we place between intelligence, and stability with the color blue.

Blue conveys a subtle connotation of importance and confidence, without being overly serious, sombre or sinister. As such, blue power suits are popular with important corporate players and the color most used for police uniforms. Blue’s long standing as a corporate color, especially darker shades of blue, is associated with intelligence, stability, unity, and conservatism.

Interestingly, some believe that blue slows a person’s metabolism rate and suppresses one’s appetite. As it does not require much effort of the eye to focus, images and objects recede in blue backgrounds. However, if overused, the color blue can create a sense of detachment and coldness. Although very popular with women as well, blue is the predominant favourite of males. As such the color blue is well suited to be used for web sites involving and promoting technology, medical products, cleanliness, air, sky, water, sea and automotives. Another interesting point is that Blue is the favourite color of more than half of the world’s population, and the least disliked color by most cultures.

The Benefit of Blue

Blue is an overwhelmingly “Popular Color”. The color of the sea and sky, blue is seen as trustworthy, dependable and committed. We are surrounded by the color blue, from the blue skies above to the deep blue of the oceans. As such, blue is a constant in our lives every day. The color blue also symbolizes qualities such as depth, stability, trust, loyalty, wisdom, confidence, intelligence, faith, truth, heaven, tranquillity, calmness, and sincerity. Despite blue being a color preferred by men, it is still the least “gender specific” color, with its equal appeal to both men and women.

Blue can be used across a large variety of websites. It is also one of the preferred colors for corporate designs, as such you’ll find it used quite often on big company websites. The communications and web industries use medium shades of blue because it can appear to be sleek and high-tech, especially when combined with shades of grey. In general, lighter shades of blue are often used to promote health and wellness, travel, and relaxation, while darker shades are often used by political and patriotic organisations, legal firms, and sports teams.

As a collective color, it invokes rest and can cause the body to produce chemicals that sooth and calm the senses; however not all blues are serene and sedate. Electric or brilliant blues are dynamic and dramatic, and engaging colors that express exhilaration. Save for such blue shades, in most cases, blue causes the opposite reaction as red.

Peaceful, tranquil, blue causes the body to produce calming chemicals, so it is often used in bedrooms. Blue can also be cold and depressing. Fashion consultants recommend wearing blue to job interviews because it symbolises loyalty. People are also said to be more productive in rooms with blue as its main color scheme. Interestingly, studies show weightlifters are able to handle heavier weights in blue gyms.

Different Type of Blue in Web Design

Let’s take a look at how different types of the color blue apply to Web design, and also when it is used alongside other colors.

Dark Blue

Dark blue is often used for websites that want to be seen as powerful and safe. It also symbolises knowledge, integrity, seriousness, masculinity, and expertise.

Huddle



Light Blue

Light blue symbolizes health, healing, tranquillity, understanding, and softness.

Feed Stitch



Pale Blue

Pale blue gives an ethereal sense to the website and often symbolises delicate, calming, health, healing, tranquillity and understanding.

Squared Eye



Royal Blue

Royal blue like its name gives a regal and superior feel to websites that use the color. It also symbolises richness and sometimes cool aloofness. Dark blue on the other hand often represents depth, expertise, stability, credibility (especially with gold), intellect, wisdom, corporate color, warmth, knowledge, power, integrity, seriousness, knowledge, health, decisiveness, law, order, logic, dependability and serenity.

Les Arts O Solei



Blue with Red, Orange or Yellow

High impact designs can be created with combinations of blue, red and yellow. Add in a dash of blue to cool down a hot red or orange scheme. The high contrast of putting blue and yellow together is sure to grab the attention of visitors.

The Alamo Basement



Blue with Pastel Colors

In combination with shades of pink and pale yellow, the feeling of spring’s wonderful possibilities is created. Aqua, a tone of cyan, is another shade of blue. It gives one the feeling of freshness, pristine, vigour, movement, drama, confidence, strength, individualism, eccentricity, light heartedness, fearlessness and festivity.

Sac Jazz



Blue with Green

When you use both the colors blue and green, one gets a sense of natural peace and tranquillity. Its gentle and soothing earthly palette gives you the feeling of being transported to a green meadow under a vast blue sky with nearby waterfalls to calm your fears.

Aquaadria



Blue with Light Brown, Tan, or Beige

Sky blue and Robin egg blue (also known as eggshell blue) when combined with neutral light brown, tan, or beige is an environmentally friendly color combination.

Morphix



Blue with White

Dark blue with white creates a fresh, crisp, and nautical feel to the website. And the color combination of red, white, and blue is a patriotic color scheme for many countries, including the United States.

The Whitehouse



Blue with Metallic Silver or Grey

The use of dark blue with metallic silver accents provides an elegant and rich appearance. If you prefer an understated elegance, try using grey instead.

Samsung Mobile



Showcase of Blue Identities

Here are some of the corporate websites that have made use of the color blue either on its own or by combining darker and lighter shades of blue and other colors to create a conservative and sophisticated look. Combinations of light and dark blue can invoke visitors’ trust in the product or company.

That Game Company



Reichweite



Marketing Informatico



Icebrrg



E-Systems Organizers



Cloudia



Blinksale



Birdie



Best Electrical Factors



Auramist



9Flavours



Gazelle Touch



Web Design-Fr



Showcase of Freelancers

Blue have been used sparingly in the portfolio of these freelancers. These sites are an excellent showcase of how blue can attract the attention of visitors.

Marko Prljic



Yaron Schoen



Soh Tanaka



Kelvin Carlo Baluyot



Sérgio Oliveira



Sebastian Krull



Sahar Hosseini



Branko Šabarić



Mark Dijkstra



Mahmoud Omar



James A. Mathias



Gustavo Rodriguez



Jan-Eike Koormann



Julio Fragoso



Jesse Stephens



Ana Penović and Boris Ličina Borja



Jae Salavarrieta



Maximilian Bartel



Igor Dimev



Matt Hill



Chris Godby



Brian Murchison



Benjamin Diolez



James Yorke



Tyler Bartholomew



Idan Arbel



Alex Carabi



Showcase of Blue Web Design

These are some examples of websites that have used a variation of the color blue in their designs.

ZS Diamonds



Vegas Uncorked



Twitter



Titkostelapo



Quinns Reef



NHS Foundation Trust



Less Cruise



Los Colores Solvidados



High Class Events



Full Thrown Magic



Cropix



Concord Law School



Champions for Africa



Avatar The Movie



More Resources

Colorcombos: The Combo Library contains pages of blue color combinations (a.k.a, color schemes and color palettes) for you to choose from.

Colourlovers: They have many blue color palettes that can inspire you for your creative projects.

Blue Web Color Palettes: An article that talks about color palettes that feature different shades of blue.

Six Revision: Take a look at their showcase of 30 Beautifully Blue Web Designs.

The Design Inspiration : Take a look at their showcase of 55 Stunning Blue Logos, Websites and Patterns Inspiration.

The Design Mag: Another good showcase of 48 Creative Websites Designed in Blue.

Background Labs: They offer a wide variety of blue backgrounds for various uses.

The Many Facets of Blue

Blue can be a representation of many things to different people. However, it is something you need to be aware of when using it in your design. Who is your target audience and how will they react to the color blue on a web site, a logo or a poster?

What do you think of the color Blue? Share with us your thoughts!