Web page color scheme and method [online color matching article collection]
Web color matching schemes and methods, from online collection, in succession, if you have good, welcome to post ...
Netizen Bean Beat's website has a more full color patron, it is recommended to look at it. The URL is: http://color.ddcat.net
Forum already in the forum (only the essence of the essence) Click to open
[WEB Standard Design Website] Color Table Color Table
[Sharing] Color Scheme & Collections
Web page color scheme two
Web color scheme (1)
Detailed color table
(New)
Web page color gold segmentation method
It is well known that there is a gold split point in mathematics - 0.618. It is said that the number of proportion of proportion is the most beautiful, from the eyebrows to high-rise buildings, from art to painting, there is no left, thus known as "magical" gold segmentation point. At the same time, people also studied a lot of research, and the results of the study were a large number of "magic" statements. However, my generation is a realist, "magical" does not talk, or look at the "magical" to solve my problem - the golden segmentation method of web color color.
All the prawn of the HOMEPAGE know that the web page background is more troublesome. If the background color is unreasonable with the font color, the web page effect will be greatly reduced. If the contrast of the background color and font color is too big, it will look too glare; if the contrast is too small, it will make the web style too dull. It is necessary to reach the best color matching, it's trouble, custom-> Watching effect -> not suitable-> From the beginning ...,
Finally, we found that most of our valuable Time spent on. But don't worry, after my "Gold Segmentation Law of the Web Color", you can save your time. Do not fight! Do not fight! I immediately entered the topic (... ...).
The basic principle of the gold segmentation method is such that the contrast (background with foreground) is adjusted at a location near 0.618 ratio. Below I take FrontPage 2000 as an example to explain the specific children? / P>
1. Select background color (remember the brightness value of the color). After opening FrontPage 2000, click the right mouse button. Select "Web Properties", pop up the "Web Properties" dialog box and select the "Background" option under the Background (or "Format" menu) and select you in the background color option. Want to have any background color, then determine (in this case, olive RGB: 0, 128, 0 brightness: 60).
2. Select the foreground color. Select the format-> font, select "Other Colors" in the font color. When the color dialog is pop-up, select Customize, pop up the Windows Standard Color Dialog (Figure):
The related pictures of this topic are as follows:
3. Calculate the brightness value. If the brightness value of the background color is 0-92, the brightness in the above dialog is determined as x 148; if it is between 148-240, it is set to X-148. Then select any color you think of a reasonable color (the brightness value is not changed) as the foreground. The principle of the selection is as follows: The maximum brightness is 240, the gold segmentation value is 240 × 0.618≈148, that is, the brightness difference is 148 is the optimum contrast, so the selected foreground color and the background color brightness value at least one at 0-92 or 148- There is a different brightness value between 240, and strong recommendations). The related pictures of this topic are as follows:
Top web color dictionary, cultivate your color difference 1
There must be a judgment standard when planning the correct color scheme. Web designers planning a website that needs to be repeated and repeated, and it also needs to pass through the thirteen when deciding the web color scheme. In order to get better planned opinions, organizers should be repeatedly discussed with their partners, but also to find some similar success sites for technical analysis, a large site is from several layers or even tens of links and hundreds Thousands of different styles of web pages are made, so a reasonable level map should be drawn when needed. If only the designer's feelings in a site color scheme, it will determine the final color scheme, and the opportunity to succeed will be very small, and even if it is successful, it is guaranteed that the next time it can be successful. Moreover, a designer's good suggestion does not convince other cooperative members in the team without any basis. Radish cabbage is good, if every member of the team delimizes his point of view, then this team will not be incomplete. Of course, it feels that the designer's soul, the designer who does not feel like a body without a soul. However, if the light relief feels can't get a good result, if a good design is equal to feeling an unknown, then this unknown should be to persuade other people's scientific reasonable theoretical systems.
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
Top web color dictionary, cultivate your colors 2
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
Web design - 10 cases of web color
The use of color plays a very critical role in webpage production. There are many websites that have been with their successful colors. But for those who have just learned to make a web page, it is often not easy to control the color matching of the web. In addition to studying various color theories and methods, the author thinks more to learn more famous websites, and can play a half-time role in making a beautiful web page. Therefore, the author summarizes some color matching methods of some famous websites, which allows us to learn less, and quickly improve our web page production level.
First, web color principle and symbolic meaning
All of our web pages are seen under HTML, which is a color English word or hexadecimal representation (such as black). Different colors have different meaning, giving people a variety of feelings and associations.
Red: enthusiasm, unrestrained, joy, solemn yellow: noble, rich, splendid, lively black: serious, night, calm white: pure, simple, clean blue: sky, refreshing, technology green: plants, life, vitality gray: solemn , Calm purple: romantic, rich brown: earth, thick
Second, the style of use of web colors
Different websites have their own different styles and have different colors. The website uses color to be divided into several types: 1, company color in the current enterprise, the company's CI image is particularly important, and each company's CI design must have a standard color. For example, the main tone of Sina.com is a color between pale yellow and deep yellow, and the color of image promotion, poster, advertising is consistent with the color of the website. For example, the main tone of Guofu Investment Company is C: 100%, M: 60%, Y: 0%, K: 0%. Such color uses the hue to look natural, the bottom is deep.
2, the style of the style is in the style of the company. For example, the color used by Haier is a neutral green, which is full of vitality. The female website uses a lot of pink, and the big company is using it ... These are all in their own style.
3, the color of the habitual color of these sites is a large part of the use of their own personal hobbies, using more personal websites, such as their favorite red, purple, black, etc., tend to this color when doing the website. Everyone has their favorite colors, so this type is called habitual color.
Third, the design color is less than 10 cases I will introduce ten colorful websites. You can learn and learn from the sensitivity of color and unique aesthetics.
1) This is a large NBA website. Usually this type of website we often see is white as a white background, but this site uses gray black RGB as (48, 48, 48 / # 33333) (the following colors are represented by RGB), the title of the article is RGB ( 203, 201, 153 / # CCCC99), the RGB used in the menu is (112, 119, 112 / # 707770). Such coloring can display unique personality, and the style of large websites is not lost. Figure 1
2) The following is a comprehensive website UGO. His color scheme is a background color to a black RGB (0, 0, 0) nesting RGB (0, 0, 82), font white RGB (255,255,255), The menu is RGB (77, 114, 159). Although this is black and blue is the main tone, but it is equipped with a beautiful picture, it is a vibrant, full of interactive color and youth. Figure 2. 3) The following website is a famous Microsoft website, Microsoft is not only software, but also the world's first-class. Every page of his web is made of models. From the web page, we can see the style, style, and strong strength of Microsoft. Background color uses blue RGB as (0,151,254), the menu is black RGB (0, 11), the menu is gray RGB (200, 200, 200), the font is black RGB (0, 0, 0) , As shown in Figure 3. 4) The website is now relatively simple, but her use color also does not have a craftsmanship, now let's take a look, the whole is white RGB (255, 255, 255), the auxiliary colored RGB (79, 88, 95) The menu is RGB (48, 64, 64) and RGB (0, 81, 111) fonts use RGB (83, 86, 91). Although it is simple, the color is very scientific and reasonable. As shown in Figure 45) The following website is based on yellow tone, very embodied by the company's personality, now we will look at her color match. The main color is called yellow RGB as (255, 199, 48 / # FFC730), and the auxiliary toner is RGB (49, 102, 46) fonts as brown RGB (153, 103, 0), the intermediate is used to abstract pictures, appear personality Full but not monotonous. Figure 5
6) Orange Red If you apply properly, it is a very use of colors on the web page. The following website is a very famous example. His main color is adjusted to RGB (255, 151, 0) Auxiliary toner to RGB (255, 103, 4), and the menu RGB is (252, 200, 0). The font uses black RGB as (0, 0, 0). This color of this color is more avant-garde, and the color is warm, and it is more powerful. As shown in Figure 6 7) The bright red is also a very shocking color. If it is not matched, there may be no style and characteristics of the website. The following website is to use a red-friendly website. Let's take a look at his color match. The main tone he used is RGB (200, 9, 0). It is equipped with an abstract graphic. The words are used by RGB (213, 229, 167) look beautiful and unique, atmospheric. As shown in Figure 7 8) This color is not often used frequently when we make a web page. If you use it to your page, you will definitely give a new feeling. His main color was adjusted to RGB (144, 151, 97) Auxiliary thalling to RGB (173, 168, 112) Decorative as a black RGB (0,0,0) font as black RGB (0, 0, 0). Such a match is unique, and the color is harmonious. As shown in Figure 8 9) The following design is more simplified, but the color of color does not make the web page, but people feel a strong life and family atmosphere, which makes people in beauty and love. His body is composed of two colors, RGB (239, 200, 161) and RGB (201, 254, 200), respectively. This is simple, but it is vivid, jow online. As shown in Figure 9 10), this example is to prove a truth - as long as you have enough imagination, you can design a beautiful page. At present, I am very popular on the Internet is the matching of the web page. Don't exceed the four main colors, otherwise there is a feeling of messy. The following website is far more than three colors, but she is not beautiful. Therefore, it is important to control the driving ability. The menu of the following example uses seven colors, but we see the webpage is not messy, the authors feel creative. As the color matching of web design needs to be continuously explored and continuously innovate in practice, learn from other people's advanced methods and experiences, and can quickly improve our production level. The picture is not very clear, deal with it.
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
The related pictures of this topic are as follows:
Website color mystery
Over the heart, do you want to design a set of eyes-made color combinations? Or you have always been able to use the bank, the company's line number or financial institution's website always use the blue system? Then you come to the place. Although most of the website developers are very clear about the color disks used by the network and the 16-carry system of computational colors, but the principles behind color and effective color combinations are still understandable.
Since the century, the color itself is a difficult puzzle. For example, Socrates have assumed the source of "fire", which is the color generated by the "Whiteness" that combines the object itself. After that, Newton more explores the relationship between light and color; after many scientific research, the absolute relationship between optical wave and color sensing is finally confirmed in the 20th century. Today, color adjustment and color adjustment research information directly affects artists, designers and advertising AE staff. This article regarding color theory, it is designed to explore how to use color on the website, and also provide many colors and techniques, so that you can use color to control website design. Chromatics
We can see that the color is interacting with three elements: the reflection characteristics of the light source, the object, and the method of processing of the human retina and brain visual cortico. Regardless of which media we use - painting, printing or network - we have to rely on the above process to effectively use colors.
Colorful arrangement - rainbow
In the end of the seventeenth century, Newton proved that color is not present in the object itself, but the result of the light effect, and as long as the long short light wave on the visual spectrum can form white light. These visible light can correspond to seven different colors: red, orange, yellow, green, blue, indigo, purple.
Newton's visual spectrum separated in the experimentally accounted for a small portion of all electromagnetic spectroscopy, the entire spectrum range from "short frequency, long wave zone" (such as radio frequency) to "high frequency, short wave zone" ( For example, X-light). The area of the visible spectrum is between the infrared rays and ultraviolet rays, and the wavelength is about 400 nm (purple) to 700 nm (red). Although Newton proves that these optical waves are combined to form white light, it is actually red, green, and blue three-shot can produce white light.
Light absorption and reflection
When the optical wave is projected on the object, the substance transmits, absorbs or reflects light waves of different portions. According to the characteristics of different objects and its own atomic structure, it may reflect green light but absorb other wavelengths. At this time, people's retina and brain vision cortex processing this reflected light and then form the color we see.
When the artist and designer copies the color to the canvas or paper, they simulate this process, using the pigment to absorb some part of the optical wave, reflect other optical waves. For example, you want to generate green, we can use pigments that will absorb red and blue light waves. This process is the color pattern foundation of all paintings and print media.
Everything
Of course, whether it is reflected from an object or transmits its self-light source itself, we handle the ability of the optical wave is the visual cortical area of the retina and brain. Three receivers in the retina (or cone cells) can respond to frequencies of certain optical waves. Red cone cells can induce wavelengths of low frequencies, and the green cone cells reacts with the wavelength of the medium frequency, and the blue cone cells reacts the wavelength of high frequencies. These cone cells are not binary, but similar to channels, stimulation can be conveyed to the visual cortico area of the brain, and then the color we see is produced.
In order to output a particular color, the artist / designers must rely on the visual receiver within the human body to some optical waves by reacting the visual receiver in the human body. As regards the principle of addition or subtraction, you should see what material you use to express your work. Color mode and color management
Methods of designers to handle colors There are usually two: one, mesh, mixed different colors, to form white light; two, decay, use pigments to reduce optical waves. The color discs and CMYK systems used by traditional artists are reduced color method. On the website, we face the projection of light, rather than reflecting light from the object, so it is used in the mean mode, we call it RGB.
Plum color
In nature, the light waves we have seen are reflected by objects into our retina, but the color of the color is not only this. For example, the stage light is to produce different color light by using white light through a colored filter. The computer screen is also a manner that uses projected light waves, but in different, it produces color light by allowing the electronic ballast to emit to the phosphorus screen. These electronic light guns can emit three colors: red, green, blue. By these three color light, the computer screen can make a complete spectrum. This is the RGB color system well known. In the RGB system, the designer can also make a spectrum through the mixed three primary colors. Mix two primary colors, will result in three primary colors: blue, magenta, yellow. As mentioned earlier, you can make white light together with the three original color of the light. Therefore, if a RGB value is 255, 255, 255, is expressed as white. If the three primary colors of light (RGB: 0, 0, 0) are completely taken completely.
Decrease
The opposite mode of the RGB mode is the CMYK mode, that is, the use of the way to reduce the light wave is generated. Since the color of the object comes from the reflected light wave, this system is used to absorb red, green or blue light of the object using three primary colors. For example, if you reduce red light, then excess green waves and blue waves will produce cyan. The pigments used to remove red light, reflect green, and blue are blue. Similarly, the plane printing designer will use magenta to absorb part of the green light, and use yellow light to absorb part of the blue light.
In this way, we can clearly know that the three primary colors used in Cymk mode is the second color in the RGB mode, and the other is also true. Furthermore, if red, green, blue light is mixed together to form white light, then it will be mixed with the pigment of green, magenta, and yellow, because the optical wave of the three original colors will be absorbed by the pigment. However, it is limited to the factors of pigments and printing systems, mixing green, magenta, and yellow and can't completely absorb all of the optical waves. Therefore, it is actually a black to complete, so there is a K element in CMYK.
Color management
Due to these two sets of different copy color methods, if designers must create numbers and print images at the same time. In addition to the difficulties between the corresponding plum color and the reduction, the color range of RGB and CMYK can be used is quite large. Therefore, for cross-media designers, there is a set of color management systems that can be converted according to the output device can reduce a lot of headache problems. The color management system can be included in the operating system, some application software. Color
One of the biggest challenges in visual design is to identify effective tuning colors, which makes the color system or monotonous, but also exaggerated. To understand the relationship between color balance, you can start from understanding the color ring. Color circulation presents all possible colors in a color mode
Each color mode includes a set of three primary colors, and then produces different colors via mutual mixing of this group of three primary colors. In traditional color, the three primary color refers to blue, red, yellow; and in RGB color mode, the three original color of the color is red, green, blue. Any combination of two color light will produce a set of colors. The three color is mixed with the primary color, or it is produced by mixing two primary colors. We use color rings to present color logic. As you can see from the figure below, RGB's color loop and the color loop used by traditional artists are very different.
Color tone and: single color, just shades, hue and brightness.
Approximate tones and: use adjacent colors or colors close to color circles.
Complementation tonal and: use two opposite colors on the color ring to do. Such color combinations typically provide maximum comparison sensation, but if excessive use is exaggerated.
Comparative hue and: use a color, plus two colors next to its complementary colors. Comparative hue and can provide comparison than complementary tones and more soft comparison.
Triangle and: Use three equality colors on color loops.
Double mutual adjustment and: use two groups (total four colors) complementary colors.
When exploring the color, usually it is best to start from solid color, then try to different degrees of rendering, hue, and darkness. Then you can use the website simulation map to test the visual effects of a color combination. Remember, the importance of contrast is not only designed to be attractive; it may also help or hinder the reading of the website. The meaning of color conveying When we examine the scientific nature of color and color tuning, we found that the senses play a very important role in color use. In addition to sensory reactions and identification and color, humans have a deeper side of the reaction. Color can trigger a strong physiological / psychological resonance, whether it is a front or negative. When you select a color combination, make sure that the color you choose can cause an appropriate echo.
Color physiological response
Although there is no direct evidence that the color can trigger a specific reaction, it is studied that some colors can indeed cause some physiological response. For example, red is a very exciting color, often speeding up, breathing. Therefore, red is very suitable for use in need to pay attention and emphasis, but if you use it in the background color, it may be too strong. In the same manner, yellow can also be paid attention, but because of the extreme reflexibility, it is easy to cause fatigue and uncomfortable eyes. On the other hand, the blue is relaxed to the nervous system, and according to some studies, production is also increased in blue as a background. However, if your product is related to food, don't use blue as a background color, because blue will suppress people's appetite.
Color symbol
The meaning of color emblem is sometimes related to things in nature. For example, the Lenovo generated by the color of the sky and the sun is great. However, most of the color meaning is related to national culture, such as political, religious, myths or social structures - these factors may have different differences over time and geographical. If your designed website is for foreign regions, you can be careful, the same color may have the effect of South-China in different cultures. In addition, most of the colors have both positive and negative associations. You can use the color quality and saturation of the color, or use a mixed two colors to emphasize a particular meaning.
Generally in the culture of Western, the meaning conveyed by:
Red: passion, romance, flame, violence, aggression. Red in many cultures is a stopped signal for warning or disabling some actions.
Purple: creation, mystery, loyalty, mystery, rare. Purple is related to death in certain cultures.
Blue: loyalty, safe, conservative, quiet, indifference, sadness.
Green: nature, stable, grow, taboo. In North American culture, the green represents "line", related to environmental awareness, and often links to things about fiscal.
Yellow: bright, glory, disease, weakness.
Black: ability, exquisite, modern, death, morbid, evil.
White: pure, naive, clean, truth, peace, cold, poor. White also represents the color of death in Chinese culture.
Select the most appropriate color combination
The color of the website is not an easy task; many companies also hire professional consultants to make their color combinations to match, strengthen the overall brand image. However, if you have colors, you have colors, and you can learn what you can cause, you only need to do with your method, develop a valid color combination. Before you start looking for the corresponding color, you must first know the messages and goals you have to convey your site. One, after you understand the message you want to convey, you can start toning. In the process, you can't help but test the mixed colors, this is a very creative process. Don't be afraid to use bold color combinations, but before you make your product public, remember to get full test!
Color usage skills and pointers
1. Learn about the messages and brands you want to convey your site. Select the color of these messages to enhance these messages. For example, if you design a stable financial institution, then choose a cool color, soft colors, like blue, gray or green. In this case, if the warm color or lively color, the website brand may be destroyed. 2. Learn your reader group. Cultural differences may cause color to produce non-expected reactions. At the same time, the reactions of different regions and different age layers will also be different. Young ethnic groups generally prefer to saturate, but such colors can't afford the interest of high age.
3. Do not use too much color. In addition to black and white, it is enough to choose four to five colors. Too many colors can cause confusion and pull away the attention of the reader.
4. Use the contrast color in the part of the reading. The color is too close to can't produce enough comparison, and it will also hinder the audience reading. The black word in white is best.
5. Test comparison with grayscale. When you are processing black, white and gray, sometimes it is difficult to determine the relative value of each color. In order to confirm that your color disc can provide enough comparison, you can build a simulation website and convert it into an ash.
6. Select color to pay attention to timeliness. The same color is easy to flood the entire market, and the consumer is very fast, and it is numb to the popular color. But in another point of view, you can use the popular color for decades ago, causing people's nostalgia.
7. Consider the functionality color when selecting a color disk. Don't forget to build a key information section, such as title and hyperlink.
8. Pay attention to the problem of the website. Every website developer knows that even the network universal color is different when crossing the platform is displayed. Remember to correct your gamma value and test your color disc on a different job platform.
The color of the web design concept, the soul of the website style
Color is the first most often to give the browser's factor in the image. In fact, the image image is a very important part of the marketing link. Like people's clothes, the structure of the information space also needs to be packaged. The content of the website is more than just the text, but the visual element also plays an important location in the website.
The style of establishing the website can start from the following aspects:
Color: Is it lively or solemn, it is still a beautiful. For example, the CleveGrowers food website (Figure 5) is selected with color, but if the color of the selectin may not be able to reflect the angry with fruits and vegetables. The tones of the North American crafts (Figure 4) are mainly based on the elements of handicrafts. Picture: Do you need to consider it is a realistic or write, it is a professional or popularization, it is for children or an adult. Simple: Is it pursuit of simplicity or sprartine, and the website of different nature will be different in this regard. Such as art sites, they will not use various techniques to show their ideas.
Below, we choose a few English websites to do color and site style analysis:
1. Lip://www.liptont.com/
Lendon is a historic tea brand, and we are in a usual rilton black tea, Lipon ice tea is its product. In the enterprise site, highlighting is not a long history of Lietton, but a rich product line, tea history and information about human health.
The content organization of this site is carried out around the product line of the Ladon. The name, trademark, graphics, functions and application areas of the Lipon products are unblorandum, and Lipon Ice Tea is displayed on the left side of the homepage. Therefore, the site is highlighted is the content of the product.
Through the Lindong Health Center, the visitor can get a lot of information about tea, so that they accept the concept of Lilton paying attention to consumers from subconscious. In fact, in the history of tea, the visitor can understand the long history of Lipon tea, and objectively play the role of stimulating consumption.
In addition, the home page uses the yellow color common to the Lipon brand, which is both an online expansion of the brand and is also an important part of the company's overall image, which constitutes an important part of the enterprise identification system (CIS). 2. Chinese porcelain http://www.arttiques.com/
The site is made of clean, delicate, elegant atmosphere, with a strong contrast with colorful porcelain, which makes people feel exquisite and beautiful in porcelain crafts. This color match is a harmonious way to showcase colorful crafts.
3. Antique imitation http://www.fineartrepro.com/
This site uses gray background that does not seem to highlight the quaint temperament that people usually understand, but it is possible to apply for traditional gray-white tones in the medieval Europe. Because East and Western culture has a big difference, it is also better to choose the color of oriental classical style when designing the website of China's culture.
4. North American Crafts Exhibition http://www.craftsamericashows.com/
From the selection of this website page, we can feel the cognition of web designers, their hue selection and color matching, highlighting the craftsmanship. Blue, gray, green, light yellow is all common colors commonly used by handicrafts, forming a consistency of site style.
5. Food Wholesalers http://clevegrowers.com/
Enter the homepage, we first feel that the vital scene, colorful variety of vegetables give the viewer with fresh visual impact, thus triggering the desire to buy. It simultaneously uses a touch of fruits and vegetables, and the moment is the main business of the company, while prolonging the sensory stimulation time.
Through the analysis of the above websites, it can be seen that if an angle of shaping an online image, the following visual elements are indispensable.
The colorful visual image of the main body is reflected in coordinated color, but also the color of color not only reflects the aesthetic appeal, but also a strengthened identification signal. Therefore, the main color is determined, to maintain a certain stability, use this color to help the audience to identify the website. For example, the yellow is selected as the main color in the Lipon website, which is the main color of the litton product packaging, which has played a lot to identify and strengthen the product information of the website. The logo is not only in the most eye-catching position, but also consistently insisted on. The body graphics body graphic is the basis of web design, and the column division and location arrangement of the expression relationship must also rely on the main graph. The main body graph also maintains a relatively stable, generally one year in one cycle, can be creative to the main body graphic. Because the changes in graphics can give people a fresh feel.
In addition, color is important in the image of the website, usually we will find the news of the news class to choose white-style black words, not only because of the lowest in this way, more because people usually use this newspaper So in subconscious, this color is the highest in transmitting news to the cerebella. But in other types of websites, we don't just use white, such as the Lip-mentioned Lipin website, bringing color into the company's overall enterprise identification, greatly strengthened the impact of the website on the sensory sensory. In the antique imitation website, we also saw the difference in history in the East and Western culture, so in the position of the site, the difference in culture is also very important.
