Skip to content

Gold #ffd700

Value, rendered in light.

RGB
255, 215, 0
HSL
51°, 100%, 50%
CMYK
0, 16, 100, 0
Luminance
0.6986

About Gold

Gold, #ffd700, is the color of the only metal humans have universally treasured — and the hex is honest about it: pure yellow warmed with a drop of red until it gleams. On screens gold is a performance: real gold’s luster comes from reflection, so digital gold lives or dies by its gradients.

History

From Tutankhamun’s mask to Byzantine mosaics to gilded manuscripts, gold leaf was how humans painted divinity and permanence. Heraldry named it “Or”; medals ranked it above all; the gold standard literally defined money for two centuries.

Psychology

Gold signals achievement, premium quality and scarcity — first place made visible. Overused, it tips instantly into gaudy: the difference between luxury and kitsch is usually the quantity of gold.

In design

Flat #ffd700 reads as yellow; convincing digital gold needs gradient (light #f9e79b through #d4af37 to shadowed #8a6d1a) or metallic texture. As an accent on navy, black or deep green it is unbeatable for premium cues. Gold text on white fails contrast — reserve it for dark grounds.

In culture

Golden ages, golden ratios, golden tickets, gold records: the metaphor for “best” in nearly every language. Fifty years of marriage earns it; every Olympics re-crowns it.

Brands that own gold

Shades of gold

Every format

HEX#ffd700
RGBrgb(255, 215, 0)
HSLhsl(51, 100%, 50%)
CMYKcmyk(0%, 16%, 100%, 0%)
LABlab(86.9 -1.9 87.1)
LCHlch(86.9 87.2 91.3)
OKLCHoklch(0.887 0.182 95.3)

Copy-ready code

/* CSS */
color: #ffd700;
background-color: #ffd700;
/* Tailwind (arbitrary) */
class="text-[#ffd700] bg-[#ffd700]"
/* SCSS */
$brand: #ffd700;
/* SwiftUI */
Color(red: 1.000, green: 0.843, blue: 0.000)
/* Android */
Color.parseColor("#ffd700")

Accessibility — WCAG contrast

Aa
#ffd700 on white: 1.40:1
AA ✗ fail · AA-large · AAA
Aa
#ffd700 on black: 14.97:1
AA ✓ pass · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red100.0%
Green84.3%
Blue0.0%

CMYK percentages

Cyan0.0%
Magenta15.7%
Yellow100.0%
Key (black)0.0%

Color previews

#ffd700 text on a black background

contrast 14.97:1

Card sample

#ffd700 text on a white background

contrast 1.40:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #ffd700;
Background color
Panel with #ffd700 background
background-color: #ffd700;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #ffd700;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(255, 215, 0, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(255, 215, 0, 0.45);
Border & gradient
Gradient panel
border: 3px solid #ffd700;
background: linear-gradient(135deg, #ffd700, #7DFF00);

Monochromatic scale

Palettes built from #ffd700

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Gold, answered

What is the hex code for gold?

CSS gold is #ffd700; metallic gold pigment is closer to #d4af37. Digital gold usually needs a gradient across both to read as metal.

Why does my gold look yellow on screen?

Real gold’s identity is reflective luster, which flat pixels can’t emit. Use a light-to-dark gradient (#f9e79b → #d4af37 → #8a6d1a) or subtle texture to fake the reflection.

What backgrounds suit gold accents?

Navy, black, charcoal and deep green — dark grounds let gold read as light. On white, gold text fails accessibility and loses its luster.

Work with #ffd700 in the Color Lab