The color theory needing attention in web design

Source: Internet
Author: User
Keywords Web design color theory website style

I think it is indisputable that color has become the most important aspect of any design field.

While the designer determines the style of a website, it also determines the feelings of the site, and the emotional expression of the site depends to a large extent on the choice of color. And color is a powerful tool that all designers should understand when designing a Web page.

Color terminology

Many of you may have learned some basic color basics in school, so let's quickly review some of the terminology to better grasp the color and use the color.

The main composition of the color wheel

All colors are actually present in a color wheel. In this color wheel, we divide the color into 3 chunks: primary, secondary, and third.

The three primary colors are red, blue and yellow respectively. These colors are the base color, and they make up all the other colors on the color wheel.

By mixing the primary colors together, you get auxiliary colors, which are orange, green, and purple.

Second, the color of the relationship

Descriptive colors have a lot of terminology, and understanding these terms will help us discuss the emotional implications of color and color.

Complementary color is complementary and intermodulation color, they are located in the opposite position on the color wheel. These complementary colours are blue and orange, purple and yellow, and red and green.

Adjacent color is the color of the color wheel, so when the adjacent color together, can be a good match, but there is no obvious contrast.

The third color is made up of intermediate colors, such as yellow-green and bluish-green, which consist of a primary color and an auxiliary colour.

Third, the color group based on emotion

Some color groups are associated with emotions, such as warm, calm and neutral emotions.

Warm colors can make people feel warmer, such as red, yellow, and orange.

Cool colors are reminiscent of coolness and cold, such as blue, green, and purple.

Neutral color, as the name suggests, does not create what kind of emotion. Like Gray and Brown are neutral colors.

Understanding the color of these aspects of knowledge can be used to help a designer in the design of Web pages without words can express specific meaning and specific feelings, and highlight the advantages.

Types of colors in design

There are two different color systems, and the use of both depends on what you design.

RGB is this color system three basic colors "red, green, blue" English abbreviation, these three basic colors are the three primary colors of light. RGB is used on TV computer screens and on any type of screen.

CMYK is "cyan, magenta, yellow, black," the English abbreviation, these colors are the primary colors of pigments, CMYK is transported for printing.

The design on the Web page is based on the RGB color system.

Choose the color wisely and convey the meaning

Color theory is the practice of using the meaning of color to bring the sensory experience to the user. This practical experience plus some knowledge and ideas can be applied to the design of the Web page.

People tend not to agree on the meaning of certain colours and what colors designers should use to strengthen specific emotions. But there's no need to argue that customers have emotional reactions to color.

Be careful when choosing colors for your design, and do not use colors aimlessly. The colors you choose are suitable for your target audience, can express the information that the customer wants you to convey, and can meet your expectations of the overall feelings your users have gained on your site.

Warm colors can bring a sunny mood, and it is wise to use it on a website that wishes to bring happiness and joy. For example, in the 2009 when the global economy was not very good, yellow became a popular color in web design because companies wanted customers to feel the sun and comfort on their websites.

Cool colors are best used on websites that want to express a sense of professionalism or neatness to show a cool corporate image. Cool Colors express the feeling of authority, clarity and trust. For example, cool Blue is used on many banks ' websites, such as Chase Bank. It is unwise to use cool colors on an upbeat web site because users get the wrong impression.

Six, color for the user's significance

Most colors can express positive or negative emotions, depending on how it is used, the color surrounding it, and the content of the site itself.

Here are some popular colors for the general meaning.

Red

Red symbolizes fire and power and is associated with passion and importance. It also helps to stimulate energy and to raise interest.

The negative connotations of red are anger, necessity and anger, emergency, and anger, which stems from the passion and aggressiveness of the red itself.

Orange

Orange is the color wheel of red, yellow two color combination of adjacent color. Orange symbolizes happiness, happiness and sunshine. This is a cheerful color, evoking the child-like vitality.

Orange is not as positive as red, but it also has some of the qualities that stimulate mental activity. But it also symbolizes ignorance and deception.

Yellow

Bright yellow is a happy color that represents the positive yellow trait: joy, wisdom, light, energy, optimism, and happiness.

A dim yellow brings negative feelings: warning, criticism, laziness, and jealousy.

Green

Green symbolizes nature and has a healing nature. It can be used to symbolize growth and harmony. Green makes people feel safe. The hospital often uses green.

