What Colors Go with White? Reliable Color Combinations and Pairing Examples [#FFFFFF]

On the Web, the CSS named color white is defined as ■#FFFFFF. White works well as a base that lets other colors stand out, but if a layout uses only near-white colors, boundaries can become difficult to see. On the other hand, adding too many dark colors can take away the lightness that makes white useful. This article shows how to keep white as the main background while giving body text, supporting surfaces, and buttons clearly separated roles.

Pair white with dark body text and restrained accent colors

Because ■#FFFFFF is extremely light, use a sufficiently dark color such as charcoal ■#27272A for body text. Soft gray ■#ECEBE7 can be used for cards or supporting sections to create a surface change against the white page background. However, because the difference between white and other pale colors is often small, important boundaries and text should still be reinforced with darker colors.

For accents, low-saturation deep green ■#35564A and terracotta ■#8A4E3B are useful options. Saturation describes how vivid or muted a color appears. Give deep green the primary action role and terracotta a secondary emphasis role so the layout can add color without losing large areas of white space.

Three reliable white color combinations

1. Keep white dominant and build hierarchy with charcoal and soft gray

Use white ■#FFFFFF for the page background, soft gray ■#ECEBE7 for cards, and charcoal ■#27272A for body text and headings. The contrast ratio, which measures the relative brightness difference between foreground and background colors, is about 14.89:1 for charcoal on white and about 12.49:1 for charcoal on soft gray. Keeping white as the largest area, dark text as the reading color, and pale gray as the supporting surface makes the roles easy to understand without adding many colors.

2. Use deep green for primary buttons and links

Use deep green ■#35564A for a primary button and white ■#FFFFFF for the button text. Their contrast ratio is about 8.14:1. Deep green used as link text on warm off-white ■#F5F3EF is about 7.34:1. Adding one natural accent color to a white-centered layout gives interactive elements a clear role without making the palette feel busy.

3. Use terracotta for secondary buttons or short labels

Terracotta ■#8A4E3B can be used for secondary buttons or short labels when you want a warmer accent on a white layout. Terracotta on white ■#FFFFFF has a contrast ratio of about 6.49:1, and on warm off-white ■#F5F3EF it is about 5.86:1. White text on a terracotta background is also about 6.49:1. Rather than giving deep green and terracotta equal visual weight, use them for primary and secondary roles respectively.

Do not rely on near-white differences alone, and do not place deep accents directly on each other

White ■#FFFFFF and warm off-white ■#F5F3EF have a contrast ratio of about 1.11:1, while white and soft gray ■#ECEBE7 are about 1.19:1. Important card or form-field boundaries should not rely only on these differences. Deep green ■#35564A and terracotta ■#8A4E3B also have a low contrast ratio of about 1.25:1, so they should not be placed directly against each other as normal-size text and background.

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text. In HueRoll, you can enter white ■#FFFFFF as a six-digit HEX code, a hexadecimal format used to represent Web colors, and review tints, shades, complementary colors, analogous colors, other palette suggestions, and contrast against white or black. HueRoll does not compare arbitrary color pairs or automatically determine WCAG AA or AAA conformance, so the pairwise contrast ratios in this article were calculated separately.