Web page experience: Web page color matching

The color of a web page is one of the keys to establishing a website's image, but color matching is a headache for netizens. What colors should be used for the background, text, icons, borders, hyperlinks... of a web page, and what colors should be matched to best express the intended connotation? Here are some of my thoughts, I hope they will be of some inspiration to you.
First, let's learn some basic knowledge about colors:
1. Color is caused by the refraction of light.
2. Red, yellow and blue are the three primary colors, and other colors can be mixed with these three colors. The color expression in the HTML language of web pages is represented by the numerical values of these three colors. For example, red is color (255,0,0) and its hexadecimal representation is (FF0000) and white is (FFFFFF). The "bgColor=#FFFFFF" we often see means that the background color is white.
3. Colors are divided into two categories: non-colors and colors. Non-color refers to the black, white and gray system colors. Color refers to all colors except non-color.
4. Any color has the properties of saturation and transparency. Changes in the properties produce different hues, so at least millions of colors can be produced.
Is it better to use color or non-color when making web pages? According to research conducted by professional research institutions, the memory effect of color is 3.5 times that of black and white. That is to say, in general, color pages are more attractive than completely black and white pages.
Our usual practice is: use non-color (black) for the main content text, and use color for borders, backgrounds, and pictures. This way, the overall page is not monotonous and the main content will not be dizzying.
●Non-color matching Black and white is the most basic and simplest matching, white text on black background or white text on black background, both are very clear and distinct. Gray is a universal color that can be matched with any color and can also help two opposing colors transition harmoniously. If you really can't find a suitable color, then try gray, the effect will definitely not be too bad.
●Color matching Colors are ever-changing, and color matching is the focus of our research. We still need to learn some more about colors.
1. Color wheel. We can get a color ring by gradually changing the colors from "red->yellow->green->blue->red" in sequence. The two ends of the color wheel are warm colors and cool colors, and in the middle are neutral colors. (As shown below)
Red, orange, orange-yellow, yellow, yellow-green, green, cyan, blue-green, blue, blue-purple, purple, purple-red, red
|___________| |____| |_________| |_________|
| | | |
Warm colors, neutral colors, cold colors, neutral colors. 2. The psychological feeling of color. Different colors will give viewers different psychological feelings.
Red---is an exciting color. The stimulating effect can make people feel impulsive, angry, enthusiastic, and energetic.
Green---between the cool and warm colors, it conveys a feeling of harmony, tranquility, health and security. It can create an elegant and comfortable atmosphere when paired with golden and light white.
Orange is also an exciting color, with light, cheerful, warm, cozy and fashionable effects.
Yellow---represents happiness, hope, wisdom and a cheerful personality, and it has the highest brightness.
Blue---is the coolest, freshest and most professional color. When mixed with white, it can embody a soft, elegant, and romantic atmosphere (like the color of the sky, white - with a sense of whiteness, brightness, innocence, and cleanliness.
Black---has a feeling of depth, mystery, silence, sadness and depression.
Gray---it represents moderation, ordinariness, gentleness, humility, neutrality and elegance.
Slight changes in saturation and transparency of each color will produce different feelings. Taking green as an example, yellow-green has a youthful and vigorous visual conception, while blue-green appears quiet and deep.
●Principles of web page color matching
1. Vividness of colors. The colors of the web page should be bright and eye-catching.
2. The uniqueness of color. Have a distinctive color to make people have a strong impression of you. (Refer to the section on standard colors for website CI in the second article of Design Thinking)
3. The suitability of color. That is to say, the color should be suitable for the atmosphere of the content you are expressing. For example, pink is used to reflect the flexibility of female sites.
4. The associative nature of colors. Different colors will produce different associations. Blue reminds us of the sky, black reminds us of the night, red reminds us of happy events, etc. The color you choose should be related to the content of your web page.
●The process of mastering web page colors With the accumulation of experience in web page production, our use of colors has such a trend: monochrome -> colorful -> standard color -> monochrome. In the beginning, due to lack of technology and knowledge, only simple web pages with single colors could be produced. After having a certain foundation and materials, people hoped to make a beautiful web page, piling up the best pictures they collected and the most satisfactory colors on the page. But after a long time, they found that the colors were messy and had no personality and style. The third time they repositioned their website, they chose colors that suited them, and the sites they launched were often more successful. When the final design concept and technology reached its peak, they returned to simplicity and used single colors or even non-colors to design simple and exquisite sites.
○Tips on color matching for web pages At this point in the article, some anxious netizens may ask: "What color combination looks good? Can you recommend some color schemes?" Don't worry, here are some tips that can help you quickly become a color master
1. Use one color. Here it means first selecting a color, then adjusting the transparency or saturation (in layman's terms, lightening or darkening the color) to create a new color for use on the web page. Such a page looks unified in color and has a sense of hierarchy.
2. Use two colors. First select a color, then select its contrasting color (press ctrl shift I in Photoshop). That’s how I determined the blue and yellow colors for my homepage. The entire page is colorful but not overly colorful.
3. Use a color scheme. Simply put, it is to use a color that reflects a feeling, such as light blue, light yellow, light green; or khaki, earthy gray, earthy blue. The method of determining the color is different for each person. I click the foreground color box in Photoshop, select "Custom" in the color picker window that pops up, and then select it in the "Color Library".
4. Use black and one color. For example, bright red fonts with a black border look very "jumpy".
In web page color matching, taboo is:
1. Don’t use all the colors, try to use as few as possible

<<: Improve the efficiency of page code modification and master the core knowledge of HTML language

>>: Basic principles of MySQL scalable design

More than 100 lines of code to implement react drag hooks

Web page experience: Web page color matching

More than 100 lines of code to implement react drag hooks

mysql8.0.23 msi installation super detailed tutorial

HTML+CSS to achieve text folding special effects example

Pure CSS to achieve horizontal line animation under the element (background-image)

How to make the height of child div fill the remaining space of parent container in CSS

Negative margin-top value solves the problem of vertical center alignment between label text and input

How to use Nginx proxy to surf the Internet

Util module in node.js tutorial example detailed explanation

About the layout method of content overflow in table

Detailed explanation of Django+Vue+Docker to build an interface testing platform

Recommend

HTML+CSS to achieve charging water drop fusion special effects code

MySQL trigger definition and usage simple example

The best explanation of HTTPS

jenkins+gitlab+nginx deployment of front-end application

Summary of Linux Logical Volume Management (LVM) usage

MySQL 5.7.17 winx64 decompression version installation and configuration method graphic tutorial

Practical TypeScript tips you may not know

What kinds of MYSQL connection queries do you know?

Solution for Nginx installation without generating sbin directory

MySQL database aggregate query and union query operations

How to use the dig/nslookup command to view DNS resolution steps

Introduction to MySQL method of deleting table data with foreign key constraints

Pure CSS to add style to select (no script) implementation

Vue implements login verification code

Encapsulate a simplest ErrorBoundary component to handle react exceptions