Web Design Color Highlights 10 cases

Source: Internet
Author: User
Tags abstract
Color | design | Web page design the use of color in Web page production plays a very important role, there are many sites with its successful color matching is memorable. But for those who just started to learn to make Web pages, it is often not easy to master the color collocation of the Web pages. In addition to learning a variety of color theory and methods, the author thinks that more to learn some famous website color method, for us to make beautiful web pages can play a multiplier effect. Therefore, the author summed up some famous website color collocation method, these methods can let us learn less detours, and quickly improve the level of our web page production.

Web page color principle and symbolic meaning

All of our web pages are colored with the color of the English word or hexadecimal notation (such as #000000 represented as black) in the HTML. Different colors have different meanings, giving people all kinds of rich feeling and association.

Red: Warm, unrestrained, joyful, solemn
Yellow: Noble, rich, splendid, lively
Black: Serious, night, calm
White: pure, simple, clean
Blue: Sky, refreshing, technology
Green: Plant, life, vitality
Grey: Solemn, steady
Purple: Romantic, rich
Brown: Earth, Magnolia officinalis

  Second, the use of Web page color style

Different sites have their own different styles, but also have their own different colors. There are probably several types of colors used in Web sites:

  1, company color
In today's enterprises, the company's CI image is particularly important, each company's CI design must have a standard color. For example, the main hue of Sina is a kind of color between light yellow and deep yellow, at the same time, the image propaganda, poster, advertisement use color and the website color is consistent. Another example is the c:100%,m:60%,y:0%,k:0%, the dominant hue of the wealth of money. This color used to the site appears to be tonal natural, deep inside.

  2, Style color
Many websites use colors to uphold the company's style. For example, the use of the color Haier is a neutral green, that is, full of vigor and loss of their own innovative spirit. Female websites use more pink, large companies use blue more ... These are the highlights of their own style.

  3. Custom color
These sites use a large part of the color of their own hobbies, to personal sites more use, such as their favorite red, purple, black and so on, when the site is inclined to this color. Each person has their own favorite color, so this type is called the customary color.

10 Cases of color design
10 Cases of color design

Below I will introduce 10 different color matching website, we can learn and draw lessons from, cultivate the sensitivity of color and unique aesthetic ability.

1 This is a large NBA website. Usually we often see this kind of Web site with white background, but this site with Gray-black rgb (48,48,48/#333333) (The following colors are RGB), the article title with color for RGB (203,201,153/#CCCC99), The menu uses RGB (112,119,112/#707770). This color can show a unique personality, but also without losing the style of large websites. As shown in Figure 1



Figure 1


2 Below is an entertainment class comprehensive website Ugo, his color scheme is the background color for the black RGB (0,0,0) nesting rgb (0,0,82), the font white RGB (255,255,255), the menu is RGB (77,114,159). This is mainly black and blue color, but with beautiful pictures, giving people the feeling is full of vitality, filled with interactive color and youthful breath. As shown in Figure 2.



Figure 2

3 below this website is the famous Microsoft company website, Microsoft not only does the software good, even the homepage production is also the world first-class. Each of his pages is a model of production. From the web we can see Microsoft's style, style, and strong strength. Background color using blue RGB (0,151,254), the menu is black RGB (0,0,11), the menu is gray RGB (200,200,200), the font is black RGB (0,0,0), as shown in Figure 3.



Figure 3

4 introduction of the site is relatively simple, but her use of color also ingenuity, now we look at, the overall use of the white RGB (255,255,255), auxiliary color for RGB (79,88,95), menu color for RGB (48,64,64) and RGB (0, 81,111 the font is using RGB (83,86,91). Although simple, but the color collocation is very scientific and reasonable. As shown in Figure 4



Figure 4

5 below the website uses the yellow tone mainly, manifests the company's individuality very much, now we will look at her color collocation. The main hue is yellow RGB (255,199,48/#FFC730), the auxiliary hue is RGB (49,102,46) font is brown RGB (153,103,0), in the middle again with abstract picture, appear to be full of individuality but not monotonous. As shown in Figure 5



Figure 5

6 Orange If used properly is a very good for the color on the Web page. The following is a very famous example of this website. His primary hue is RGB (255,151,0) auxiliary tones to RGB (255,103,4), and menu RGB (252,200,0). The font uses black RGB (0,0,0). This kind of color matching appears the owner is more avantgarde, the color is enthusiastic, gives the person's deterrent force to be stronger. As shown in Figure 6
 


Figure 6 7 bright red is also a strong sense of shock color, if not properly paired, it may also make the site has no style and characteristics. The following site is a good use of red sites. Let's take a look at his color mix. He used the main color is RGB (200,9,0), with abstract graphics, the text uses RGB (213,229,167) appears to be beautiful without losing the unique, the atmosphere and not pressing. As shown in Figure 7

Figure 7

8 The following description of this hue is our web page when we do not often use the color, if used to your Web page, will certainly give a refreshing feeling. His primary hue is RGB (144,151,97) auxiliary tones for RGB (173,168,112) side decorations for black rgb (0,0,0) font for Black RGB (0,0,0). This kind of collocation appears unique style, the color is harmonious and solemn. As shown in Figure 8



Figure 8

9 The following design is more simplistic, but the use of color so that the Web page is not stiff, but let people feel a thick life and family atmosphere, so that people exposure to beauty and love. His main body is composed of two colors, namely RGB (239,200,161) and RGB (201,254,200). So simple, but lifelike, vivid online. As shown in Figure 9



Figure 9

10 Here is an example to prove the truth-as long as you have enough imagination, you can design a beautiful web page. The current online very popular word is that the Web page with no more than four main colors, otherwise there is a sense of clutter. The following site is far more than three colors, but she is not lost in beauty. Therefore, it is important to control the ability of color. The following example's menu uses 7 colors, but the page we see is not cluttered, and the author is very creative in the opposite sense. As shown in Figure 10



Figure 10

The color collocation of webpage design needs in the practice unceasing groping and unceasing innovation, earnest study others ' advanced method and experience, can improve our production level quickly. Can say. The Web page has a good mix of colors, and it's half the success. If you have any good method, don't forget to communicate with others, let us make progress together!



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.