Commonly used colors in web pages

Web page designers commonly use colors to enhance the visual appeal of websites and to convey specific messages. Some common colors used in web design include:1. White: A clean and simple color often used as a background for websites.2. Black: A bold and dramatic color that can be used as a background or for text.3. Blue: A calming and trustworthy color often used for corporate and professional websites.4. Green: A natural and organic color often used for environmental or health-related websites.5. Red: A passionate and attention-grabbing color often used for sales and promotions.6. Yellow: A cheerful and optimistic color that can be used for call-to-action buttons.7. Orange: A friendly and energetic color often used for entertainment or food-related websites.8. Purple: A creative and mysterious color often used for artistic or spiritual websites.Of course, the choice of colors depends on the purpose and target audience of the website, as well as the designer’s personal preferences.

Web design is generally based on a single color. Each category below is based on that color, 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, passionate, 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

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

- has a happy, hopeful, wise and light personality, and 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 the cold and warm colors, it gives a feeling of harmony, tranquility, health and safety. It can create an elegant and comfortable atmosphere when paired with golden and light white.

#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

青绿色

#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 and most professional color. When mixed with white, it can create 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

#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

Color matching may seem complicated, but it is 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 will have a variety of feelings when matched at different angles on the color wheel. Therefore, in addition to listing the matching by hue, this book also lists the matching classification with impression as the focus for readers' reference.

Soft, bright, gentle

High-brightness colors will be matched together to get a soft, bright, and gentle feeling. In order to avoid glare, designers generally use low-brightness foreground colors for harmony, and the distance between colors on the color wheel also helps to 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, the colors adjacent to blue and green in the color wheel should be the most suitable. And the brightness is high. As you can see, almost every combination involves white. Of course, in actual design, you can use high-brightness colors with opposite hues of blue and green to replace 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 color matching characteristics of cute, happy, and interesting are uniform hue distribution, warm and cold matching, 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, interesting Compared with the previous impression, the color selection is more extensive, and the most important change is to replace pure white with low-saturation colors 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, brisk

Sports colors should enhance the feeling of intensity and excitement, while also reflecting health, happiness, and sunshine. Therefore, colors with high saturation and low brightness often appear in this type 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

Light, gorgeous, dynamic

The gorgeous impression requires the page to be full of colors and high saturation, and the appropriate reduction of brightness can enhance 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, abundant, dynamic

Low-brightness colors are indispensable in a 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

Purple and magenta are the main colors in feminine pages, and pink and green are also commonly used hues. Generally, they should be matched with high saturation.

#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 elegant feeling is very unique, and the color saturation is generally reduced. Generally, the brightness and saturation are adjusted to match the adjacent blue and red.

#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, stable

Noble generally uses low-brightness yellow-green, the color brightness is reduced, and attention is paid to the color balance, 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, natural

Green is the protagonist of calm and natural impressions, but as the main color of the page, green is easy to fall into the 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, graceful

Traditional content generally requires lower color saturation, especially brown is very suitable. As mentioned earlier, purple is also a common hue for elegant and graceful impressions.

#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, stable, classical

Traditional, stable, classical are all conservative impressions. The choice of color should try to use low-brightness warm colors. This combination conforms to 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, steady and tasteful

Colors with low brightness and saturation give people a sense of honesty and stability. In order to avoid the colors being too conservative and making the page rigid and negative, such a combination should focus on 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, and a large area of white is left. And the impression of progress can be achieved by using more blue, 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, stylish, elegant

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

#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, fashionable

The colors that represent progress are mainly blue, with gray. The colors have uniform brightness and adjacent hues, which makes them look simple in color.

#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