Front page > Commonly used colors on web pages

Commonly used colors on web pages

Name: Commonly used colors on web pages
Author: 录屏网

Color matching common sense:
1. The expression of colors on web pages uses three colors, red (R), green (G), blue (B), and what is commonly known as RGB color. It includes all colors perceived by humans. The expression of colors on web pages As follows (red as an example) RGB format: red is (255,0,0) or hexadecimal hex format is (FF0000).
2. Press the color "Red"->Yellow->Green->Blue->Red" can be over-gradient in sequence to obtain 12 color rings: red, orange-red, orange, orange-yellow, yellow, yellow-green, green, blue-green, blue, blue-violet, purple, purple-red.
3. Colors are divided into two categories: achromatic and chromatic. Achromatic colors refer to black, white, and gray system colors. Color refers to all colors except achromatic colors. Usually content text is in achromatic color (black), borders, backgrounds, and pictures are in color. Therefore, even if the page is rich, the content will still not be dazzling. Usually, the contrast between the background and the content is large.

Sort by single color as main color
Web design generally uses a single color as the main color. Each category below uses this color as the main color, paired with other or similar colors, and is arranged in order from light to strong.

Red

- is an exciting color. The stimulating effect can make people feel impulsive, angry, enthusiastic, and energetic.

#FFFFCC

#CCFFFF

#FFCCCC

#99CCCC

#FFCC99

#FFCCCC

#FF9999

#996699

#FFCCCC

#CC9999

#FFFFCC

#CCCC99

#FFCCCC

#FFFF99

#CCCCFF

#0099CC

#CCCCCC

#FF6666

#FF9966

#FF6666

#FFCCCC

#CC9966

#666666

#CC9999

#FF6666

#FFFF66

#99CC66

#CC3333

#CCCCCC

#003366

#993333

#CCCC00

#663366

#CCCC99

#666666

#CC9999

#FF6666

#FFFF00

#0066CC

#CC0033

#333333

#CCCC00

#336633

#990033

#FFCC99

#993333

#CC9966

#003300

#FF0033

#333399

#CCCC00

#CC0033

#000000

#003399

#000000

#99CC00

#CC0033

#999933

#993333

#333300

Orange color

It is also an exciting color, with light, joyful, warm, warm and fashionable effects.

#FFCC99

#FFFF99

#99CC99

#FFCC99

#CCFF99

#CCCCCC

#FFCC99

#FFFFCC

#99CCFF

#FF9966

#FFFFCC

#99CC99

#FF9900

#FFFFCC

#336699

#CCCC33

#FFFF99

#CC9933

#996600

#FFCC33

#FFFFCC

#CC9933

#336666

#FF9900

#FFFF00

#0099CC

#99CC33

#FF9900

#FFCC00

#FF9933

#99CC33

#CC6699

#FF9933

#FFFF00

#3366CC

#FF9933

#FFFFCC

#009966

#FF6600

#FFFF66

#009966

#990033

#CCFF66

#FF9900

#FF9966

#996600

#CCCC00

#CC6600

#999999

#CCCC33

#CC6600

#CCCC33

#336699

#000000

#FF9933

#999966

#663300

#FF9933

#FFFF66

Yellow

-With a personality of happiness, hope, wisdom and lightness, it has the highest brightness.

#FFFFCC

#CCFFFF

#FFCCCC

#FFFF00

#FFFFFF

#CCCC00

#99CCFF

#FFCC33

#FFFFCC

#FFFF33

#99CCFF

#CCCCCC

#FFFF00

#FFFFFF

#9933FF

#99CCFF

#FFCC33

#FFFF33

#FFCC00

#66CC00

#FFFF99

#FF9900

#FFFF00

#0099CC

#FFCC00

#0000CC

#FFFF99

#CC9999

#FFFFCC

#6666CC

#999933

#FFFFCC

#CC99CC

#CCCC00

#666600

#FFFF66

#FF9966

#FFFFCC

#99CC99

#FFCC33

#FFFFCC

#999966

#FFCC99

#FF6666

#FFFF66

#FFCC99

#999966

#FFFF00

#FFFF99

#99CC99

#666600

#999966

#FFFF99

#333333

#006633

#333300

#CCCC99

#006633

#663300

#CCCC66

Yellow-green

#33CC33

#6666CC

#FFFFFF

#CCCC33

#FFFFFF

#CCFFCC

#FFCC99

#CCFF99

