What Colors Go with Pale Gold? Combinations That Make Its Soft Yellow Tone Look Bright [#E9EDC9]

Pale Gold (in HEX, a web color code that begins with #, ■#E9EDC9) is a light, pale color with a yellow cast. On a pricing-plan comparison page, limiting it to a plan marked “Recommended,” the selected annual-billing option, and the main signup button can keep the soft yellow tone as the focal color while maintaining a bright interface. This example pairs it with olive charcoal, warm white, and slate blue.

Anchor the text with olive charcoal and separate supporting actions with blue

With ■#E9EDC9, one option is ■#4A4C2F, called olive charcoal here, for headings and body text; warm white ■#FCFBF4 for the page background; and ■#4F5F7D, called slate blue here, for secondary actions such as opening a detailed comparison.

■#4A4C2F is a dark yellow-green color. It stays relatively close to Pale Gold in hue (the basic family of color, such as red, yellow, or green) while creating a much larger lightness difference. ■#FCFBF4 is nearly white with a slight warm cast, so it can cover the wide area behind several pricing cards without competing strongly with the pale yellow. ■#4F5F7D is a subdued blue that can separate secondary actions such as “Compare features” or “View details” from the primary action highlighted with the pale yellow tone.

Use Pale Gold for the recommended plan and primary action

Set the page background and regular pricing cards to ■#FCFBF4, and use ■#4A4C2F for plan names, prices, and feature descriptions. The contrast ratio (a measure of the relative brightness difference between foreground and background colors) is about 8.56:1.

For the heading band of a plan the site labels “Recommended,” the selected annual-billing option, and the main “Start with this plan” button, use ■#E9EDC9 as the background with ■#4A4C2F for text and icons. The contrast ratio is about 7.36:1, above the 4.5:1 minimum for normal-size text.

However, ■#E9EDC9 against ■#FCFBF4 is only about 1.16:1. Pale fills alone therefore do not make a recommended card or selected billing option easy to distinguish. Add a ■#4A4C2F border, a “Recommended” or “Selected” label, and a check icon. That border against the page background has a contrast ratio of about 8.56:1.

For a secondary button such as “Compare features,” use ■#4F5F7D as the background with ■#FFFFFF text. The contrast ratio is about 6.43:1. The difference between ■#4F5F7D and ■#FCFBF4 is also about 6.20:1, helping the primary and secondary actions remain distinct.

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text. For visual information required to identify UI (user interface) components and states, the non-text contrast criterion uses a 3:1 minimum against adjacent colors.

For a bright look, do not communicate recommendations or selected states with pale yellow alone

■#E9EDC9 against ■#FFFFFF has a contrast ratio of about 1.21:1. Normal-size white text on a Pale Gold background therefore does not reach 4.5:1. In this example, the primary button uses ■#4A4C2F for its text instead.

Also avoid communicating states such as “Recommended,” “Selected,” or “Subscribed” by color alone. Pair color with text, borders, and check icons. Rather than covering the entire page with Pale Gold, reserve it for the plan or action you want to emphasize, and leave generous ■#FCFBF4 space around those elements. This helps keep the interface bright while the soft yellow tone remains the main color. In HueRoll, you can enter ■#E9EDC9 and review related colors, palette suggestions, and the selected color’s contrast with white and black. HueRoll does not compare any two arbitrary colors or automatically judge WCAG AA or AAA conformance, so the two-color ratios shown in this article were calculated separately.