Here, common color combinations in web design are categorized by hue. Each category is dominated by the primary hue, combined with other hues or shades, using contrast and harmony techniques, and sorted from light and cheerful to intense.
Red
Orange
Yellow
yellow-green
green
Teal
blue
Lavender blue
Purple
Purple-red
Categorize by impression-matching combinations
Color matching may seem complex but is not mysterious. Since each color has its own position in the impression space, the impression from color matching can be roughly estimated using addition and subtraction. If all colors are highly saturated, their combination will naturally be soft and bright; if they are intense, the blend will be intense. Of course, in the actual design process, designers must also consider multiplication and division, like colors with the same brightness and contrast but different angles on the color wheel, which can create
Gentle, bright, tender
High-intensity colors mixed together create a soft, bright, and gentle feeling. To avoid dazzling, designers usually use low-luminance foreground hues, and the distance between colors on the color wheel also helps prevent dullness.
Gentle, clean, brisk
For a soft, clean, and refreshing impression, colors adjacent from blue to green in the color wheel should be most suitable, with a higher brightness. As you can see, white is involved in almost every combination. Of course, in actual design, one could substitute a high-brightness colored opposite to white for blue-green.
cute - happy - funny
The color combination in cute, happy, and interesting images is characterized by even color distribution, balanced warmth and coldness, high saturation, and high color resolution.
active, happy, amusing
Vivacious, happy, and fun, compared to the previous impression, the color choices are more diverse. The most significant change is replacing pure white with low saturation colored or gray tones.
Active and brisk
To enhance the intense and stimulating feel of exercise, while embodying health, happiness, and sunshine, colors with high saturation and low brightness often appear in such impressions.
Light, elegant, dynamic
Luxurious impression demands a colorful page with high saturation, while moderate brightness reduction enhances this impression.
Wild, abundant, dynamic
The wild impression space can't do without low-light colors, even with appropriate black to complement. Others have high saturation in colorful shades, with strong contrasts.
gorgeous, flamboyant, feminine
Purple and fuchsia are the stars in the feminine pages, with pink and green also common hues. They often pair with high saturation.
nostalgic, feminine, elegant
The elegance feels peculiar; usually, the saturation of colors should be lowered. Generally, blend between blue and red by adjusting brightness and saturation.
Noble, natural, stable
Subdued yellow-green is often used for elegance; lower brightness creates a balanced look, giving the page a stable appearance.
Calm and natural.
Green is the protagonist of calm and natural impressions, but as the main color of a page, it can easily convey overly negative feelings. Therefore, special attention should be paid to the design of patterns.
Traditional, elegant, graceful
Traditional content often requires desaturation of colors, especially brown is suitable. The purple mentioned earlier is also a commonly used hue for impressions of elegance and sophistication.
Traditional, stable, classical
Traditional, stable, and classical convey conservative impressions. When choosing colors, opt for low-saturation warm tones, which align with mature aesthetics.
Faithful, steady, and tasteful.
Low brightness and saturation colors give a sense of honesty and stability. To avoid the color scheme being too conservative, making the page rigid and negative, attention should be paid to the combination of warm and cold colors and the contrast of light and dark.
Simple, clean, progressive.
Simple and clean colors can be expressed in hues of blue and green, with large areas of white. Advanced impression can utilize more blue, paired with low saturation or even grey.
Simple, stylish, elegant.
Grey is the most balanced color, and one of the main colors for plastic and metal textures. Thus, to convey elegance and fashion, it can be appropriately and even extensively used. However, attention should be given to pattern and texture construction.
Simple, progressive, fashionable.
The dominant color for showing progress is mainly blue, paired with grey. Uniform brightness and adjacent hues create a simple color scheme.