What Colors Go with Brilliant Gold? Color Combinations That Give Vivid Yellow a Light, Lively Look [#E4F764]

Brilliant Gold (■#E4F764) is a bright, vivid yellow with a slight yellow-green cast. Here, “Gold” is the HueRoll color name rather than an attempt to reproduce metallic shine. In an invoice payment-management screen, it can work well when reserved for the selected invoice, the primary “Record payment” button, and short accents such as the due date. This keeps the vivid yellow feeling light and lively while payees, amounts, and deadlines remain easy to organize. This example pairs it with Ink Indigo, Warm Ivory, and Muted Teal.

Use Ink Indigo to anchor the yellow, then separate roles with ivory and teal

One practical palette for ■#E4F764 uses Ink Indigo ■#252A44 for the selected-invoice and primary-action panel, Warm Ivory ■#FCFAEE for invoice lists and detail cards, and Muted Teal ■#3D6662 for secondary actions such as viewing payment history or checking vendor information.

■#252A44 is a dark, low-saturation indigo with a slight blue-violet cast, creating a large lightness difference from the bright yellow. ■#FCFAEE is a very light warm ivory that keeps payee names, invoice numbers, amounts, and due dates visually light. ■#3D6662 is a restrained blue-green. Its hue—the basic color family such as red, blue, or green—is farther from yellow, helping distinguish secondary actions such as “View payment history” or “Vendor details” from the main payment-recording action.

In an invoice screen, concentrate Brilliant Gold on the selected invoice and primary action

Use ■#FCFAEE for invoice-list and detail-card backgrounds, with ■#252A44 for payee names, invoice numbers, amounts, due dates, and supporting text. The contrast ratio—the numerical difference in relative brightness between foreground and background—is about 13.43:1 for this pair.

Set the selected-invoice panel to ■#252A44 and use ■#E4F764 for the primary “Record payment” button, a short due-date accent, and the currently selected month. With ■#252A44 for the button text and icon, the contrast ratio is about 11.91:1, above the 4.5:1 minimum for normal-size text. The Gold button surface against the Indigo panel is also about 11.91:1, so the primary control can be clearly distinguished from the dark background.

For secondary actions such as “View payment history” or “Vendor details,” place ■#3D6662 buttons in a light ■#FCFAEE area and use ■#FFFFFF for their text. White against Muted Teal is about 6.41:1, and Muted Teal against Warm Ivory is about 6.12:1.

WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 contrast for normal-size text. Visual information needed to identify meaningful UI (user interface) components should have at least 3:1 contrast against adjacent colors.

For a light, lively look, avoid white text and color-only payment states

■#E4F764 against ■#FFFFFF has a contrast ratio of only about 1.18:1, so normal-size white text should not be placed on the Gold background. In this example, the primary button uses ■#252A44 for its text.

Also avoid communicating states such as “Unpaid,” “Processing,” or “Paid” by color alone. Pair color with a written status label, amount, payment date or due date, and an icon such as a check or clock. On the light ■#FCFAEE background, ■#E4F764 has only about 1.13:1 contrast, so do not rely on a thin yellow border or pale strip alone to indicate selection. In HueRoll, you can enter ■#E4F764 as a HEX code (a web color code beginning with #), review related colors and palette suggestions, and check the selected color against white and black. HueRoll does not compare arbitrary pairs of colors or automatically determine WCAG AA or AAA conformance, so the pairwise contrast ratios in this article were calculated separately.