Anatomy of Colors in Web Design: Pure As Snow White

Anatomy of Colors in Web Design: Pure As Snow White

Welcome to the final article in this series, we have previously covered the anatomy of green, blue, yellow, black and red in web design, and for this final anatomy we are taking a look at white.

Trying to define white as a color used in website design perhaps seems a little illogical – when designing for the web, white is what you get when you add nothing to an area – so is white actually a color in web design? Some may not define white as a color but rather tones. Some define white as a neutral while others say it’s the combination or absence of color.

This article will be focusing on the effects of a lot of literal white space and the use of white with other colors in web design.

Definition of White

White is the opposite of black, and as such it represents lightness in contrast with darkness. It is the color most associated with innocence, perfection, honesty, cleanliness, newness and new beginnings and neutrality.

White is visible when light contains all the wavelengths of the visible spectrum.

White is produced by mixing appropriate intensities of the primary colors of light: red, green and blue.

Shades of White

The Benefits of White

White is, as previously mentioned, associated with cleanliness, which in turn is associated with minimalism in all forms of design, including web design.

White has no hues, but there are shades of white – in color theory, a shade is a pure color mixed with black, so strictly speaking, a ‘shade of white’ would be a neutral gray. However, there are some ‘off-white’ colors such as cream, eggshell, ivory, vanilla, etc.

White and very pales shades of color are associated with purity and are often the choice of health clinics and such businesses and associations, usually complemented by another clean color such as blue.

Shades of White

The generally recognized shades of white are shown in the images below:

Shades of White 1

Shades of White 2

Shades of White 3

Personal opinion may render some of the above shades outside of the white spectrum, but they have names that our brains tend to associate with white, and they are recognized as white shades.

White Complemented by Other Colors in Web Design

Quite obviously, white cannot be a stand-alone color in web design. It doesn’t have very contrasting shades as other colors, such as blue, do. Therefore, it always needs a complementary color or colors, and we will be taking a look at some of those combinations in this section.

White and Black

The combination of white and black in web design is usually a minimalist design, giving a clean message of professionalism and prompt service.

Dunkelblaufastschwarz
Dunkelblaufastschwarz

Ruy Adorno
Ruy Adorno

Nicolas Desle
Nicolas Desle

Danone – One Yogurt a Day
Danone - One Yogurt a Day

Sam Markiewicz
Sam Markiewicz

Ford Kuga
Ford Kuga

Wandi Studio
Wandi Studio

Jamie McLellan
Jamie McLellan

Castus
Castus

Studio Fabrica 105
Studio Fabrica 105

White and Blue

Apart from being the most popular choice of color in web design, blue is cool, fresh and clean in most of its shades. White and blue is an obvious choice for health clinics and institutes, as well as for any project that needs to project a cool approach, blue can also represent masculinity.

Mezzo Lab
Mezzo Lab

Jean Paul Gaultier
Jean Paul Gaultier

Polargold
Polar Gold

Box
Box

Lead Zeppelin
Lead Zeppelin

WWF – All For Bear
WWF - All For Bear

Volkswagen Sommer 2012
Volkswagen Sommer 2012

Corning
Corning

Angela Morelli – Water
Angela Morelli - Water

WWF – Food Story
WWF - Food Story

White and Green

This combination of colors evokes the perception of organic or environmentally friendly design.

Quadrifolia
Quadrifolia

Oreakids
Oreakids

Fitz Fitzpatrick
Fitz Fitzpatrick

Hatched London
The color of this website is turquoise, which has a greater amount of green than blue in the RGB value (52, 209, 198), but whether this is green or blue is a matter of perception.

Hatched London

Lookout
Lookout

Yann Kozon
Yann Kozon

Knock Knock Factory
Knock Knock Factory

Andreas Fretz
Andreas Fretz

Banjax
Banjax

Green Chameleon Design
Green Chameleon Design

White and Yellow

White and Yellow is the color of eggs, so could be used for nutrition websites. Yellow is also the color of sunshine, which can be associated with newness, cleanliness and freshness. White and yellow together is an ideal combination for minimalist web design.

Co-Op Branding
Co-Op Branding

The Enterprise Foundation
The Enterprise Foundation

Adam Hartwig
Adam Hartwig

Inhouse Filming
Inhouse Filming

100 Ans de Tour
100 Ans de Tour

FK Agency
FK Agency

Vanmoof
Vanmoof

An-Ni Wang
An-Ni Wang

Urbangap
Urbangap

La Moulade
La Moulade

White with Red or Orange

Red and orange are both attention-grabbing colors, and against a stark white background these colors really draw the viewer’s eye.

Universidade de Coimra
Universidade de Coimbra

Moviegalaxies
Moviegalaxies

The Brave
The Brave

Mr Singh’s Sauce
Mr Singh's Sauce

Bless This Stuff
Bless This Stuff

Recetas de Rechupete
Recetas de Rechupetes

Ogilvy One Worldwide
Ogilvy One Worldwide

Clearcode
Clearcode

MOVE Dance Convention
MOVE Dance Convention

Trionn
Trionn

Grid Style layout on a White Background

With the current trends of flat design and grid style layout, white as a background has become a popular choice as it give a clean, crisp effect to the design, especially good for viewing on smaller screens. Here are a few good examples of grid style designs on a white background.

TasteSpotting
TasteSpotting

Room Five
Room Five

Mobile Mosaic
Mobile Mosaic

Jen Lu
Jen Lu

Gareth W. Rice
Gareth W Rice

Fluid
Fluid

Wide Angled
Wide Angled

Vudumedia
Vudumedia

PixelUmbrella
PixelUmbrella

Eduardo Nunes
Eduardo Nunes

Showcase of White in Web Design

Mojotech
Mojotech

iPolecat
iPolecat

Mixpanel
Mixpanel

Renault Zoe
Renault Zoe

Telus
Telus

By Association Only
By Association Only

Kluge Interactive
Kluge Interactive

House Kitchen
House Kitchen

Pixel Stadium
Pixel Stadium

Christel Winther
Christel Winther

Volstead’s Teddy Bears
Volstead's Teddy Bears

Mosne
Mosne

Swipe
Swipe

Interativacom
Interativacom

SumAll
SumAll

Digital Bakery
Digital Bakery

B&C Designers
B&C Designers

Numero 10
Numero 10

Grotesk
Grotesk

Andreas Kleiberg
Andreas Kleiberg

Prophets
Prophets

Form Follows Function
Form Follows Function

Si Digital
Si Digital

My Poor Brain
My Poor Brain

Rit Team
Rit Team

Visit Bruges
Visit Bruges

HealthShare Award
HealthShare Award

Pulsula Reklamevi
Pulsula Reklamevi

JJR2012
JJR2012

Biild
Biild

Bulthaup
Bulthaup

Neo Lab
Neo Lab

Phenomblue
Phenomblue

Camper
Camper

Skillshare
Skillshare

Further Reading and More Resources

The Purity of White

White makes an appearance to one degree or another on almost every web page, but in this article we have considered the use of white as the main color, which is almost always minimalism, as white is the color you have in web design before you add anything else.

Minimalism in web design trended some years ago and has never really gone out of style.

White and minimal in design renders a website crisp, clean and clear, although it can be taken to extremes, when clarity on how to navigate the site can become complicated and/or confusing.

White in itself has little significance as a color – it is the colors or shades and hues that accompany it that create meaning and emotion.

Do you like to see a lot of literal white space in web design? Which color or shade do you think best complements a minimalist website design? Please share your thoughts and opinions with us.

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.