Skip to main content

Gold

Everything you need to know about gold to inspire your next design.

Pick a palette type

What color is gold?

Hex code #EFBF04 represents a bright gold, capturing the essence of luxury and grandeur. This dynamic yellow hue resembles real gold and is frequently used in design to denote wealth, luxury, and prestige. Its vivid character creates elegant and impactful visual statements.

gold colorgold color

What does gold look like on digital screens?

Gold is defined by the following color codes and values to ensure consistency across various digital platforms and devices.

- HEX code: #EFBF04

- RGB value: 93.7% red, 74.9% green and 1.6% blue

Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.

How should I effectively use gold in UI design?

Here are some actionable tips for using gold effectively in UI design:

  • Highlight value. A touch of gold can elevate a design and draw attention to important elements like CTAs or premium features in an app or website. Consider using a gold button to signal the importance and exclusivity of special offers or premium subscription options.
  • Lean into luxury. Gold is a natural fit for luxury brands, conveying a sense of exclusivity and high quality. Think of high-end jewelry stores or premium watchmakers often using gold accents in their logos or website designs.
  • Exercise restraint. Too much gold can be overwhelming. Use it sparingly as an accent color, or pair it with neutral colors (like white, black, or gray) for a balanced and sophisticated look.
  • Select the right hue. Gold varies in shade from bright yellow to deeper tones. Choose a hue that aligns with your color scheme and desired ambiance. Brighter golds like #EFBF04 are modern and energetic, while deeper golds suggest tradition and elegance.
  • Assess context. A touch of bright gold might be appropriate for a youthful brand, while a more established brand might opt for a more muted gold tone.
  • Think beyond flat design. While flat design is timeless, adding a metallic texture, even subtly, can elevate the tactile feel of your design. If it aligns with your design goals, applying a metallic effect to buttons or logos can add a dimensional quality to flat visuals.

Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.

What are similar colors to gold?

For variations within the same radiant and opulent spectrum as gold, consider:

  • Amber (#FFBF00) offers a slightly lighter and brighter hue while still embodying the warmth and richness of gold.
  • Mustard yellow (#FFDB58) introduces a more subdued tone, providing a softer alternative with the same golden warmth.
  • Goldenrod (#DAA520) is deeper and more subdued, capturing the essence of gold with a hint of earthiness.
  • Saffron (#F4C430) stands out with a vibrant, almost fluorescent quality that shares gold’s luminosity and allure.

What colors go with gold?

To complement gold's luxurious tones, consider pairing it with:

  • Navy blue (#000080) contrasts sharply, enhancing gold’s brightness and creating a regal look.
  • Dark green (#006400) echoes the luxury of gold, reminiscent of classic elegance and historical wealth.
  • Burgundy (#660033) enriches the palette with a deep, sophisticated tone, offering a timeless combination.
  • Charcoal gray (#4A4A4A) offers a neutral backdrop that makes gold pop, balancing the overall design.
  • White (#FFFFFF) creates a crisp, clean contrast, highlighting gold's warmth and radiance.

Other colors worth considering include deep purple for a royal ambiance, soft pink for a gentle, feminine touch, and turquoise for a vibrant, contemporary look.

What colors conflict with gold?

While gold is versatile, it may clash with:

  • Lime green (#89F336) can be too bright and overpowering next to the refined elegance of gold.
  • Bright red (#FF0000) competes for attention, creating a visually jarring combination without harmony.
  • Teal (#069494) can diminish gold's warmth through its cool undertones.
  • Neon pink (#FF007F) might overshadow gold with its intense vibrancy, leading to a discordant aesthetic.
  • Light gray (#D3D3D3) can appear washed out next to gold, failing to complement its richness.

What does gold symbolize?

Gold symbolizes wealth, prosperity, and status, reminiscent of the sun's radiant energy and celestial significance. Historically, gold adorned royalty, religious artifacts, and sacred spaces, symbolizing luxury, divinity, and immortality. It continues to signify success, achievement, and the highest standard, as reflected in the symbolism of the Olympic Gold medal.

In color psychology, gold evokes warmth, optimism, confidence, success, wisdom, and enlightenment, enriching experiences with its bright and uplifting presence.

Gold should be strategic in UI design due to its powerful symbolism and visual impact. Gold can enhance elements like buttons or icons when used as an accent, giving a touch of luxury and importance. It's particularly effective in designs targeting luxury markets or premium services, where it reinforces the notion of exclusivity and high value. However, overuse can overwhelm and detract from the user experience.

What’s the history of gold?

Some of the earliest evidence of gold use comes from around 4000 BC. Eastern European cultures, likely drawn to its natural beauty and luster, fashioned it into decorative objects. By 3000 BC, civilizations like the Sumerians in Mesopotamia had mastered the art of goldworking. They used gold to create intricate jewelry, often showcasing surprisingly sophisticated styles that inspire designers today.

Throughout history, gold's rarity and beauty have made it a prized possession. In ancient Egypt, it was associated with the sun god Ra and adorned pharaohs and religious objects to symbolize wealth, divinity, and immortality. Other civilizations, from the Greeks and Romans to the Incas and Aztecs, used gold to signify power, status, and importance.

The allure of gold has fueled exploration and conquest throughout history. The Spanish conquistadors' pursuit of El Dorado, the mythical city of gold, is a famous example. Gold rushes in various parts of the world, like California in the 1840s, highlight human fascination with this precious metal.

Gold became a valuable commodity in international trade for currency and backing other forms of money. This role continued for centuries, though the modern world has shifted mainly to fiat currencies. Despite its changing financial role, gold remains a valuable metal prized for its beauty, versatility, and symbolic meaning.

Color variations

Shades

Tints

Tones

Hues

Color Harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom Palettes

24 Karat

Crown Jewels

Marigold

Accessibility: Contrast Checker

Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #EFBF04 text on a #FFFFFF background.

1.73:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1
Fail
AAA
7:1

Large Text

Fail
AA
3:1
Fail
AAA
4.5:1
Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #EFBF04 text on a #000000 background.

12.12:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1
Pass
AAA
7:1

Large Text

Pass
AA
3:1
Pass
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #EFBF04, known as gold, has RGB values of R:239, G:191, B:4 and C:0, M:0.2, Y:0.98, K:0.06.

VALUECSS
HEXEFBF04#EFBF04
RGB DECIMAL239, 191, 4rgb(239,191,4)
RGB PERCENTAGE93.7, 74.9, 1.6rgb(93.7%,74.9%,1.6%)
CMYK0, 20, 98, 6
HSL47.7°, 96.7, 47.6hsl(47.7,96.7%,47.6%)
HSV (OR HSB)47.7°, 98.3, 93.7
WEB SAFEFFCC00#FFCC00
CIE-LAB79.399, 3.551, 80.735
XYZ54.25, 55.624, 7.994
xyY0.46, 0.472, 55.624
CIE-LCH79.399, 80.813, 87.481
CIE-LUV79.399, 41.233, 82.811
HUNTER-LAB74.581, -0.677, 45.852
BINARY11101111, 10111111, 00000100
iOS - SwiftUIColor(red: 0.94, green: 0.75, blue: 0.02)
iOS - UIKitUIColor(red: 0.94, green: 0.75, blue: 0.02, alpha: 1)
Android - ComposeColor(0xFFEFBF04)