DEV Community

Cover image for Color schemes in web design
Gabriel Valdivia
Gabriel Valdivia

Posted on

Color schemes in web design

What is a color scheme? A color scheme is simply a pairing of colors composed of primary colors, secondary colors, and accent colors. Usually, just 3 colors that when paired together work well. Let's discuss each of those in more detail.

The primary color is your main color, and it is used for large sections of continuous color. Secondary colors are used less frequently, and your accent color is used even less frequently. Think of the 60/30/10 rule. Your primary color is used 60% of the time, your secondary 30% of the time, and your accent color 10%. Think frequently, less frequently, and rarely.

Colors have meaning and are related to different industries. For example, blue is used in education and health care industries, while red is used in restaurants. Lastly, research indicates that color has an effect on our psychology. Make sure your website colors are relevant and have the right effect on visitors.

How color is misused? Common mistakes that most people make when choosing colors for your site are:

  • Using colors that don't pair well
  • Poor contrast
  • Glaring to look at
  • Colors clash with your logo's colors
  • Not having a consistent color scheme

Here's how you can improve. Pick colors that go well with your chosen field or industry. Make sure your colors match. Limit yourself to a primary color, a secondary color, and an accent color. You can of course use different hues when needed, but be consistent in your application of these colors. You can use an online service to select color pairings that go well together. Ensure the colors have sufficient contrast between your text, headings, links, and the background colors. Make sure your paragraph color matches your color scheme. I'm not saying use red or purple for your paragraph, but avoid plain black as your body font color - it's boring.

This short take on colors in web design is part of a series covering color, typography, visual hierarchy, use of white space, layout choices, and images in web design.

Cover Illustration: Doodles by Pablo Stanley

Top comments (0)