Gold Color Hex Code: #FFD700, Metallic Gold and 13 Shades (2026)

The gold color hex code is #FFD700, which is RGB 255, 215, 0 and CMYK 0, 16, 100, 0. That is the value browsers use for the CSS color name gold. If you want a richer gold that looks closer to the real metal, use metallic gold #D4AF37 (RGB 212, 175, 55). This guide lists the main gold shades with hex, RGB and CMYK values, then shows how to build a metallic effect and how to prompt gold in AI images. All figures are as of 5 November 2026.

What is the hex code for gold?

Two codes answer this question, and they look quite different. #FFD700 is the bright yellow gold from the CSS standard. #D4AF37 is the darker, browner gold that most designers mean when they say "metallic gold". Wikipedia's gold color article lists both and notes that the web color is sometimes called "golden" to keep the two apart.

The hex codes come from MDN's named color list, Wikipedia and Made Good Designs' shades of gold list. We calculated the RGB, CMYK and HSL values directly from each hex code. Hex codes are not case sensitive, so #ffd700 and #FFD700 are the same color.

Which gold codes work as CSS color names?

Only a few gold tones have an official name that you can type instead of a hex code. MDN lists these:

"Metallic gold", "old gold" and "rose gold" are not CSS names. Writing color: metallicgold does nothing, so use the hex code for those.

What is the difference between #FFD700 and #D4AF37?

#FFD700 is a fully saturated yellow with a slight orange lean. It has no blue at all, which is why it looks like a highlighter on a white page. #D4AF37 has less red and green and some blue, so it is duller and darker, and it sits closer to how polished metal looks in a photo.

Here is a simple way to choose:

• Use #FFD700 for small accents on dark backgrounds, star ratings, game interfaces and playful designs.
• Use #D4AF37 for premium branding, invitations, awards and anything that should feel expensive.
• Use #B8860B when gold has to work on a light background, because it is the darkest of the CSS gold names.
• Use #F7E7CE as a soft background tint that pairs with any of the above.

Why does a gold hex code look flat or mustard yellow?

Because real gold is not one color. Wikipedia explains that metallic gold cannot be reproduced by a simple solid color, since its shine comes from brightness changing with the surface's angle to the light. Made Good Designs makes the same point: a single flat hex tends to read as mustard yellow rather than metal.

So the hex code is only the base. The metal look comes from contrast between dark and light tones next to each other. That is what the next section builds.

How do you make a metallic gold effect?

Use a gradient that runs from a dark tone to a pale highlight and back again. Our starting set of stops is below. The shadow and highlight values are our own picks, not a standard, so adjust them to taste.

How do you make a gold gradient in CSS?

Follow these steps:

1. Start with a linear-gradient at about 135 degrees, so the light appears to fall diagonally.
2. Place the dark tones at the edges and the highlight near the middle.
3. Space the stops unevenly. Real reflections are not symmetrical, and even spacing looks like a plastic button.
4. Check it at the real size. A gradient that looks good on a large panel can turn muddy on small text.

cssCopy
.gold-panel {
  background: linear-gradient(135deg,
    #5C4310 0%,
    #D4AF37 28%,
    #FFF3B0 44%,
    #D4AF37 58%,
    #8A6D1D 82%,
    #D4AF37 100%);
}

How do you make gold gradient text in CSS?

Apply the same gradient, then clip it to the letters. MDN's background-clip page notes that the effect barely shows if the text is opaque, so the text color has to be transparent.

cssCopy
.gold-text {
  background: linear-gradient(135deg, #8A6D1D, #FFF3B0 45%, #D4AF37 70%, #8A6D1D);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

MDN also advises checking contrast when you use this effect and testing for support with @supports. Keep a solid gold as the fallback color, so the text stays readable if clipping is not available.

How do you get metallic gold in Figma, Canva or Photoshop?

The same recipe works in any design tool. Add a linear gradient fill, enter the four stops from the table, then drag the highlight off-center. For large text or a logo, a thin darker outline such as #5C4310 helps the letters hold their edge.

Is gold text readable on white?

Mostly no. We calculated the contrast ratio for each main gold against white, black and a dark navy (#0B1F3A). WCAG 2.1 asks for at least 4.5:1 for normal text and 3:1 for large text.

Three things follow from these numbers:

• Bright gold on white fails for all text sizes. Use it for shapes and lines, not for words.
• #B8860B on white is fine for large headings only, at 3.25:1.
• Golden brown #996515 is the only color here that passes for normal text on white, and it no longer looks very gold.

If you want gold words, a dark background is the easy answer. Every gold above except #996515 passes on black and on navy.

What colors go well with gold?

Gold looks richest beside very dark or very quiet colors. These three pairings are simple starting points.

For the ivory palette, use #5C4310 for body text and keep #B8860B for large headings and rules, because #B8860B is too light for small text on a pale background. If you are working on a softer theme, our pastel colors hex codes guide covers the lighter end of the range.

Which gold color code should you use for print?

The CMYK values in this article are plain math from the hex code, so treat them as a starting point rather than a press-ready spec. Print can't show every color a screen can, and a bright screen gold such as #FFD700 often comes out flatter on paper.

Ink can't shine the way the metal does either. If you need real metallic gold on a printed piece, ask your printer about metallic ink or gold foil and get a physical proof before the full run.

How do you prompt gold in AI images?

Image models respond better to material and lighting words than to hex codes. A model may not hit an exact hex, so describe the metal first and add the code only as a hint. These parts make the biggest difference:

• Name the finish: polished, brushed, hammered, satin, antique or gold leaf.
• Name the light: a softbox, warm rim light or low sun gives the metal something to reflect.
• Name the surroundings: a dark background makes gold stand out, and metal only looks like metal when it has something to reflect.
• Name the tone: warm yellow gold, pale champagne gold or pink rose gold.

Try these prompts in the AI image generator:

1. Logo: "Minimal lion head logo in polished gold on a matte black background, soft studio light, clean edges, centered."
2. Text: "The word AURUM in tall serif letters made of brushed gold, deep navy background, warm rim light, sharp reflections along the edges."
3. Product shot: "Hammered gold perfume cap on a black marble slab, single softbox from the left, shallow depth of field, dark background."
4. Texture: "Seamless gold leaf texture, slightly crumpled, warm light, fine creases, top-down view."
5. Poster: "Art deco gala poster, gold geometric sunburst on deep navy, metallic foil look, symmetrical layout, room for a title at the top."

For a logo, the AI logo generator is the quicker route, and the AI poster generator suits event work. If you already have a picture and want a colored object to turn gold, recolor the image instead of starting over.

Which Kenerate model should you use for gold images?

The right pick depends on what is in the image. Credit prices below come from our model list as of 5 November 2026.

More prompt patterns are in our Nano Banana prompts collection.

Quick reference

• Plain gold: #FFD700
• Metallic gold: #D4AF37
• Gold for light backgrounds: #B8860B
• Soft gold tint: #F7E7CE
• Metal effect: a gradient from #5C4310 through #D4AF37 to #FFF3B0