Gold Color Code: HEX, RGB, CMYK, 16 Shades and Palettes

The gold color code is #FFD700, which is RGB 255, 215, 0. That bright, sunny value is the standard web gold. In CSS, you can also use the color name gold. If you want the warmer, richer tone people picture on jewelry or awards, use metallic gold #D4AF37 (RGB 212, 175, 55) instead.

This guide gives you the HEX, RGB, CMYK and HSL values for both golds, plus 16 named shades of gold. You’ll also find six gold color palettes and tips for using gold in Canva, Photoshop and CSS.

Color values come from the X11/CSS color list and the ISCC-NBS and Maerz and Paul color dictionaries. CMYK figures are simple conversions from RGB, so check them against a printed proof before a big print run.

Gold Color Code Values at a Glance

Most designers use one of these two golds. Web gold is brighter and leans yellow. Metallic gold is darker and slightly muted, so it reads as “real” gold on screen.

Which Gold Should You Use?

Pick the gold by the job it has to do:

• #FFD700 (web gold) works for bright accents, icons, star ratings and playful designs. It’s very light, so it needs a dark background.
• #D4AF37 (metallic gold) is the safest choice for logos, wedding invitations, certificates and luxury branding. It looks more expensive than web gold.
• #B8860B (dark goldenrod) or #996515 (golden brown) suit text, thin lines and anything that sits on white, because they have enough contrast.
• #EEE8AA (pale goldenrod) and #F7E7CE (champagne) make soft backgrounds that still feel gold.

A single flat color can’t show the shine of real metal. For a metallic effect, use a gradient (see below) or a texture.

Shades of Gold With Hex Codes

These 16 shades cover the whole gold family, from bright yellow golds to deep brown golds. Copy the hex code and paste it straight into your design tool.

Five of these are official CSS color names, so you can type the name instead of the code: gold, goldenrod, darkgoldenrod, palegoldenrod and lightgoldenrodyellow.

Gold Color Palettes (With Hex Codes)

Gold looks best next to deep, calm colors and soft neutrals. All six palettes use metallic gold or a close shade. Drop them into a brand kit, a wedding suite or a slide deck.

For more combinations in the same spirit, browse our luxury color palettes or the softer pastel color codes.

Gold and Beige Color Codes

Beige is one of the easiest partners for gold because both are warm. The standard beige color code is #F5F5DC (RGB 245, 245, 220), which is also the CSS color name beige. For a creamier look, try champagne #F7E7CE or cream #FFFDD0. Use beige as the background and gold for headings, borders and icons, then add golden brown #996515 for body text.

How to Make Gold Look Metallic

Real gold shines because light hits it unevenly. You can fake that shine with a gradient. Move from dark gold to bright gold, add a pale highlight, then finish on a deeper tone.

Here’s the same gradient as CSS. Paste it into a button, a heading background or a divider:

background: linear-gradient(135deg, #B8860B 0%, #FFD700 45%, #FFF3B0 55%, #D4AF37 70%, #996515 100%);

• In Canva: use a gradient element or a gold foil texture from Elements, then place your text or shape on top. Our Canva tips and tricks cover more styling shortcuts.
• In Photoshop: add a Gradient Overlay layer style and enter the five hex codes above as color stops.
• In print: no CMYK mix can reproduce true metal. For real shine, ask your printer about metallic ink or gold foil.

How to Use the Gold Color Code in Canva, Photoshop and CSS

1. Canva: select your text or shape, click the color tile on the toolbar, choose the plus icon to add a new color and paste #D4AF37 into the hex field.
2. Photoshop: click the foreground color swatch, type D4AF37 into the # field of the Color Picker and select OK.
3. CSS: write color: #D4AF37; for metallic gold or color: gold; for web gold.
4. Brand kits: save the hex code with its RGB and CMYK values so your website, social posts and printed items all match.

Make Sure Gold Text Is Readable

Gold is a light color, so gold text on a white page is hard to read. Accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text. Here’s how common gold pairings score:

The rule of thumb: put bright gold on dark backgrounds. On white or beige, switch to golden brown or dark goldenrod.

What Does the Color Gold Mean?

Gold is a warm color linked with wealth, success and celebration. That’s why it shows up on medals, trophies and premium packaging. It also has a long history in religious art and buildings, so it can feel traditional and formal. In branding, a little gold signals quality, while too much can look loud. Use it as an accent on about 10 percent of a design and let a dark or neutral color do the rest.

If you’re building a full brand palette, our guides to feminine colors, hot pink and turquoise include hex codes you can pair with gold.

Frequently Asked Questions