What Colors Go with Champagne Gold? How to Create an Elegant Color Palette

Champagne gold is often used for a soft, pale direction of gold with a warm yellow cast. For this web example, we’ll use ■#C9B37E and pair it with deep navy ■#2F3C4D, warm ivory ■#FBF7EF, and muted plum ■#6C5A66. Keeping the lighter gold to controlled areas and using darker colors for text and boundaries helps preserve an elegant look while keeping the information structure clear.

Pair champagne gold with deep navy and warm ivory

■#C9B37E is a relatively light yellow-based color, so using similarly pale colors for text and headings can weaken the separation between roles. For body text and primary headings, use ■#2F3C4D. The contrast ratio (a measure of the relative brightness difference between foreground and background colors) is about 5.46:1 on champagne gold and about 10.48:1 on warm ivory ■#FBF7EF.

Using ■#FBF7EF instead of pure white keeps a warmer relationship with champagne gold. For a smaller accent, ■#6C5A66 adds a little variation to the warm palette. Plum text on the ivory background has a contrast ratio of about 5.97:1.

On a hotel spa page, use gold for menu bands and section dividers

For a hotel spa or wellness-plan page, set the overall page background to ■#FBF7EF and use ■#2F3C4D for treatment names and descriptions. The body-text pairing gives about 10.48:1.

Use ■#C9B37E for category bands such as “Body Treatment” or “Facial,” or for a price-summary panel, with ■#2F3C4D text. The ratio is about 5.46:1. This allows champagne gold to carry information as well as decoration while keeping normal-size text above the 4.5:1 minimum.

For a primary action such as “Book Now,” use ■#6C5A66 as the background with ■#FFFFFF text. The contrast ratio is about 6.38:1. Plum against ivory is also about 5.97:1, helping the button boundary remain distinct on the light page background.

WCAG (Web Content Accessibility Guidelines) 2.2 requires at least a 4.5:1 contrast ratio for normal-size text. Non-text information needed to identify controls or important boundaries uses a 3:1 minimum against adjacent colors.

For an elegant look, do not rely on pale surfaces or white text alone

■#C9B37E against ■#FBF7EF has a contrast ratio of about 1.92:1, and against ■#FFFFFF it is about 2.05:1. Avoid using white for normal-size text on champagne gold or relying on the difference between gold and ivory alone for an important boundary.

Muted plum ■#6C5A66 on champagne gold gives only about 3.11:1, below the 4.5:1 minimum for normal-size text. On gold surfaces, use ■#2F3C4D for text or borders, and reserve plum for the ivory background or button surfaces. In HueRoll, you can enter ■#C9B37E and review complementary and analogous colors, palette suggestions, and the selected color’s contrast with white and black. HueRoll does not compare arbitrary color pairs or automatically judge WCAG AA or AAA conformance, so the two-color ratios shown in this article were calculated separately.