How to Build a Website with Two Colors | A Simple Color Scheme That Does Not Look Monotonous

Using only two colors on a website can make color roles easier to manage and help the whole page feel consistent. However, if one color is always the background and the other is always the text, the result can feel monotonous. The key is to reuse the same two colors for backgrounds, text, borders, and buttons, then create variety through inversion, area, spacing, and weight. Here, we build the page using only ivory ■#FFF8F0 and navy ■#1E3A5F.

Divide the two colors into a light background and a dark base color

Start by using light ivory ■#FFF8F0 across most of the page and dark navy ■#1E3A5F for body text, headings, links, buttons, and borders. The contrast ratio, a numerical measure of the relative lightness difference between foreground and background, between these two colors is about 10.92:1.

With navy ■#1E3A5F body text on ivory ■#FFF8F0, the pair comfortably exceeds the WCAG (Web Content Accessibility Guidelines) 4.5:1 minimum for normal-size text. Choosing two colors with a strong light-dark difference makes it easier to design both content and controls without adding more colors.

Create variety through inversion and area instead of adding colors

On a service page, normal sections can use an ivory background ■#FFF8F0 with navy text ■#1E3A5F. For an important pricing section or a band before the inquiry area, invert the pair: use navy ■#1E3A5F as the background and ivory ■#FFF8F0 for the text. This creates a large visual change without introducing a third color.

The CTA (Call to Action, the primary button that leads to an inquiry or sign-up) can also use the same inversion. On a light section, make the button navy ■#1E3A5F with ivory text ■#FFF8F0. Inside a dark section, reverse it to an ivory button ■#FFF8F0 with navy text ■#1E3A5F. The same two colors can still distinguish the primary action clearly.

If the page feels monotonous, change shape, borders, and spacing before adding a third color

If a two-color page feels too flat, you do not need to add an accent color immediately. Keep cards ivory ■#FFF8F0 and add navy borders ■#1E3A5F, underline links, increase heading weight, or create larger spacing between sections. These non-color differences can build hierarchy while preserving the two-color system.

Focus rings and input boundaries can also use navy ■#1E3A5F against ivory ■#FFF8F0, which provides about 10.92:1 contrast. That exceeds the WCAG non-text contrast threshold of 3:1 for visual information needed to identify certain UI components or states. Do not rely on color alone for selection or error states; combine it with text, icons, border shapes, or other visible cues.

HueRoll lets you choose a color and view values such as HEX and HSL, along with tints, shades, palette suggestions, and contrast against white and black. It does not compare two arbitrary custom colors or automatically report WCAG AA or AAA conformance. After choosing a two-color palette, check the actual text, background, button, and boundary color pairs separately.