Uwarp

Gold color

Gold is #FFD700. Copy the codes, shades, and contrast below.

Build shades

Codes

CSS keyword gold resolves to this hex.

  • HEX#FFD700
  • RGB255, 215, 0
  • HSL51, 100%, 50%
  • CMYK0, 16, 100, 0

Shades and tints

Ten steps toward black, then ten toward white. The outlined stop is #FFD700.

  • 1A1600

  • 332B00

  • 4D4100

  • 665600

  • 806C00

  • 998100

  • B39700

  • CCAC00

  • E6C200

  • Base

  • FFDB1A

  • FFDF33

  • FFE34D

  • FFE766

  • FFEB80

  • FFEF99

  • FFF3B3

  • FFF7CC

  • FFFBE6

Palettes from this hex

Hue rotations of #FFD700. Open the scheme generator to edit a set.

Open scheme generator

  • Complementary

    • #FFD900
    • #0026FF

  • Analogous

    • #FF5900
    • #FFD900
    • #A6FF00

  • Triadic

    • #FFD900
    • #00FFD9
    • #D900FF

  • Tetradic

    • #FFD900
    • #00FF59
    • #0026FF
    • #FF00A6

Contrast

Ratios use #FFD700 against white (#FFFFFF) and near-black (#161616). AA means 4.5:1 for body text.

Open contrast checker

  • On white

    1.40:1

    Fails AA

  • On near-black

    12.90:1

    AAA

  • White text on this color

    1.40:1

    Fails AA

  • Near-black text on this color

    12.90:1

    AAA

How to use gold

Gold as a web color is the CSS keyword gold, which is exactly #FFD700. That is a bright yellow with a full red channel and no blue. It is the color browsers paint when a stylesheet says gold. It is not a metallic finish. Screens do not reproduce metal flake, so this swatch is the flat yellow people mean by gold color and gold hex code in search.

#FFD700 fails as small text on white and fails as a background for white text. Treat it as a highlight: icons, rules, badges, and large numerals. For body copy, use near-black on the gold, or step down the shade ramp until the contrast panel passes AA. Designers who want a darker antique gold should not relabel #FFD700. Pick a middle shade and name that token separately. Complementary schemes from this hex swing toward blue, which is why gold and navy remain a durable pair for crests and dark UI chrome. Analogous steps stay in the yellow-orange band and sit next to coral.

Nearby colors

Frequently Asked Questions

Quick answers about this tool—open a question to read more.

Sources

Where this swatch and the CSS keyword note come from.