How Do You Decide Color Proportions in Web Design? A Color Scheme Method Based on Area
Once you have selected colors for a website, the next question is how much space each color should occupy. Color proportions describe the approximate areas covered by backgrounds, panels, buttons, and other filled surfaces; they do not describe how pigments are mixed. The 60–30–10 approach is one familiar starting point, but every website does not have to match it. Using a fictional museum exhibition page, this article explains how to assign roles to colors, test an initial area ratio, and adjust it for the content.
Decide Color Proportions Based on Function and Content
Begin with a base color, which covers broad background areas; a supporting color, which groups practical information such as opening hours and location; and an accent color, which draws attention to an action such as a booking button. For an exhibition page that visitors should read at their own pace, you might start with the main reading background as the largest area, a smaller supporting panel, and a compact action color.
As a design starting point, try 80% base, 15% supporting surface, and 5% accent. These figures are neither a web standard nor measurements that must be followed precisely. A photo-heavy website and an information-heavy page can need different allocations. The 60–30–10 approach is likewise another guide to color roles, not a compulsory formula.
For this first estimate, compare only the areas filled by backgrounds, panels, and buttons. Do not force the thin shapes of letters or the many colors inside a photograph into the same percentage calculation. Decide what visitors need to read and which action they need to take before refining the figures.
Try an 80:15:5 Color Scheme for a Museum Exhibition Page
The examples use HEX color codes, written with a hash sign followed by six hexadecimal characters from 0–9 and A–F. A contrast ratio describes the relative luminance difference between text and its background or between other adjacent colors.
Start by Allocating 80% to the Base and 15% to Supporting Information
- Base, approximately 80%: use warm ivory #F7F4ED for the page and exhibition introduction. Set the body text in deep blue-gray #263845. Their contrast ratio is approximately 11.03:1.
- Supporting surface, approximately 15%: group the opening hours, venue, and directions on pale sage green #DDECE6. Use the same deep blue-gray text #263845, which gives approximately 9.93:1 contrast.
- Headings: use deep green #185E50. It has approximately 6.94:1 contrast against ivory #F7F4ED and 6.25:1 against pale sage green #DDECE6. Treat the relatively small area occupied by heading letters separately from the 80:15:5 background-fill estimate.
The two background colors—ivory #F7F4ED and pale sage green #DDECE6—have a contrast ratio of only approximately 1.11:1. Their difference alone may not clearly define the panel. Add a heading such as “Opening Hours and Directions” and enough space around the group so its purpose remains clear.
Reserve the Remaining 5% for Booking Actions
Give the “Book a Visit” button a deep green #185E50 background with white #FFFFFF text. The text-to-button contrast ratio is approximately 7.62:1. The dark button contrasts with the surrounding ivory #F7F4ED at approximately 6.94:1, or with pale sage green #DDECE6 at approximately 6.25:1 if the button is placed in the supporting panel.
The 5% figure does not mean sizing a button to occupy exactly 5% of the screen. Make it large enough to use comfortably first. Think of the percentage as a reminder not to spread the same strong filled color across unnecessary decorations and background sections.
Estimate Visible Areas and Rebalance for Desktop and Mobile
Choose a specific part of the page to compare, such as the first visible screen. Estimate the space occupied by the base, supporting panels, and buttons by treating their filled regions as rough rectangles, or simply compare screenshots of two layouts. Record photographic areas separately. Do not present an illustrative 80:15:5 split as if it were a measured result.
For example, if the exhibition page must also provide accessibility information and detailed transportation guidance, a supporting panel occupying only 15% may feel cramped. Compare an alternative of 70% base, 25% supporting surface, and 5% accent. If too many headings or decorative blocks are filled with strong green, reduce the accent area instead. Prioritize whether people can read the exhibition introduction, find the opening hours, and reach the booking action over maintaining an exact percentage.
On mobile screens, panels stack vertically, so the proportions visible at any one moment can change. There is no need to reproduce desktop percentages exactly. Under Level AA of WCAG (Web Content Accessibility Guidelines), normal-sized text generally needs at least a 4.5:1 contrast ratio with its background, and large text needs at least 3:1. Essential visual shapes of interface controls can also require 3:1 contrast against adjacent colors. The ratios above were calculated for solid, opaque color pairs. Check text over photographs and interactive button states separately in the finished layout.