Application of color in web design

Source: Internet
Author: User

The use of color in the Web page of the role is very important, some Web pages look very elegant, tasteful, pleasing, but the page structure is very simple, image is not complicated, this is mainly the use of color, color charm is difficult to resist, do you understand the seemingly simple color of the principle of application and mystery? This involves a lot of color principles of knowledge, so I specifically will belong to the image produced in the color as an independent stop to introduce.

1, the basic concept of color

Color in nature can be divided into two categories: non-color and color. Non-color refers to black, white and various shades of gray, while all other colors belong to color. Any one color has three properties:

(1) Hue (Hue): Also called color, is the basic characteristics of color, reflecting the basic appearance of color.

(2) saturation (saturation): Also known as purity, refers to the purity of color.

(3) lightness (brightness or lightness or luminousity): Also called brightness, reflecting the depth of the color.

Non-color only brightness characteristics, no hue and saturation of the difference.

2, the color of the three primary colors

The color of computer screen is synthesized by RGB (red, green, blue) Three kinds of shade, and we can adjust the three base colors to tune out the other color, in many image processing software, there is the provision of color, you can enter the value of three primary colors to adjust the color, but also directly according to the software provided by the color palette to choose.

3, the color of the computer image

The color of the computer image is based on the computation and combination of bits (bit), pure black-and-white image is the simplest color structure, in the computer to use 1-bit data, although only black and white, but still can pass through the density of the matrix arrangement, the black and white combination into an approximate visual gray adjustment.

Gray-scale (grayscale) of the image has a total of 256 halftoning, looks similar to the traditional Black-and-white photos, in addition to black, white, there are 254 shades of gray, the computer must be 8-bit data, display the 256 kinds of halftoning.

Canta (Fullcolor) refers to RGB three colors can display all the color, each shade to 8-bit, each has 256 kinds of halftoning, three-color interaction increase and decrease, can display 24BIT 16.77 million colors (256*256*256=16,777,216), This number is the highest color that the computer can represent, the rgbturecolor of the generic term.

A 8-bit color is an image with 256 halftoning, or 256 colors, and we often see images in GIF format as image files with 256 colors. To convert a 24-bit full-color picture to a 256-color 8-bit, typically, you must index the steps (Indexed), that is, in the original 24-bit 16.77 million color, first create a color distribution table (histogram), and then find the most commonly used 256 colors, define a new palette, Finally, replace the original image with the 256 color of the new color plate.

Let's take a look at how many colors are included in each bit of color:

1-bit 2 colors

2-bit 4 colors

4-bit 16 colors

8-bit 256 colors

16-bit 65536 colors

24-bit 16.77 million colors

32-bit 16.77 million colors and 256-level grayscale values

36-bit 68.7 billion colors and 4,096-level grayscale values

Usually called the Standard VGA display mode is 8-bit display mode, that is, in this mode can display 256 colors, while the high color (hi color) display is 16-bit display mode, can display 65536 colors, also known as 64K; and a true Color (true color) Display mode is 24-bit display mode, can display 16.77 million colors, also known as 16M color, this is now the general PC can achieve the highest color display mode, in this mode to see the true color image of the color has been and high-definition photos no different.

We have mentioned the importance of color in the page in the graphic production, in the page as far as possible to use the more elegant, concise color, such as the background as little as possible with dark, deep color (unless special needs), and the root page theme to choose the main color, there may be some do not make art friends do not know the meaning of color representatives, Please refer to the following table:

Red: Represents enthusiasm, unrestrained, joyful, celebration

Black: Represents seriousness, night, composure;

Yellow: On behalf of noble, Rich white: On behalf of purity, simple

Blue: Represents the sky, refreshing

Green: On behalf of plants, life, Vitality Gray: On behalf of the dark, negative purple

Color: On behalf of romance, love

Brown: Representing the land

The above is the meaning of several main colors, I hope to help you.

Now we have a basic understanding of color, then how do we in a Web page to match the color? If you know more about art, it's better to do it. Conversely, you may have to spend more time on it.

First, after you determine the theme of your home page, find out which colors are appropriate for which sites. For example, a film and television site, basically apply any color, but small b think with black or other teaching deep color mainly better, because people watch TV, movies in general in the dark Environment to watch, the use of dark on the Web page is more in line with the habits of people; on the other hand, a hospital, medical site to use light-colored color, The atmosphere of his medical site.

Remember that the white page is a versatile style

A special point to note here: The color of the page text is distinguished from the color of the link.

In the design, if you have extra time, you can try a few different colors.

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.