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.

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.

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.

Gold hex, RGB, HSL and OKLCH

#FFD700

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

9 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.

Gold color values

#FFD700rgb(255, 215, 0)

Color spaces of #ffd700
RGB	255	215	0
HSL	51°	100%	50%
HSV	51°	100%	100%
CMYK	0.00	0.16	1.00	0.00
XYZ	65.5445	69.8649	10.0330
Yxy	69.8649	0.4507	0.4804
CIE-Lab	86.9306	-1.9237	87.1320
Hunter Lab	83.5852	-6.3011	51.3929
OKLCH	88.7%	0.182	95.3°

#FFD700 is 255 red, 215 green and 0 blue. Its red channel carries the most of it. The nearest of the 216 web safe colors is #FFCC00.

CIE-Lab, XYZ and Yxy are measured against D65, the white point sRGB itself is defined against. Hunter Lab uses the original illuminant C constants, which is what paint and plastics specifications quote, so the two Lab rows are not directly comparable. CMYK is the plain arithmetic conversion: real ink values depend on the press, the paper and the profile.

Base numbers
Base	Red	Green	Blue
Binary	11111111	11010111	00000000
Octal	377	327	0
Decimal	255	215	0
Hex	FF	D7	00

#ffd700 mixed with black

Ten even steps of the classic shade ramp, worked out in RGB, which is how the term has always been defined and how other references list it. The OKLCH scale further down this page answers a different question: it steps by equal perceived amounts, so its values are not the same.

#FFD700
#E5C100
#CCAC00
#B29600
#998100
#7F6B00
#665600
#4C4000
#322A00
#191500
#000000

#ffd700 mixed with white

The tint ramp, by the same rule in the other direction.

#FFD700
#FFDB19
#FFDF33
#FFE34C
#FFE766
#FFEB7F
#FFEF99
#FFF3B2
#FFF7CC
#FFFBE5
#FFFFFF

Channel shares

Red54.3%
Green45.7%
Blue0.0%

Color schemes

Turned in OKLCH rather than HSL, so every member keeps the lightness and chroma of the original instead of one of them arriving washed out.

Complementary

#FFD700
#CFD8FF

Triadic

#FFD700
#91E9FF
#FFC4F1

Analogous

#FFD700
#BEEE59
#FFD0A2

Monochromatic

#7E6900
#A78C00
#D2B100
#FFD700
#FFF9E0
#FFF9E0
#FFF9E0

#ffd700 on black and on white

The quick brown fox jumps over the lazy dog. 14.97:1

The quick brown fox jumps over the lazy dog. 1.40:1

Body text needs 4.5:1 to meet AA and large text needs 3:1, so a ratio tells you which of the two backgrounds this color can be read on, and at what size.

CSS for #ffd700

color: #ffd700;
background-color: #ffd700;
border: 3px solid #ffd700;
box-shadow: 1px 1px 3px 2px #ffd700;
text-shadow: 4px 4px 2px rgba(255, 215, 0, 0.8);

/* Perceptually even, and what a modern stylesheet wants */
color: oklch(88.7% 0.182 95.3);

The OKLCH form is the same color stated so that lightening or darkening it moves by an amount the eye agrees with. Every current browser understands 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.

#E8D18E

#BFB78F

#9FA03B

#848426

#C0A271

#B9A457

#9D6F11

#829FBE

#946F31

#B18A16

#B5AC7B

#D4C784

#957E4D

#A1994B

#A8B37D

#B9C9AB

#A57533

#A99473

#D5A665

#DEC39C

#D0B06E

#CABC84

#A76B01

#A2A5F3

#9F7B4D

#B69257

#CDA866

#E1C17D

#D7BDA1

#C2A588

#B18E65

#AE710E

#A6802C

#BE9A49

#DBB362

#EAD19C

#E1C88F

#C4B56C

#A2A275

#8A8D61

#E1CDAE

#D1AB66

#A49544

#7E7B32

#DECFB2

#9E9460

#A97F3F

#768EE0

#DEC87F

#C2AB61

#A28F5A

#847642

#D4A95E

#907100

#E0B57E

#A9C0E1

#E4CF8B

#C5AF5C

#9D9164

#877123

#8B7D5C

#AE9023

#C0A750

#C5C194

#B09453

#BD9E47

#B48B3C

#B8D9FF

#8F7441

#A0986E

#AFC06A

#CBDEBC

#DEC77C

#B1AE76

#8A9464

#5E7E31

#988645

#9C924F

#AD8342

#D1D4F8

#E2C08D

#C3A97C

#A7934D

#828044

#E2C175

#D2C393

#887255

#A1B2FF

#8C6D4A

#AB8B63

#CCAA83

#EACCA4

#E2C593

#C8A97B

#A49170

#91754A