#CCCCCC

#CCCC00

#999966

#FFFFCC

#CCCC33

#FFFFFF

#336699

#CCCC33

#999999

#CCFFFF

#00CC00

#0066CC

#99CCCC

#99CC33

#FF9900

#FFCC00

#99CC33

#CCCCFF

#663300

#CCCC33

#993399

#000000

#CC6600

#999999

#CCCC33

#CC9933

#FFFF99

#99CC99

#669933

#CCCC33

#663300

#99CC33

#CCCCCC

#000000

#CC6600

#CCCC33

#336699

#666600

#CCCC66

#CCFFCC

#333366

#99CC33

#336699

#666666

#99CC33

#003366

#003333

#99CC33

#999999

#996633

#FFFF99

#99CC66

Green

-Between cold and warm colors, it gives a feeling of harmony, tranquility, health and security. Paired with golden yellow and light white, it can create an elegant and comfortable atmosphere.

#009966

#FFFFFF

#FFFF00

#339933

#FFFFFF

#9933CC

#339933

#FFFFFF

#000000

#339933

#99CC00

#FFFFCC

#CCCC66

#336666

#99CC33

#FFFF66

#336600

#339933

#CC9900

#666666

#339966

#CCCCCC

#003366

#669933

#CCCCCC

#000000

#339933

#CCCCCC

#6699CC

#006633

#CCCC33

#CC9933

#339933

#666633

#CCCC66

#339933

#FFCC33

#336699

#006633

#669933

#99CC99

#336666

#996633

#CCCC33

#003300

#669933

#CCCC99

#006633

#990033

#FF9900

#006633

#333300

#CCCC99

#006633

#663300

#CCCC66

#993333

#CC9966

#003300

Green

#CCFF99

#FFFFFF

#66CCCC

#339999

#FFFFFF

#99CCFF

#66CC99

#FFFFFF

#666699

#009999

#66CCCC

#CCFFFF

#66CCCC

#CCFF66

#FF99CC

#339999

#FFFF00

#336699

#CC9933

#339999

#FFCC33

#FFCC00

#009999

#CC3333

#669999

#CCCCCC

#CC99CC

#339999

#CCCCCC

#000000

#339999

#666699

#CCCCCC

#003333

#99CC99

#FFFFCC

#669999

#CCFFCC

#996699

#CCCC99

#669999

#999966

#CCCC99

#339999

#336666

#669999

#CCCC99

#999999

#003366

#669999

#663333

#339999

#CCCC66

#333333

#339999

#CCFFCC

#336666

#3399CC

#666666

Blue

- is the coolest, freshest, professional color. Mixed with white, it can embody a soft, elegant and romantic atmosphere (like the color of the sky:) White - has a feeling of whiteness, brightness, innocence and cleanliness.

#FFFFCC

#CCFFFF

#FFCCCC

#99CCCC

#FFFFFF

#3399CC

#CCFFCC

#99CCCC

#FFFFCC

#CCCCFF

#FFFFFF

#99CCFF

#FFCC99

#FFFFCC

#99CCFF

#336699

#FFFFFF

#99CCCC

#FFFFFF

#CCFF99

#CCCCFF

#FFFFCC

#CCFFFF

#99CCCC

#FFFFFF

#336699

#99CCFF

#CCFFFF

#6699CC

#99CC33

#FFFFFF

#3399CC

#0099CC

#FFFFCC

#666699

#CCCCCC

#003366

#99CCFF

#0099CC

#FFFFFF

#666666

#CCCCCC

#6699CC

#666666

#336699

#CCCC99

#003366

#3399CC

#003366

#CCCCCC

#6699CC

#006699

#000000

#003366

#CCCCCC

#006699

#999933

#336699

#333333

Blue purple

#CCFFFF

#FFFFFF

#CCCCFF

#CCCCCC

#FFFFFF

#666699

#99CCFF

#FFFFFF

#333399

#6666CC

#FFFFFF

#FF9999

#9999FF

#FFCC33

#FFFFCC

#0099CC

#FFFFCC

#666699

#0000FF

#6699FF

#CCFFFF

#6666FF

#66CCFF

#CCFF66

#669999

#FFFFCC

#6666CC

#9999CC

#FF9999

#666699

#003399

#FFCCCC

#6699CC

#CC6666

#333399

#CCCC00

#000066

#6666FF

#CCCCCC

#003399

#CCFF99

#333333

#333366

