Gold Color

About gold

#FFD700 is the CSS named color gold: a saturated yellow that leans slightly toward orange. It is the gold you get when you write color: gold in CSS, and it is the most widely used digital value for the name.

A screen cannot show real metal. What makes gold look metallic in a design is variation: highlights, shadows and reflections. Designers usually fake it with a gradient that runs from a light gold through a mid tone into a darker, browner gold such as darkgoldenrod (#B8860B). In print, true metallic gold needs a special metallic ink or foil; the CMYK values below only approximate the flat color.

#FFD700 is the value of the CSS named color gold, defined in the CSS Color specification and identical in every browser.

Other colors called gold

• Metallic gold #D4AF37A muted, less saturated gold often used to suggest real metal.Copy
• Goldenrod (CSS) #DAA520A deeper, more orange CSS named gold tone.Copy

Gold shades and tints

Shades mix gold with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with gold

Color harmonies based on the hue of #FFD700: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Gold contrast and readability

On a gold background, black text reads best (14.97:1). Here is how gold works as a text color:

Gold is very light, so gold text on a white background is hard to read. Use gold as a background or accent with dark text, or put gold text on navy, black or deep green, where it reads well and looks premium.

Using gold in CSS and HTML

:root {
  --color-gold: #FFD700;
}

.highlight {
  background-color: var(--color-gold);
}

.banner {
  background-color: gold;
  color: #000000;
}

.label {
  color: #FFD700;
  border: 2px solid rgb(255, 215, 0);
}

<p style="background-color: #FFD700; color: #000000;">
  Gold background
</p>