Color in CSS Design: Color Proportions

While color schemes provide guidelines on the colors to combine, they do not provide information on how much to use. Although there are no steadfast rules regarding this, there are common practices. A basic rule of thumb is the 60-30-10 rule, which is traditionally applied in interior design to produce professional quality color decoration for a space. In Web design, the space is the screen or page. The rule recommends that it should be filled in the following proportions:

  • 60% in the dominant color. This is the background, and typically used colors are light neutral colors (e.g., gray, black, and brown) or tints of a hue.
  • 30% in the subdominant (or secondary) color, which is typically a stronger color than the background.
  • 10% in the accent color, which is typically a vivid color and is commonly used to direct users’ attention to an important feature, such as a call-to-action button, for example, a “Register” button.

You may also encounter these three components being referred to by different names in Web design. For example, dominant color may be described as base or subdominant color, secondary color as dominant, and accent color as highlight, but the general concept of 60-30-10 still applies. However, the 60-30-10 proportion is not cast in stones; it can be varied slightly, as long as the 100% total is maintained. Examples include 65-25­10 and 60-29-11. More than three colors can also be used, again, as long as the 100% total is maintained. When more than three colors are used, it is usually by adding more secondary colors, in which case, the total space occupied should not be more than the 30% proportion for the secondary color. The tints, tones, or shades of the secondary color or other colors may be used, based on the relevant color scheme. The total number of colors is normally best kept at five plus/minus two colors, as too many colors can make it difficult for the user to build a mental picture of a page and understand how to interact with it. Consistency in the use of colors across pages, naturally, contributes to the building of a mental picture of a website.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *