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.
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:
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
Ruy Adorno
Nicolas Desle
Danone – One Yogurt a Day
Sam Markiewicz
Ford Kuga
Wandi Studio
Jamie McLellan
Castus
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
Jean Paul Gaultier
Polargold
Box
Lead Zeppelin
WWF – All For Bear
Volkswagen Sommer 2012
Corning
Angela Morelli – Water
WWF – Food Story
White and Green
This combination of colors evokes the perception of organic or environmentally friendly design.
Quadrifolia
Oreakids
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.
Lookout
Yann Kozon
Knock Knock Factory
Andreas Fretz
Banjax
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
The Enterprise Foundation
Adam Hartwig
Inhouse Filming
100 Ans de Tour
FK Agency
Vanmoof
An-Ni Wang
Urbangap
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
Moviegalaxies
The Brave
Mr Singh’s Sauce
Bless This Stuff
Recetas de Rechupete
Ogilvy One Worldwide
Clearcode
MOVE Dance Convention
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
Room Five
Mobile Mosaic
Jen Lu
Gareth W. Rice
Fluid
Wide Angled
Vudumedia
PixelUmbrella
Eduardo Nunes
Showcase of White in Web Design
Mojotech
iPolecat
Mixpanel
Renault Zoe
Telus
By Association Only
Kluge Interactive
House Kitchen
Pixel Stadium
Christel Winther
Volstead’s Teddy Bears
Mosne
Swipe
Interativacom
SumAll
Digital Bakery
B&C Designers
Numero 10
Grotesk
Andreas Kleiberg
Prophets
Form Follows Function
Si Digital
My Poor Brain
Rit Team
Visit Bruges
HealthShare Award
Pulsula Reklamevi
JJR2012
Biild
Bulthaup
Neo Lab
Phenomblue
Camper
Skillshare
Further Reading and More Resources
- White – Wikipedia
- Shades of White – Wikipedia
- Best White Websites – Awwwards
- White Color Schemes – Colorcombos
- A Showcase of Clean White Web Designs – WebDesignLedger
- 40 Beautiful White Website Design Examples – 101 Webdesigns
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.
