Gold color: hex codes, shades and palettes
Palettes built around gold. Click any swatch to copy its hex code.
The CSS keyword gold is #FFD700 — a bright, fully saturated yellow. It is worth knowing up front that this is not the color most people picture when they say gold: metallic gold is darker and browner, closer to #D4AF37, because real gold is a reflective surface rather than a flat color.
No gold palettes yet
Run npm run generate to build the dataset.
Gold hex, RGB, HSL and OKLCH
- HEX
#FFD700- RGB
rgb(255, 215, 0)- HSL
hsl(51, 100%, 50%)- OKLCH
oklch(88.7% 0.182 95.3)- On white
- 1.40:1
- On black
- 14.97:1
Shades of gold
Eleven steps from one base color, generated in OKLCH so each step is an equal perceived step rather than an equal numeric one. Click a swatch to copy it.
Named shades and close relatives
Why gold never looks metallic on screen
A flat hex value cannot be metallic. What the eye reads as metal is not a color but a behaviour: a bright specular highlight, a darker body, and a warm reflected bounce, all shifting as the surface moves. A single #FFD700 fill has none of that and reads as plain yellow.
The usual fix is a gradient rather than a fill — a light champagne through a mid metallic gold to a bronze shadow, banded rather than smooth. The gradient maker is the quickest way to try that; interpolating in OKLCH keeps the midpoint from going grey, which is exactly what kills a metallic effect.
Using gold in a palette
Gold reads as luxury only against depth. On white it is close to invisible and looks like a highlighter; against charcoal, deep navy, forest green or near-black it does the job it is hired for. That is a contrast fact as much as a taste one — the numbers below show how little separation gold has from a light background.
It pairs conventionally with black and white for formal work, with deep green or burgundy for warmth, and with cream or ivory when the goal is soft rather than opulent. Avoid pairing it with other saturated yellows or oranges, where it simply disappears.
Contrast and readability
Gold on white measures 1.40:1 and on black 14.97:1. WCAG AA asks for 4.5:1 on normal text and 3:1 on large text and UI components, so the higher of those two decides which background it belongs on. In the scale above, 500 is the first to clear 4.5:1 on white, at 5.30:1.
The contrast checker reports every level for a given pair and suggests the nearest passing shade on the same hue. The color picker builds this same scale from any color you paste in.
Gold color questions
- What is the hex code for gold?
- The CSS named color gold is #FFD700, rgb(255, 215, 0). For a metallic-looking gold most designers use something closer to #D4AF37, which is darker and less saturated.
- Why does my gold look yellow?
- Because a flat color cannot be metallic. Metal reads as metal through a highlight, a darker body and a warm bounce, not through hue. A banded gradient from champagne through gold to bronze is the usual substitute.
- What colors go with gold?
- Depth. Charcoal, near-black, deep navy, forest green and burgundy all give gold the contrast it needs. On white or pale backgrounds it loses separation and reads as highlighter yellow.
- What is rose gold?
- A copper-pink rather than a yellow — around #B76E79. It comes from gold alloyed with copper, and on screen it behaves like a muted pink, which is why it pairs with soft neutrals rather than with strong darks.
Related colors:bronze. See every shade on the colors index.