#CC0033

#CCCCCC

#336699

#CCCC66

#333300

#003399

#FFFF99

#000000

#990066

#CCCC33

#003399

#CC3333

#000000

#003399

#333366

#999966

#333333

Purple

#FFFFCC

#FFFF99

#CCCCFF

#9999CC

#99CC99

#FFFFFF

#FFCCCC

#CCCCFF

#CCCC99

#9999CC

#FFFFCC

#FFCCCC

#FF99CC

#CCCCFF

#660066

#FFFFFF

#663333

#CCCC99

#333333

#9966CC

#CCCC00

#FF9966

#663399

#996699

#FFCCCC

#CC99CC

#996666

#CC99CC

#FFCCCC

#FFCC99

#FF9933

#663366

#333399

#CCCCFF

#CC99CC

#663366

#CCCCCC

#CC99CC

#996699

#9999CC

#CCCCFF

#CC9966

#999999

#663366

#330033

#666666

#669999

#CCCCCC

#999999

#663366

#FF33CC

#CCCC99

#663366

#999999

#CCCCFF

#999966

#993333

#330033

Purple red

#FFCCCC

#FFFFFF

#99CC00

#FF99CC

#FFFFFF

#993366

#66CC99

#FFFFFF

#CC6699

#CC9999

#FFCCCC

#CC99CC

#FFCCCC

#FFFF99

#CCCCFF

#FFFF99

#993399

#FF99CC

#66CCCC

#CCFF66

#FF99CC

#003399

#CCCC00

#FFCCCC

#FF99CC

#CCCCFF

#FF9999

#FFCCCC

#FF99CC

#669966

#CC6699

#FFCCFF

#CCCCCC

#CC99CC

#CC3399

#FFCC99

#FF6666

#FF3399

#CCCC99

#663366

#FFFFCC

#FFCCCC

#663366

#CCCCCC

#CC99CC

#990066

#FFCC00

#CC0033

#990066

#CCCCCC

#006699

#999900

#990033

#000000

#990066

#000000

#009966

Classification by impression combination

Color matching may seem complicated, but it’s not mysterious. Since each color has its own position in the impression space, the impression obtained by color matching can be approximated by addition and subtraction. If each color is high-brightness, then their superposition will naturally be soft and bright; if each color is strong, then their superposition will be strong. Of course, in the actual design process, designers also need to consider multiplication and division. For example, colors with the same brightness and contrast have different angles on the color wheel, and when paired together, they will get an ever-changing feeling. Therefore, in addition to listing the combinations according to hue, this book also lists the combinations that focus on impression for readers' reference.

Soft, bright, gentle

When colors with high brightness are paired together, you will get a soft, bright and gentle feeling. In order to avoid glare, designers generally use low-brightness foreground tones to blend, while the distance between colors on the color wheel also helps avoid dullness.

#FFFFCC

#CCFFFF

#FFCCCC

#FFFF99

#CCCCFF

#FF9966

#FF6666

#FFCCCC

#FFCC99

#CCFF99

#CCCCCC

#FFCCCC

#CCCCFF

#CCFFCC

#CCFFFF

#CCCCCC

#CCFF99

#FFCCCC

#FFFFFF

#99CC99

#99CCCC

#FFCC99

#FFCCCC

#CCCCFF

#FFCCCC

#CCFFFF

#FFCC99

#FFFFCC

#99CCCC

Soft, clean and cheerful

For a soft, clean, and cheerful impression, colors adjacent from blue to green in the color wheel should be the most suitable. And the brightness is on the high side. It can be seen that almost every combination has white participation. Of course, in actual design, high-brightness colors with opposite hues of blue and green can be used instead of white.

#CCFF99

#FFFFFF

#99CCFF

#99CCCC

#FFFFFF

#CCFF99

#CCFFCC

#FFFFFF

#66CCCC

#CCCCFF

#FFFFFF

#99CCCC

#CCFFCC

#99CCCC

#FFFFCC

#CCFFFF

#FFFFFF

#CCCCFF

#CCFFFF

#FFFFFF

#99CCFF

#66CCFF

#FFFFFF

#CCFFFF

#6699CC

#FFFFFF

#99CCFF

#CCCCFF

#FFFFFF

#99CCFF

Cute, happy, interesting

The characteristics of color matching in the impression of cute, happy and interesting are uniform hue distribution, warm and cold combination, high saturation and high color resolution.

#66CCCC

