Gold color palettes

Where gold palettes work

• Hotel, restaurant, and event invitation pages
• Award badges, premium plan labels, and selected states
• Jewelry, watch, and spirits product pages
• Anniversary and celebration graphics

A flat swatch cannot look metallic

Half of the swatches in this collection are oranges and ambers, and most of the rest are yellows and reds. On its own, any one of them reads as mustard or ochre rather than gold. What makes gold read as metal is a value range: a dark brass, a mid tone, and a bright highlight next to each other.

The palette #61481c, #a47e3b, #bf9742, #e6b325 is that range in four steps. Run it as a gradient for a badge, a divider, or a large heading, and keep flat color for everything that has to be read at small sizes.

.gold-rule {
  height: 2px;
  background: linear-gradient(90deg, #61481c, #bf9742 40%, #e6b325 55%, #a47e3b);
}

.gold-heading {
  color: #bf9742; /* fallback */
  background: linear-gradient(180deg, #e6b325, #a47e3b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Gold on dark, gold on cream

On a dark base, gold works as a foreground color. The highlight #e6b325 on the palette's own brass #61481c is 4.42:1, just short of the 4.5:1 body-text minimum, so use it for headings 24px and up or for icons. On a navy from the collection, such as #2a1a5e, the yellow #fbe555 measures 11.68:1.

On a light base, the roles flip. In #faf8f1, #faeab1, #e5ba73, #c58940, the deepest gold #c58940 is only 2.81:1 on the cream, which is below even the 3:1 minimum for control borders. Use the golds as fills and add a dark bronze such as #7a4f12 (6.69:1 on #faf8f1) for text and outlines.

Common gold mistakes

• White text on gold buttons. White on #bf9742 is 2.72:1 and on #a47e3b 3.73:1. Dark text works: #2a1d0b on #e6b325 is 8.47:1.
• Gradient text without a fallback color. If background-clip: text is not supported, the heading disappears.
• Gold everywhere. Keep it to one region, such as a header rule, a badge, or the primary button.

Pairing the colors

Navy, plum, and near-black make gold look intentional; this collection pairs it with #2a1a5e, #42032c, and #411530. For a light layout, put gold on a cream such as #faf8f1 and add a dark bronze for text, so gold stays an accent.

Contrast and readability

Gold fills need dark text: black on #e6b325 is 10.84:1, white only 1.94:1. On deep navy, gold works as text: #e6b325 on #2a1a5e measures 7.70:1. Light golds on cream rarely reach 3:1, so do not use them alone for input borders or focus rings.

Questions

What is the hex code for gold?

The CSS named color gold is #ffd700, a bright yellow that rarely looks metallic. Design work tends to use darker ochres for gold, such as #bf9742 or #a47e3b, with a lighter highlight like #e6b325 beside them.

What colors go with gold?

Cool colors give gold the strongest contrast of hue. This collection pairs it with slate, as in #e7dec8, #cbaf87, #7e8a97, #30475e, and with teal, as in #16697a, #db6400, #ffa62b, #f8f1f1. Warm partners such as burgundy also work, but they read as one warm block, so add a cream neutral to separate them.