Do Teal and Gold Go Together? Color Scheme Examples with Swapped Backgrounds and Decorations

Do teal and gold go together? A deep blue-green and a warm golden yellow can complement each other when one fills a larger background and the other appears in smaller decorative details. But swapping those roles changes which text and button colors work. Here are two contrasting applications—a pottery exhibition page and a seasonal gift banner—using the same two key colors.

Teal and gold work together when their areas and roles are clearly separated

Teal describes a dark blue-green, while gold describes a yellow associated with the metal. CSS, the styling language that controls how web pages look, defines the named color teal as ■#008080 and gold as ■#FFD700. Those values are not the only shades you can use in a color scheme. For these examples, we choose a deeper teal ■#14565A and a softer gold ■#E3C36C. A HEX code is a hexadecimal notation used to specify an exact web color.

The contrast ratio—the difference in relative lightness—between these proposed shades is approximately 4.90:1. Small gold rules or a button can stand out on a deep teal background, while teal headings and borders can be distinguished against a gold background. A flat gold color will not reproduce the shine or reflections of real metal, so we treat it as a solid digital shade that suggests gold.

Two color schemes that swap backgrounds and decorations

A pottery exhibition page: gold decoration on a teal background

For the opening section of a page introducing ceramic works, use teal ■#14565A across the background and ivory ■#FFF9F0 for the exhibition heading and description. Text contrast is about 8.00:1. Add a short gold ■#E3C36C underline below the heading or a narrow decorative rule beside a photograph, creating approximately 4.90:1 contrast against the dark background. Keep the gold ornaments limited rather than repeating them under every line of text.

Surround the artwork photo with ivory ■#FFF9F0 so the photo has a light area separating it from the teal page. Use dark blue-gray ■#253239 for supporting text on that ivory area, which provides about 12.59:1 contrast. A “View exhibition details” button can use gold ■#E3C36C as its fill and teal ■#14565A for its lettering. Text-to-button contrast is about 4.90:1, and the same ratio separates the button from the surrounding teal.

A seasonal gift banner: teal decoration on a gold background

For a horizontal banner presenting a seasonal gift set, use gold ■#E3C36C across the main background and teal ■#14565A for the headline. The heading-to-background ratio is approximately 4.90:1. Teal decorative lines or a short frame around a corner of the banner can structure the composition without needing another color. Use dark blue-gray ■#253239 for longer supporting text, which contrasts with the gold background at about 7.71:1.

Put the release date and price inside an ivory ■#FFF9F0 information card with dark blue-gray ■#253239 lettering, giving about 12.59:1 text contrast. However, ivory and the gold background differ by only 1.63:1. If the card needs a clearly visible boundary, add a teal ■#14565A outline. This contrasts with the outer gold at about 4.90:1 and with the card interior at about 8.00:1. For the “View products” button, teal ■#14565A with white ■#FFFFFF lettering provides approximately 8.37:1 and makes the action distinct against gold.

Keep decorative details limited and check text contrast

Gold ■#E3C36C against white ■#FFFFFF contrasts by only about 1.71:1. White body text on that gold background would not have sufficient contrast. Choose teal or dark blue-gray lettering instead. Adding many fine gold lines to a teal layout also does not necessarily make important information easier to distinguish. Use ornamental rules sparingly, and add explicit labels or clear outlines where a line or visual state has an essential meaning.

Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text generally needs a contrast ratio of at least 4.5:1 and large text at least 3:1. Essential visual information identifying interface controls or meaningful graphics can also need 3:1 contrast against adjacent colors. HueRoll lets you enter HEX colors, explore related shades and palette suggestions, and check the selected color against white or black. It cannot compare arbitrary two-color pairs or automatically determine AA or AAA compliance, so test the final combinations separately.