What Colors Go with Ivory? Gentle Color Scheme Examples

Ivory is commonly used for light colors that look like white with a slight yellow tint. On the Web, the CSS named color ivory is defined as ■#FFFFF0, although everyday uses of the word “ivory” can cover a wider range of shades. This article uses ■#FFFFF0 as the reference and shows how to keep a gentle overall look while giving text and buttons clear roles.

Pair ivory with deep neutrals and low-saturation colors

An ivory such as ■#FFFFF0 has high lightness—the perceived brightness of a color—so it works well across large background areas. However, if the surrounding colors are also white or very pale, the hierarchy between cards and text can become weak. Use a sufficiently dark warm charcoal ■#36322E for body text, and add pale sage gray ■#E6E8DB for supporting surfaces to create layers while keeping the overall palette bright.

For accents, low-saturation deep sage ■#435A49 or muted plum ■#66506B are useful options. Both create enough lightness difference from ivory to define links and buttons without adding several vivid colors.

Three gentle ivory color combinations

1. Create quiet contrast with warm charcoal and pale sage

Use ivory ■#FFFFF0 for the page background, pale sage gray ■#E6E8DB for cards or supporting sections, and warm charcoal ■#36322E for body text. The contrast ratio, which measures the relative brightness difference between foreground and background colors, is about 12.60:1 for warm charcoal on ivory and about 10.24:1 for warm charcoal on pale sage. This creates two light surface levels while keeping text to one consistent deep color.

2. Use deep sage for primary buttons and links

Use deep sage ■#435A49 for a primary button and white ■#FFFFFF for the button text. Their contrast ratio is about 7.51:1. Deep sage used as link text on ivory ■#FFFFF0 is about 7.44:1. The restrained green adds a natural change in hue while keeping interactive elements easy to distinguish.

3. Use muted plum as a small accent

Muted plum ■#66506B can work for short labels, campaign names, or secondary buttons when you want a slightly different hue within a gentle palette. Plum on ivory ■#FFFFF0 has a contrast ratio of about 7.12:1, while white ■#FFFFFF on the plum background is about 7.18:1. Rather than giving deep sage and plum equal visual weight, choose one as the main accent so the soft impression remains consistent.

Do not rely on the difference between ivory and white alone

Ivory ■#FFFFF0 and white ■#FFFFFF have a contrast ratio of about 1.01:1. Their hues differ slightly, but their brightness is almost the same, so important text or card separation should not rely on this difference alone. Deep sage ■#435A49 and muted plum ■#66506B also have a low contrast ratio of about 1.05: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 ivory ■#FFFFF0 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.