Gold (metallic)

HEX: #D4AF37 | Modern Palette

On White
2.10:1
FAIL
On Black
9.99:1
PASS

Color Specifications

HEX
#D4AF37
RGB
212, 175, 55
HSL
45°, 74% ,83%
CMYK
0, 17.45, 74.06, 16.86

About Gold (metallic)

Gold (metallic) (#D4AF37) is a color with RGB(212, 175, 55) and HSL(45.86°, 74.06%, 83.14%). It is commonly associated with Playful moods. In design, it fits Warm styles and is suitable for Text, Button, Background. Its complementary color is #375CD4, which creates strong contrast. Its triadic palette includes #37D4AF and #AF37D4. The name comes from *gulþą (Proto-Germanic).

  • HEX: #D4AF37
  • RGB: 212, 175, 55
  • HSL: 45.86°, 74.06%, 83.14%
  • Mood: Playful
  • Style: Warm
  • Use case: Text, Button, Background
  • Complementary color: #375CD4
  • Triadic colors: #37D4AF, #AF37D4
  • The name comes from *gulþą (Proto-Germanic).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #D4AF37 from deepest shade to lightest tint.

Color Characteristics

Mood
Playful
Style
Warm
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #BBBB33
Protanopia #B4B438
Tritanopia #DBA6A6
Achromatopsia #B3B3B3

Frequently Asked Questions

Gold (metallic) (#D4AF37) is a color with RGB(212, 175, 55) and HSL(45.86°, 74.06%, 83.14%).

#D4AF37 pairs strongly with #375CD4 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#D4AF37 is suitable for Text, Button, Background and works well with Warm styles.

#D4AF37 is commonly associated with Playful.

The name Gold (metallic) is linked to *gulþą from Proto-Germanic, meaning gold.

Name, History & Etymology

Origin Word *gulþą
Meaning gold
Language Proto-Germanic
First Recorded Use Ancient

History

Gold has been highly valued since ancient times for its rarity, resistance to corrosion, and beautiful luster. It was one of the first metals to be worked by humans, appearing in artifacts from various ancient civilizations including Egypt, Mesopotamia, and the Indus Valley. Its use as currency dates back to around 600 BCE with the Lydians. Throughout history, gold has been a symbol of wealth, power, and divinity, used in coinage, jewelry, religious artifacts, and decorative arts. Major gold rushes in the 19th century (e.g., California, Australia) significantly impacted global economies and migration patterns. Today, it remains a crucial investment commodity, industrial material (electronics, dentistry), and luxury item.

First Recorded Use

Before 2000 BCE (evidence of early gold use)

Cultural Associations

Symbol of wealth, prosperity, and status across nearly all cultures. Associated with divinity, royalty, and the sun in many ancient mythologies (e.g., Ra in Egypt, Apollo in Greece). Used extensively in religious iconography and artifacts (e.g., golden altars, Buddha statues, Christian chalices). The 'golden rule' (treat others as you would like to be treated) reflects its value as a standard of excellence. Often represents purity, perfection, and enduring value (e.g., 'heart of gold', 'golden age').

Similar Named Colors
Old Gold #CFB53B ΔE 3.34
Meat Brown #E5B73B ΔE 3.46
Urobilin #E1AD21 ΔE 4.03
Satin Sheen Gold #CBA135 ΔE 4.30

Code Snippets

/* Background */
.element {
    background-color: #D4AF37;
}

/* Text */
.element {
    color: #D4AF37;
}

/* Border */
.element {
    border: 1px solid #D4AF37;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #D4AF37,
        #B4C3F4
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #D4AF37,
        #B4C3F4
    );
}

// SCSS variable
$gold-(metallic): #D4AF37;

// With RGB channels (useful for rgba() usage)
$gold-(metallic)-r: 212;
$gold-(metallic)-g: 175;
$gold-(metallic)-b: 55;

// Usage
.element {
    background-color: $gold-(metallic);
    color: rgba($gold-(metallic)-r, $gold-(metallic)-g, $gold-(metallic)-b, 0.8);
}