Indisputably, color is the most important aspect of any design field.
When the designer determines the style of a website, it also determines the emotion of the website, and the expression of emotion depends largely on the choice of color. Color is a powerful tool, and all designers should understand this when designing web pages.
I. Color Terms
Many of you may have learned some basics of color in school. Let us quickly review some terms to better grasp and use color.
The main components of the color wheel
All colors can be represented in a color wheel. In this color wheel, we can divide the color into 3 large blocks: the primary color, the auxiliary color, and the third color.
The three primary colors are red, blue and yellow. These colors are base colors and they make up all the other colors on the color wheel.
Mix the primary colors together and you will get the auxiliary colors. They are orange, green and purple.
Second, the relationship between colors
There are a number of terms that describe color, and understanding these terms will help us discuss colors and the emotional meaning of colors.
Complementary colors are complementary and inter-modulated colors. They are located opposite to each other on the color wheel. These complementary colors are blue and orange, purple and yellow, and red and green.
Adjacent colors are adjacent colors on the color wheel, so when adjacent colors are used together, they can be a good match, but there will be no obvious contrast.
The third color is composed of intermediate colors, such as yellow-green and cyan, that is, a mixture of a primary color and an auxiliary color.
Third, emotion-based color groups
Some color groups are associated with emotions, such as warm, calm and neutral emotions.
Warm colors make people feel warm, such as red, yellow, and orange.
Cool colors are reminiscent of coolness and cold, such as blue, green, and purple.
Neutral colors, as the name suggests, do not create any kind of emotion. Like gray and brown are neutral colors.
Knowledge of these aspects of color can be used to help a designer to express specific meanings and specific emotions without the use of text when designing a web page, and show advantages.
Fourth, the type of color in the design
There are two different color systems, and the use of both depends on what you design.
RGB is the English abbreviation of the three basic colors "red, green, and blue" in this color system. These three basic colors are the three primary colors of light. RGB is used on TV computer screens and any type of screen.
CMYK is the English abbreviation of "cyan, magenta, yellow, black". These colors are the primary colors of pigments. CMYK is used in printing.
The design on the web page is based on the RGB color system.
Fifth, choose colors wisely and convey meaning
Color theory is the practical result of using the meaning behind color to bring users a sensory experience. This practical experience plus some knowledge and ideas can be used in the design of web pages.
People often don't agree with the meaning of certain colors and which colors designers should use to enhance specific emotions. But it goes without saying that customers have an emotional response to color.
When choosing colors for your design, be careful and don't use colors for no purpose. The color you choose should be suitable for your target audience, be able to convey the message that customers want you to convey, and meet your expectations of the overall feelings users get on your website.
Warm colors can bring sunny emotions, and it is wise to use it on websites that hope to bring happiness. For example, when the global economy was not good in 2009, yellow became a very popular color in web design because the company wanted customers to feel sunny and comfortable on their website.
Cool colors are best used on websites that want to express a professional or neat feel to present a calm corporate image. The cold color expresses a sense of authority, clarity and trust. For example, cool blue is used on the websites of many banks, such as Chase Bank. It is not wise to use cool colors on websites with an optimistic theme, because users will get the wrong impression.
What color means to users
Most colors can express positive or negative emotions, depending on how it is used, the surrounding colors, and the content of the site itself.
Here are some general meanings of popular colors.
Red symbolizes fire and strength, and is also associated with passion and importance. It also helps to stimulate energy and interest.
The negative connotations of red are anger, crisis, and anger, in emergency situations, and anger, which also stems from the enthusiasm and aggressiveness in red itself.
Orange is a combination of two adjacent colors, red and yellow on the color wheel. Orange symbolizes happiness, joy, and sunshine. This is a cheerful color that evokes childlike vitality.
Orange is not as active as red, but it also has some of these qualities that stimulate mental activity. But it also symbolizes ignorance and deception.
Bright yellow is a color of happiness, representing positive yellow qualities: joy, wisdom, light, energy, optimism, and happiness.
A dim yellow color brings negative feelings: warning, criticism, laziness, and jealousy.
Green symbolizes nature and has a healing quality. It can be used to symbolize growth and harmony. Green makes people feel safe. Hospitals often use green.
On the other hand, green is a symbol of money, expressing greed or jealousy. It can also be used to symbolize inexperienced or beginners need to grow ("inexperienced green").
Blue is a peaceful, calm color that exudes stability and professionalism, so it is commonly used on corporate websites. Blue can also symbolize trust and reliability.
A cold-toned shadow can bring a blue negative side, symbolizing depression, apathy, and passiveness.
Purple is a royal and educated color, representing wealth and luxury. It also gives a sense of spirituality and encourages creativity.
The lighter purple can exude a magical feeling. It can enhance creativity and express femininity.
Darker purples can show depression and sadness.
Although black is not part of the color wheel, it can still be used to suggest feeling and meaning. It is often associated with power, elegance, refinement, and depth. It is said that wearing black clothing during the interview can show that the candidate is a powerful individual, and the same is true of the website.
Black can also be seen as negative because it is associated with death, mystery and unknown. This is the color of sorrow, mourning, and sorrow, so you must choose wisely when using it.
White is also not part of the color wheel, and symbolizes purity and innocence. It also conveys cleanliness and safety.
On the contrary, white can also be regarded as a symbol of coldness and distance, representing the harsh and painful qualities of winter.
Seven, the use of color in the websites of large companies
Let's take a look at the websites of some large companies to understand how they use colors and what those colors mean to their users.
Nike often updates their websites, but usually it's still black and gray tones, and it's usually dark. Black shows the power of their products, leaving everyone with the impression that they are selling quality products to sports lovers.
The White House's website is mainly white and light gray, with some blue and red accents. White symbolizes hope and freedom, revealing the value of peace and purity. Red and blue are of course the representative colors of the United States, red represents passion and energy, and blue represents stability and peace.
Amazon's websites are mostly white, and white has the best contrast and readability. It also reveals cleanliness, giving users the freedom to browse the site. The accent colors of orange and blue make users feel stable and excited, and make them expect to find the most satisfactory purchase.
Red is the main color of Verizon's corporate brand, and it is the color that runs through the entire website. Red helps stimulate user excitement and showcases the image of a company that sells exciting and rapidly updated products. The use of white background is similar to that of Amazon. It helps users read this website through a neat and orderly interface.
The tone of Best Buy's website is dark blue, showing their stability and strength in the electronics market. Customers' purchases on Best Buy make them want a sense of security and peace. The happy atmosphere radiated by yellow makes them feel excited and interesting when purchasing.
Charles Schwab is an investment company. In an unstable market environment, they need to make consumers feel peaceful on their website. They use soft dark blue tones to achieve this and build a calm, peaceful atmosphere. Neutral brown is another corporate color that helps coordinate extreme user perceptions. Orange as an accent color can make users excited when buying stocks, and also bring happiness to the website.
Dodge's websites are mostly black, which can make the images on the website stand out. They use a bright red as the accent color. Black brings a sense of power to the website and showcases their products in a refined and masculine atmosphere. Black is a good color, it can make the product look precious and valuable. Red expresses passion and excitement, hoping to make consumers think they are buying a car from a trustworthy and guaranteed quality company.
The main color of the whole food company brand is the same as that of their website, which is green. Whole foods sell healthy organic foods at higher prices. The green color in the web design is a good illustration of the concepts of health and purity they value, as well as their products close to nature. They also used a light yellow with a green color as the accent color, adding interest to the website.
Eight, the use of color in the website
Without descriptive text, colors can give a website meaning. Whether you plan to add meaning to them or not, the colors themselves have many specific impressions. When a user browses a web page, colors help divert the user's attention and guide users how to browse a page. It can be seen on the websites of many companies that colors express emotions and values, showing users what their company is like and what products they sell.
Careful selection of complementary colors allows you to make better use of colors, and once selected, the meaning you want to express is also displayed.
The use of matching colors can change the meaning of a website. Adding calm blue to a website that expresses peace with bright orange can make it a website that makes people more excited and interesting.
Maybe your customers think that the website you are designing is too dark and too serious, and the soft blue color can make your website have a calm and peaceful tone.
Resources related to color use
Many websites have discussed color theory and color use in design. Here are some useful resources to find color combinations and add more meaning to your website design.