#CCFF66

#FF99CC

#FF9999

#FFFFFF

#FFCC99

#FF6666

#FFFF66

#99CC66

#666699

#FFFFFF

#FF9999

#99CC33

#FF9900

#FFCC00

#FF0033

#FFFFFF

#FF9966

#FF9900

#CCFF00

#CC3399

#99CC33

#FFFFFF

#FF6600

#993366

#CCCC33

#666633

#66CCCC

#FFFFFF

#666699

Lively, happy, interesting

Lively, happy, and interesting. Compared with the previous impression, the color selection is wider. The most important change is to replace pure white with low-saturated color or gray.

#CC9999

#FFFF99

#666699

#FF9900

#FFFF00

#0099CC

#CCCC99

#CC3399

#99CC00

#FF6666

#FFFF00

#3399CC

#CC6600

#999999

#CCCC33

#FF9933

#FFFFCC

#009933

#0099CC

#CCCCCC

#FF6666

#FF6600

#FFFF66

#009966

#CC6633

#FFCC99

#CC6600

#CC0066

#009999

#FFCC33

Sporty and brisk

The colors of sports should enhance the intense and exciting feelings, while also reflecting health, happiness and sunshine. Therefore, colors with higher saturation and lower brightness often appear in this kind of impression.

#FF6666

#FFFF00

#006699

#FF9966

#FFFFFF

#0066CC

#339933

#FFCC33

#336699

#FF9900

#FFFFCC

#336699

#CC6600

#CCCC44

#336699

#99CC33

#FFFFFF

#0099CC

#99CC33

#FF6666

#336699

#FFFFFF

#99CCCC

#FF0033

#333399

#CCCC00

#33CC99

#FFFF00

#336699

Brisk, gorgeous and dynamic

A gorgeous impression requires that the page be full of color and have high saturation, and appropriately weakening the brightness can strengthen this impression.

#990066

#FFCC00

#CC0033

#FFCC33

#333399

#FF0033

#666699

#FFFF00

#FF0033

#006699

#FFFF33

#FFCC00

#009999

#CC3366

#FF0033

#CCCC00

#006699

#CCCC00

#FF9933

#663399

#FF9933

#FFFF00

#336699

#CC3333

#FFCCCC

#99CC00

#003399

#FFFF00

#FF6600

Wild, energetic, dynamic

Low-brightness colors are indispensable in the wild impression space, and can even be matched with appropriate black. Other colors have high saturation and strong contrast.

#990066

#FFFF00

#003399

#CC0033

#000000

#003399

#FFFF00

#F00000

#CC3333

#CCCCCC

#003366

#CC0033

#333333

#CCCC00

#000000

#99CC00

#CC0033

#FF0033

#333333

#FF9900

#990066

#000000

#009966

#666666

#FF6600

#333333

#993333

#CCCC00

#663366

Gorgeous, fancy, feminine

In feminine pages, purple and magenta are the protagonists, and pink and green are also common colors. Generally, a highly saturated combination is required between them.

#FFFF99

#993399

#FF99CC

#FF6666

#FFFFFF

#339999

#FF99CC

#003399

#CCFF00

#66CC99

#FFFFFF

#CC6699

#CC3399

#FFCC99

#FF6666

#FFCCCC

#FFFFFF

#993366

#CC6699

#FFFF00

#666699

#CC6699

#99CC66

#663366

#FF33CC

#CCCC99

#663366

#CC3399

#FFCC99

#FF6666

Aftertaste, femininity, elegance

The feeling of elegance is very strange, and the saturation of the color generally needs to be reduced. Generally, the adjacent colors of blue and red are used to adjust the brightness and saturation for matching.

#CCCCCC

#CC99CC

#CC3399

#FFCCCC

#FF99CC

#CCCCFF

#CC3399

#9933CC

#CC99CC

#9999CC

#FFFFCC

#FFCCCC

#663366

#CCCCCC

#CC99CC

#FF9999

#FFCCCC

#FF99CC

#996666

#CC99CC

#FFCCCC

#CC9999

#CCCCCC

#FFCCCC

#FF9999

#996699

#FFCCCC

#996699

#FFCCCC

#CC99CC

Noble, natural and stable

Nobility generally uses low-brightness yellow-green. Reduce the color brightness and pay attention to the balance of colors, and the page will appear stable.

#CCCC33

#FFFF99

#CC9933

#CC9966

#CCCC66

#669999

