Skip to content
ColorPlum

Colors · value from the CSS Color Module Level 4 (W3C)

Gold color: hex code #FFD700, RGB and palettes

Gold is #FFD700 (RGB 255, 215, 0), a CSS named color: a bright, pure yellow, not a metallic finish. Black text reaches 14.97:1 on it; white text is only 1.40:1.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchGoldmedium, vivid yellow
HEX
#FFD700
RGB
rgb(255, 215, 0)
HSL
hsl(51, 100%, 50%)

Best text on it: black at 14.97:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Gold

  • HEX#FFD700
  • RGBrgb(255, 215, 0)
  • HSLhsl(51, 100%, 50%)
  • HSV51°, 100%, 100%
  • CMYK0%, 16%, 100%, 0%
  • Lablab(87.5% 2.9 86.6)
  • OKLCHoklch(88.7% 0.182 95.3)
  • Decimal16766720

Tints, shades and tones

From white to black in 10% steps, with Gold in the middle. Tap a code to copy it.

  1. 90%#FFFBE6
  2. 80%#FFF7CC
  3. 70%#FFF3B3
  4. 60%#FFEF99
  5. 50%#FFEB80
  6. 40%#FFE766
  7. 30%#FFE34D
  8. 20%#FFDF33
  9. 10%#FFDB1A
  10. Base#FFD700
  11. 10%#E6C200
  12. 20%#CCAC00
  13. 30%#B39700
  14. 40%#998100
  15. 50%#806C00
  16. 60%#665600
  17. 70%#4D4100
  18. 80%#332B00
  19. 90%#1A1600

Tones (mixed with gray)

  1. 10%#F2CE0D
  2. 20%#E6C61A
  3. 30%#D9BD26
  4. 40%#CCB433
  5. 50%#C0AC40
  6. 60%#B3A34D
  7. 70%#A69A5A
  8. 80%#999166
  9. 90%#8D8973

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #665600
  • #B39600
  • #FFD700
  • #FFE34D
  • #FFEF99

Gold in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Gold with its complement, its triad and its tint and shade
  • Gold
  • Triad #00FFD7
  • Triad #D700FF
  • Complement
  • 50% tint
  • 50% shade

Gold in use

New collectionAutumn edit

Card body text stays dark for reading; gold carries the header and the button.

Shop nowTag

Headline in Gold

A paragraph with a link in dark text, because this color is too light for text on white; use it for fills instead.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#FFD700
  • Protanopia (no red cones)#F0D300
  • Deuteranopia (no green cones)#FADF24
  • Tritanopia (no blue cones)#FFC4B7

Contrast and readability

PairingRatioWCAG 2.2
as text on white1.40:1AA AA large AAA
as text on black14.97:1AA AA large AAA
white text on it1.40:1AA AA large AAA
black text on it14.97:1AA AA large AAA
on your background1.22:1AA AA large AAA

Export

:root {
  --gold: #ffd700;
  --gold-rgb: 255 215 0;
  --gold-on: #000000;
}
On this page

In CSS, gold is the value #FFD700, and it is a bright yellow. That surprises people who expect the look of a ring or a medal. Metallic gold is not one color: it is a surface that shifts between dark brown, warm yellow and near-white highlights as light bounces off it. A single flat hex code can't hold all of that, so the CSS name stands for the yellow that suggests gold, not for the metal.

What the codes mean

In RGB, gold is 255, 215, 0: red at full strength, green at about 84%, and no blue. In HSL it is hue 51°, 100% saturation and 50% lightness. The CMYK estimate is 0%, 16%, 100%, 0%. Because blue is zero, the color is as pure as a screen yellow gets at that hue, and printers often struggle to hit it without a special ink.

The xkcd survey list gives a different "gold": #DBB40C, a duller, deeper mustard-like yellow that sits 10.8 away in OKLab distance. The nearest survey names to CSS gold are "sunflower yellow" (#FFDA03) and "dandelion" (#FEDF08), both under 2 away. In the CSS list, khaki (#F0E68C), 7.7 away, and yellow (#FFFF00), 9.9 away, are the neighbors. Yellow on its own is covered in the yellow gradients page.

Using gold well

  • Text on it: black measures 14.97:1. White text fails at 1.40:1.
  • As text: gold on white is the same 1.40:1, so it is only for large decoration. On black it works well, and on the 90% shade, #1A1600, it reads at 12.92:1.
  • Faking metal: a gradient from the 40% shade, #998100, through gold to the 40% tint, #FFE766, gives a convincing sheen. See the gradient generator to try it.
  • Pairings: black, deep red and navy suit it; see black and gold and red and gold palettes.

Worked example

You are preparing a slide for an end-of-year awards ceremony and want a trophy feel. Use a near-black background (#1A1600) with the winner's name in gold. That pair measures 12.92:1, so the text stays bold from the back of a hall. Add a thin horizontal rule that runs from the 40% shade to gold to the 40% tint as a gradient; it hints at brushed metal without needing an image. Keep any small caption text in white or the pale tint, never in the darker gold shades on the dark background, because their contrast is lower than the main gold.

Gold, yellow and mustard

Gold sits between pure yellow and mustard. It is warmer than #FFFF00 and brighter than the survey's #DBB40C. For metallic effects in print, designers use special foils or inks, and a flat swatch is only a stand-in.

Sources

  1. W3C, CSS Color Module Level 4: named colors and color conversions (checked 2026-11-10) w3.org
  2. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org