What defines a website success?
Why are some websites visited only once while others attract a bunch of prospective clients ready to surf and buy all day long?
To create a successful website, you need to consider all the aspects: appropriate readable fonts, well-implemented typography, quality original photos, unique content and... color palette.
That’s the topic for us today.
First of all, let’s look into the definition of color, its origin, effect, and perception.
So, according to Britannica:
The color is the aspect of any object that may be described in terms of hue, lightness, and saturation. In physics, color is associated specifically with electromagnetic radiation of a certain range of wavelengths visible to the human eye. Radiation of such wavelengths constitutes that portion of the electromagnetic spectrum known as the visible spectrum i.e., light.
In plain English, color is a sense that a human gets from the light arriving at the eye.
The perception of color depends on vision, light, and individual interpretation, and the understanding of color involves physics, physiology, and psychology.
Refracting light through a prism, we get a number of characteristic regions of color - Roy G. Biv (remember that acronym from childhood to memorize rainbow colors) - Red, Orange, Yellow, Green, Blue, Indigo, and Violet. These are the colors of the visible spectrum.
In 1961 Swiss painter and educator Johannes Itten arranged the colors of the visible spectrum in a circle (color wheel). The organization of colors in segments is of the same order as in a visible spectrum with purple between red and violet to complete the circle.
The color wheel defined primary colors and color models to describe a color.
CMYK is a subtractive color model combining Cyan, Magenta, Yellow and Key. The primary colors of the scheme are blue, purple and yellow. Black was added as Key since it results from a full combination of the primary colors. CMYK is used in printing and has dim color rendition.
RGB is an additive color model in which primaries are added together (unlike CMYK where colors are subtracted) in various ways to reproduce other spectrum colors. The primary colors are Red, Green, and Blue.
RGB is used in the web because it produces a broad array of colors and rich hues, which CMYK doesn't. RGB model is applied in monitors that we use. Each pixel on the screen is built by driving three small and very close but still separated RGB light sources. At common viewing distance, the separate sources are indistinguishable, which tricks the eye to see a given solid color. All the pixels together arranged in the rectangular screen surface conforms the color image.
There are other color models, such as RYB, Pantone, LAB, HSB etc., but CMYK and RGB are most spread and commonly used.
Now from theory to practice. How should we combine colors on a website not to make users weep tears of blood?
As it was mentioned earlier in the article, all colors can be arranged in a color wheel
Color combinations can be of several types
- Monochrome combination - is a combination of several hues of one color.
- Monochrome combination - is a combination of several hues of one color.
Here are some website examples of good typography and monochrome.
Looks trendy classy and rich, despite the color restriction.
Analogous combination - is a combination of several colors next to each other on the color wheel (for instance, yellow, orange and red).
Complementary combination - is a combination of two colors exactly opposite on the color wheel (for instance, yellow and blue). The combination is a tough one to pull out. Complementary colors are quite difficult to combine and it is a challenging task to find appropriate hues not to offend the eye.
For instance, arrange saturated green and red next to each other and you will not really like the effect on the joint area.
Triad combination - is a combination of three colors lying with the angle of 120 against each other.
When choosing a color, bear psychological aspect in mind since every color evokes certain associations and emotions.
Blue, for instance, is a color of calmness, trust and ease. Black and white are not considered as colors by their nature and they can be easily combined with different colors. When used separately, they can be official, classy and show status. When used unskillfully, they can inspire anxiety or fear.
Red is probably the most polysemantic color. Bright hues evoke aggression, danger, pain. When used skillfully, in a neutral tone, red can help to attract users’ attention to certain elements (a button, for instance).
Yellow is associated with joy, childhood, success and wealth. Although, as with red color, too bright hue is not good. It should not scream from the screen, otherwise, users will leave the page without even reading its subject.
Green is a color of something natural and healthy. It is neutral enough and good for different subjects.
Still, there are other aspects to consider, choosing a website palette:
- Website target audience
- Subject matter
- Color blinded people in the TA
The target audience of your website means everything. It is a prospective client, a buyer, and your profit eventually.
Keep asking yourself: who is the average prospective buyer? You will not use dark colors to create a teenage social network; pink is obviously not a good choice for a corporate government website. These moments are clear and should not be explained. But there are some nuances about colors. Studies have shown that blue, cyan and green are the most pleasant colors for the human eye. Thus, use them freely if your TA is not very specific.
Localization is important for international companies whose TA is all over the world. Lots of peculiarities of your prospective clients should be considered. Check these principal differences in color perception:
In Asia white color stands for death and black - for wisdom. The whole other world senses it vise verse.
Across most, Eastern and Western cultures purple symbolizes wealth, power, tranquility and calmness. In Thailand purple represents mourning.
Blue is a color of melancholy and sadness in India. For Japanese people, it holds the meaning of evil. In the Western world, blue is a neutral color, without any negative meaning.
In Europe green has a positive meaning and red evokes the feeling of danger. In some Asian countries, it is vise verse: green stands for loss, and red - for wealth and luck.
These and many other nuances should be considered carefully before prototyping - at the research stage of your project.
Subject matter influences the color palette greatly and the choice is usually obvious. A sane designer will not choose a brown color for a dentist website, for instance.
Color blindness is the decreased ability or disability to see color or differences in color. Color blinded people as a part of the society are the part of your TA and they should be considered as well. One great tip for you here - combine complementary colors carefully, because for people with color blindness they are really alike and cause confusion.
Compare how a person with normal vision and a person with a color blindness sees the same website:
Finally, let's get to the color trends for 2017.
Web developer and Shopify expert Kelly Vaughn expects 2017 to be “the year of ruining design structure”, or “fank year” as it named Sarah Hutto, her designer.
Vaughn awaits to see bold, bright colors and gradients coming back to the industry. However the client and design aim come first, don't go overboard with creativity.
Camden Town Brewery did a great job with colors, by adding enough creativity and focusing on micro-interactions that met the business challenge successfully.
American company Pantone Inc. - the developer of Pantone color model (Pantone Matching System) happened to set the trend for colors and color combinations for every new year to come.
For 2017 Pantone has chosen Greenery as the color of the year. You can learn more about the color and its combinations on the website https://www.pantone.com/color-of-the-year-2017.
Google Material design is still a trend. Material design brings bright and expressive colors which are appropriate and fresh for any website with any subject matter. To select such colors, go to
Duotone websites appeared in 2016 and the number of them will rise in 2017. http://www.adisonpartners.com/ is an example of efficient duotone implementation.
Let’s sum up
To get a prototype approved at the first try, to satisfy a client and to make users come back to a website - select website colors sensibly and do not “play with colors”.
https://www.awwwards.com/ (all the pictures are taken from there)