Four-Color Web Design | How to Keep a Cohesive Look Even with More Colors

When a website uses four colors, the easiest way to keep the design cohesive is not to give all four equal visual strength, but to assign them fixed roles such as background, body text, primary color, and accent. In this article, neutral colors count as part of the four-color palette, so you do not need four equally vivid hues. We will build the page using only background ■#F8FAFC, body text ■#1F2937, primary blue ■#1D4ED8, and accent amber ■#F59E0B.

Give the four colors fixed roles: background, text, primary, and accent

Start by assigning light gray ■#F8FAFC to the background and charcoal ■#1F2937 to body text. These two colors handle most of the page, while the remaining two support branding and interaction. Use primary blue ■#1D4ED8 for headings, links, and focus indicators, and reserve amber ■#F59E0B for CTAs and important badges in small areas.

Body text ■#1F2937 against the background ■#F8FAFC has a contrast ratio, a numerical measure of the relative lightness difference between foreground and background, of about 14.03:1. Blue link text ■#1D4ED8 against the same background has a ratio of about 6.41:1, exceeding the 4.5:1 minimum for normal-size text.

Do not use the four colors evenly; create hierarchy through area

On a service page, let the background ■#F8FAFC occupy the largest area and use body text ■#1F2937 throughout the content. Keep primary blue ■#1D4ED8 for headings and links, then reserve accent amber ■#F59E0B for the main CTA. Even with four colors, using them at very different scales helps prevent the page from feeling visually scattered.

For the CTA (Call to Action, the primary button that leads to an inquiry or sign-up), use amber ■#F59E0B as the button background with charcoal text ■#1F2937. That pair has a contrast ratio of about 6.83:1. Instead of assuming a bright accent should use white text, choose the readable text color already present in the four-color palette. This allows the primary button to work without introducing white as a fifth color.

Before adding a fifth color, reuse the existing four more consistently

If every card, link, badge, and button gets a new color, a four-color system quickly turns into a much larger palette. First, reuse the same blue ■#1D4ED8 for related “navigation and interaction” roles such as headings, links, and focus rings. Keep amber ■#F59E0B for the highest-priority emphasis. A blue focus ring ■#1D4ED8 against the background ■#F8FAFC has about 6.41:1 contrast.

Do not use color as the only way to communicate selection or importance. Add underlines to links, heavier type or borders to selected states, and text labels to important badges. WCAG (Web Content Accessibility Guidelines) requires at least 4.5:1 contrast for normal-size text, and visual information needed to identify certain UI components or states needs at least 3:1 contrast against adjacent colors.

HueRoll can show palette suggestions, including 60–30–10 candidates, and it displays the selected color’s contrast against white and black. It does not compare two arbitrary custom colors or automatically report WCAG AA or AAA conformance. After choosing a four-color palette, check the actual adjacent pairs used for body text, links, CTAs, and focus indicators separately.