The theory of color is especially useful today, when our brains have to collect, filter and process information at an ever higher rate. In the age of digital media, we are overwhelmed with information whose relevance and subject matter can be emphasized using color. 90 seconds is all it takes for a person to decide whether they like or dislike a product, and in 90% of all cases, the decision is based on color.
Color increases a brand’s recognition by 80%. For this reason, it is important and helpful for companies to know what effect colors have on user experience and interaction with their logo, website and product. It’s not an accident, for example, that police use the color blue. Here, we examine the theory of colors at closer range.
The world of colors can be explained using various models.
In his “Theory of Color”, Goethe stated important realizations regarding perception of color. But it is Johannes Itten who is considered to be the founder of the theory of color, and who developed the color wheel, which now carries his name.
Itten’s color theory states 3 basic colors: blue, yellow and red
The 3 secondary colors are green, violet and orange, and result from the mixing of the 3 basic colors, whereas tertiary colors are created by mixing of a secondary color with a primary color.
On Itten’s color wheel, complementary colors (blue-yellow, red-green) lie diametrically across from one another.
H3: Mixing colors
The color mixing model is separated into 2 areas:
Additive color mixing
This results from a mixing of light. The basic colors are red, green and blue (RGB colors).
These are used by television screens and computer monitors.
Subtractive color mixing
Achieved by mixing of pigments, such as paint, with the basic colors of cyan, magenta and yellow and key (black), creating the CMYK colors. It is applicable in print.
To avoid the problem of color shifting and distortion caused by different color spaces, print media files should in general be created using CMYK colors.
In addition to technical classifications, colors can also be viewed from the perspective of psychology. Colors carry strong unconscious significance, which can have an influence on us. The effect can be different from person to person, and between different cultures. But nonetheless, there are general associations that apply to all.
These insights are the foundation for targeted use of color design for a company, for analysis of color perception and emotion has long been in use in marketing, such as in product design, advertising and Internet presence.
Yellow is the color of light and the sun, and represents warmth, vitality, happiness, joy, optimism and energy.
IKEA, Nikon, Ferrari and Shell use this color in their logos.
For example, IKEA incorporates the qualities of joy, warmth (in the sense of comfort) and positivity into its advertising message. This color association is continued in the logo, so that each contact with its advertising recalls these themes. In addition, the logo also uses complementary color contrast (blue/yellow). This causes reciprocal intensification of the colors, and increases the recognition power of the logo.
Like yellow and red, orange is a warm color. It is associated with activity, conviviality, communication and creativity. Online, it is used to indicate affordable price-performance ratios.
Fanta clearly plays with the effect of this color in its advertising and its web appearance. Combined with yellow, the product radiates joy and creativity, catching the eye of a younger target group.
This color is highly emotional and radiates dominance and passion. It is associated with love and sex, and communicates excitement and warmth. It is used in advertisement to attract attention. It can also symbolize negative associations such hate, aggression and anger.
Known brands such as Coca-Cola, Kentucky Fried Chicken and Nintendo bet on the high recognition value of this color. Red can make various statements. Placed in the right context, it always has the right effect.
Blue is the color of seriousness, security and trust, and that is why police, banks and insurance companies place their bet on it. Blue is cool and sober, and it is often used for products that should be kept cooled, such as water, or those that have to radiate a certain purity, such as cosmetics. Known examples are Nivea, Citibank and MetLife.
Green is the color of nature. It is fresh, light and alive. Products with an ecological theme, fruit and vegetables, as well as vegetarian and vegan products use it as a symbol for growth and the environment.
Green has a calming and harmonic effect.Known brands that use it include Starbucks and Whole Foods. Even McDonalds has placed a dark green background behind its yellow arches to communicated freshness and health.
Red + white = pink. In spite of its closeness to red, pink communicates quite different associations. Pink is also associated with love and romance, but appears much more innocent, less angry and aggressive than red and has a calming and soft effect. Depending on the grading (from neon pink to soft rose), it represents refinement and sincerity. For a website that targets women or advertises feminine products, pink is a perfect fit. Be careful using bright, loud pink, as it can quickly turn too shrill. The magenta pink of the Telecom logo is ideally programmed to stay on one’s mind thanks to its color effect.
Violet has a mystical effect and is the color of magic and spirituality. Dark variants can also symbolize luxury, wealth and individuality and appear extravagant and expensive. In a lighter version, it has an innocent, romantic and playful effect.Hallmark and Cadbury are the best known examples to have draped themselves in violet.
This is a very understated color, whose effect is very serious, neutral and unpretentious. For this reason, gray works well combined with other colors and can be integrated into a company’s color palette to complete a web design. Technical companies are fond of using this color. For companies such as Apple and Mercedes Benz, who use silver, or metallic gray, the color supports the high-quality, dignified product and raises the value of the logo.
White stands for purity, innocence and peace, and fits products and websites that promise cleanness and sterility. The color’s simplicity also offers a base for web design, which can be combined and accented with other colors. Black-and-white contrast of lettering and background delivers great readability in print as well as on screens.
This ambivalent color can represent death, mourning, loss, but also stability, seriousness, elegance and functionality. Black websites appear very modern.
Taken together, the three “uncolorful” colors white, black and gray appear very clean, structured and matter-of-fact, but can also be bleak and dreary.
In addition to its design, each company also has its own color combination. The websites shown in the illustration are very easy to recognize from their individual color concepts.
You’ll find the answer at the end of the article.
“There are harmonies and contrasts hidden in colors which automatically work together.”
Vincent van Gogh
In case of web colors, there is an endless selection and boundless options to choose from. The wide selection can, however, make it more difficult to find the right combination for a homepage or a Creating a logo. It is possible to combine analogous colors, meaning those neighboring each other on the color wheel. The various nuances of a color family appear harmonious and make your website more interesting than just one color in contrast to another (e.g. white).
Pay attention to the warmth or coolness of colors. Violet with high amounts of blue appears cooler than with higher red proportions. This way you can combine colors that are too cool with warm shades.
Pay attention to the color intensity — a small circle of bright pink appears heavier than a larger circle of light rose. This can also have an effect on the harmony of your website, logo and product.
Places color accents at all the right places. If part of your website or offer should receive a special accent, your can use stronger colors there.
Tools for color combinations
• https://colordrop.io/ shows more than 100 various color combinations
• http://www.palettable.io/1A1406 inspires your with color suggestions and directly shows HTML color codes
• http://loriskumo.github.io/Brands-In-Colours/ shows the typical colors of the best-known brands
• http://www.clangcolor.me/ lets your create colors from music
You found a color somewhere on the Internet and would like to use it yourself? With the Photo and graphics design pipette, you can recognize and save the color, or transfer it to a part of your website.
Factors for the right color selection
To choose the right color for your company and its web design and logo, you have to take the following into consideration:
What does your company stand for?What is the message you want to communicate to the audience?What is your target group? On which markets would you like to place your company?
For brand expansion and when creating a website, you should re-examine the colors and their effects again in detail. When a user clicks on your page, colors are the first this that he or she will perceive. Their role shouldn’t be underestimated.
In addition to these factors, it is also important to know what looks good to you!
Did you recognize who is behind the color combinations from ill. 5?
Pinterest, Twitter, Google and Youtube.