On the other hand, the green is a symbol of money, expressing greed or jealousy. It can also be used to symbolize the lack of experience or the need for beginners to grow ("inexperienced green").

Blue

Blue is a peaceful, calm color, exudes stability and professionalism, so it is widely used in corporate websites. Blue can also symbolize trust and reliability.

A cold shadow can bring the negative side of the blue, symbolizing depression, apathy and passivity.

Purple

Purple is a royal and cultured color, representing wealth and luxury. It also gives a sense of spirituality and inspires creativity.

Lighter purple can emit a magical feeling. It is a good way to improve creativity and express feminine qualities.

Darker purple can present a feeling of depression and sadness.

Black

Although Black is not part of the color wheel, it can still be used to hint at sensations and meanings. It is often associated with power, elegance, refinement, and depth. It is said that in the interview wearing black clothing can show that the candidate is a powerful individual, the site is the same reason.

Black can also be seen as negative because it is associated with death, mystery and the unknown. This is the color of sadness, mourning, and sadness, so it must be wisely chosen when used.

White

White, nor a part of the color wheel, symbolizes purity and innocence. It also conveys cleanliness and security.

In contrast, White can also be considered a cold and distant symbol, representing the harsh and painful nature of winter.

Examples of color applications in large companies ' websites

Let's look at some of the big companies ' websites to see how they use colors and what those colors mean for their users.

Nike

Nike often updates their websites, but usually black and grey tones, it's usually dark. Black shows the power of their products and leaves them with the impression that they sell quality products to their favorite sports customers.

House

The White House website is mainly white and light gray, plus some blue and red accent colors. White symbolizes hope and freedom, revealing the value of peace and purity. Red and blue are of course the color of the United States, red represents passion and energy, and blue represents stability and peace.

Amazon

Amazon's web site is mostly white, and white has the best contrast and readability. It also shows cleanliness, allowing users to browse the site freely. The orange and blue accent colors allow users to feel calm and excited, and they expect to find the most satisfying purchase.

Verizon Corp.

Red is the main color of Verizon's corporate brand, as well as the colors that run through the site. Red helps to stimulate the user's excitement and to showcase a corporate image that sells exciting and rapidly updated products. The white background is similar to Amazon, helping users read the site through a neat and orderly interface.

Best Buy

Best Buy's website shades are dark blue, revealing their stability and strength in the electronics market. The large purchases made by customers in Best buy make them feel secure and calm. The happy atmosphere of yellow gives them a sense of excitement and interest in purchasing.

Ka Shin Finance

Credit Management is an investment company that, in an unstable market environment, needs to let consumers feel peaceful on their websites. They use soft dark blue tones to achieve this and establish a calm and peaceful atmosphere. Neutral Brown is another corporate color that helps to reconcile extreme user perceptions. Orange as an accent color, allows users to buy shares when the excitement, but also for the site to bring happiness.

Dodge

Dodge's web site is mostly black, allowing images to be highlighted on the site. They use a bright red color as an accent. Black brings a sense of power to the site, displaying their products in a delicate and masculine atmosphere. Black is a nice color that makes the product look valuable and valuable. Red expresses passion and excitement, hoping to convince consumers that they are buying from a trustworthy, quality-assured company.

Whole Foods Co.

The main colors of Whole Foods corporate brands are green, like their website tones. Whole Foods sell healthy organic foods at higher prices. The green in web design is a good showcase of the concepts of health and purity that they cherish and the products they are close to nature. They also use a very green light yellow as an accent color, add fun to the site.

The use of color in the website

Without the need for descriptive text, colors can give the site meaning. Whether you're going to add something to them or not, the color itself has a lot of specific impressions. When the user browses the webpage, the color helps to transfer the user's view, guides the user how to browse a page. As can be seen in many corporate websites, colors express emotions and values, showing users how their companies are and what they sell.

Careful selection of complementary colors allows you to better use color, and once selected, the meaning you want to express is displayed.

The use of pairing colors can change the meaning of a website. With a soft blue hue and a quiet website with bright orange, it makes it a more exciting and fun site.

Perhaps your client thinks that the site you are designing is too gray, too serious, and that soft blue will give your site a calming, peaceful tone.

IX. resources related to color application

Many Web sites discuss color theory and design color usage. Use the following useful resources to find color matching and to inject more meaning into your website design.

Text link: A look into the Color germ in the Web design

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.