#FF9966

#996600

#CCCC00

#CCCC66

#660033

#CC6600

#CCCC00

#666600

#CCCCFF

#CC9933

#009999

#FFCC33

#999966

#CCCC99

#339999

#99CC99

#669933

#336633

#666633

#999933

#CC9966

#660000

#CC9900

#CCCC99

Calm and natural

Green is the protagonist of a calm and natural impression, but as the main color of the page, green can easily convey an overly negative feeling, so special attention should be paid to the design of the pattern.

#FFFF99

#99CC99

#666600

#996633

#FFFF99

#99CC66

#006600

#66CC66

#CCFF99

#666600

#CCCC66

#CCFFCC

#669933

#CCCC33

#663300

#666633

#999933

#CC9966

#003300

#669933

#CCCC99

#006633

#663300

#CCCC66

#666600

#FFFFCC

#999999

#006633

#333300

#CCCC99

Traditional, elegant and elegant

Traditional content generally requires lowering the saturation of colors, especially brown. As mentioned earlier, purple is also a commonly used hue for elegance and elegance.

#999933

#FFFFCC

#CC99CC

#CC9966

#666666

#CC9999

#CCCC99

#333333

#9966CC

#CCCC99

#666666

#CC9999

#996699

#CCCC99

#669999

#CC9966

#999999

#666666

#339966

#CCCCCC

#996699

#663366

#999999

#CCCCFF

#996699

#9999CC

#CCCCFF

#CCCC99

#999999

#663300

Traditional, steady, classical

Tradition, stability, and classicism are all conservative impressions. When choosing colors, you should try to use low-brightness warm colors. This combination is in line with mature aesthetics.

#6699CC

#663366

#CCCC99

#990033

#CCFF66

#FF9900

#666699

#660033

#99CC99

#663300

#FF9933

#FFFF66

#990033

#006633

#CCCC00

#660033

#999933

#660099

#993366

#CCCC33

#666633

#996600

#CCCC66

#666600

#009933

#CC9900

#666666

#666633

#CCCC33

#CC3366

Loyal, stable and tasteful

Colors with low brightness and saturation will give people a feeling of loyalty and stability. In order to prevent the color from being too conservative and making the page rigid and negative, such a combination should pay attention to the combination of cold and warm and the contrast between light and dark.

#FFFFCC

#CC9933

#336666

#996633

#CCCC33

#336633

#990033

#FFCC99

#333366

#669999

#996600

#993333

#CC9966

#003300

#336633

#CCCC99

#333366

#663300

#999933

#333333

#663366

#666666

#333366

#999900

#990033

#CC99CC

#333366

#990033

#CCCCCC

Simple, clean, progressive

Simple and clean colors can be expressed in blue and green in hue, leaving a large area of white. The impression of progress can be made by using more blue, paired with low saturation or even gray.

#CCCCCC

#FFFFFF

#666699

#CCFF66

#FFFFFF

#003366

#99CCFF

#FFFFFF

#336699

#CCCC33

#FFFFFF

#336699

#0099FF

#FFFFCC

#666699

#99CC33

#CCCCCC

#000000

#CCCCCC

#003366

#99CCFF

#0099CC

#CCFF66

#666666

#3399CC

#003366

#CCCCCC

#ABCDEF

Simple, fashionable and elegant

Gray is the most balanced color and is one of the main colors of plastic and metal textures. Therefore, it can be used appropriately or even in large areas to express elegance and fashion. But pay attention to the construction of patterns and textures.

#99CCFF

#FFFF66

#666666

#336666

#FFFFFF

#999999

#0099CC

#FFFFFF

#666666

#999999

#CCCCCC

#336666

#CCCCCC

#999999

#663366

#666666

#CCCCCC

#6699CC

#999999

#FFFFFF

#333366

#669999

#CCCCCC

#666666

#999999

#CCCCCC

#333333

#ABCDEF

Simple, progressive and fashionable

The colors that express progress are mainly blue, paired with gray. The brightness of the colors is unified and the hues are adjacent, and the colors will appear simple.

#333366

#99CC33

#336699

#999999

#003366

#669999

#003399

#CCFF99

#333333

#999933

#336699

#333333

#666666

#99CC33

#003366

#999999

#336699

#333333

#3366CC

#CCCC66

#333300

#6699CC

#006699

#000000

#003366

#CCCCCC

#006699

#000000

#999999

#003366

√ 已复制