Anatomy of Colors in Web Design: Pure As Snow 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.
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.
White and Green
This combination of colors evokes the perception of organic or environmentally friendly design.
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.
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.
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.
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.
Showcase of White in Web Design
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.