Gold Background
#FFD700 · rgb(255, 215, 0)
About the gold background
Gold (#FFD700) is yellow enriched with a drop of orange — rgb(255, 215, 0) — and instantly reads as 'the precious metal'. It carries luxury, achievement and celebration: medals, trophies, premium packaging.
As a background it's bright and attention-drawing; the classic pairing is black or deep purple text (around 15:1 and 6.7:1 respectively), evoking everything from award ceremonies to Art Deco posters.
What to use a gold background for
- Premium packaging and luxury branding
- Awards, achievements and gamification badges
- Art Deco and vintage poster design
- Celebration and festive seasonal campaigns
How to use gold in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page gold background */
body {
margin: 0;
background-color: #FFD700;
}
/* A single section or element */
.hero {
background-color: rgb(255, 215, 0);
} Gold shades and tints
Click any swatch to copy it. Tints mix gold with white; shades mix it with black.
Gold background FAQ
What is the hex code for gold?
The CSS keyword `gold` is #FFD700 — rgb(255, 215, 0). Despite the name it's a bright yellow-gold; for darker 'old gold' tones look around #B8860B.
How do I make a gold gradient?
Layer gold #FFD700 between a lighter champagne tint and a darker bronze shade (for example #FFF3B0 → #FFD700 → #B8860B) — the light-to-dark sweep is what sells the metallic effect.
What is the hex code for gold?
Gold is #FFD700 in hexadecimal, rgb(255, 215, 0) in RGB and hsl(51, 100%, 50%) in HSL. Paste #FFD700 into any CSS background-color property to use it.
How do I set a gold background in CSS?
Add background-color: #FFD700; to any element, or apply it to the whole page: body { background-color: #FFD700; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(255, 215, 0) — with identical results.