Anatomy of Colors in Web Design: Blue and the Cool Look

Anatomy of Colors in Web Design: Blue and the Cool Look

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.

Blue and Cool Concept

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.

Blue
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
Huddle

Light Blue

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

Feed Stitch
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
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
Les Arts O Soleil

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
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
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
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
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
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
Any Call Team

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
That Game Company

Reichweite
Reichweite

Marketing Informatico
Marketing Informatico

Icebrrg
Icebrrg

E-Systems Organizers
Esorganizers

Cloudia
Cloudia

Blinksale
Blinksale

Birdie
Birdie

Best Electrical Factors
Best Electrical Factors

Auramist
Auramist

9Flavours
9Flavors

Gazelle Touch
Gazelle Touch

Web Design-Fr
Web Design

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
Marko Prljic

Yaron Schoen
Yaron Schoen

Soh Tanaka
Soh Tanaka

Kelvin Carlo Baluyot
Sman96

Sérgio Oliveira
Sergiomco

Sebastian Krull
Sebastian Krull

Sahar Hosseini
Sahar Design

Branko Šabarić
Neboo5

Mark Dijkstra
Mark Dijkstra

Mahmoud Omar
Mahmoud Omar

James A. Mathias
Leihu

Gustavo Rodriguez
Lebloe

Jan-Eike Koormann
Koormann

Julio Fragoso
Julio Fragoso

Jesse Stephens
Jesse Stephens

Ana Penović and Boris Ličina Borja
Jasno Glasno

Jae Salavarrieta
Jaesal

Maximilian Bartel
Indiqo

Igor Dimev
Idimev

Matt Hill
Frisk Design

Chris Godby
Cg Inspired

Brian Murchison
Brian Web Design

Benjamin Diolez
Benjamin Diolez

James Yorke
Become Known

Tyler Bartholomew
Art by Bart

Idan Arbel
Arbel Designs

Alex Carabi
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
ZS Diamonds

Vegas Uncorked
Vegas Uncorked

Twitter
Twitter

Titkostelapo
Titkostelapo

Quinns Reef
Quinns Reef

NHS Foundation Trust
NHS

Less Cruise
Less Cruise

Los Colores Solvidados
Los Colores Olvidados

High Class Events
High Class Events

Full Thrown Magic
Full Thrown Magic

Cropix
Cropix

Concord Law School
Concord Law School

Champions for Africa
Champions

Avatar The Movie
Avatar

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!

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.