Back to palettes

Palette

Noble Metal Gleam

A lavish blend of golden and silver hues, reflecting opulence and refined elegance.

neutralelegant5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Noble Metal Gleam reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Noble Metal Gleam.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#D4AF37#B0B0B0#C0C0C0#8B4513#F5DEB3

Palette guide

How to use Noble Metal Gleam

Overview

The Noble Metal Gleam palette evokes sophisticated luxury, blending rich metallic tones for an opulent feel. Featuring a radiant gold (#D4AF37), alongside elegant silvers like #B0B0B0 and #C0C0C0, it's anchored by a warm bronze-brown (#8B4513) and softened by a creamy off-white (#F5DEB3). This collection is perfect for designers seeking to convey prestige and timeless elegance in their projects. Developers can leverage these hues to craft user interfaces that feel premium and exclusive, ensuring a polished and high-value aesthetic across various digital and print applications. It offers versatility for both subtle accents and dominant statements.

Best used for

  • Luxury brand websites and apps
  • High-end product packaging design
  • Elegant event invitations and stationery
  • Sophisticated interior design mockups
  • Premium jewelry or fashion branding
  • Exclusive membership portal interfaces

Suggested color roles

primary

Use the radiant gold #D4AF37 for focal points, branding elements, or call-to-action buttons to immediately convey luxury and value.

secondary

Apply the refined silver #B0B0B0 for navigation, secondary headings, or subtle UI elements to provide balance and a modern metallic touch.

accent

Incorporate the rich bronze #8B4513 for depth, important icons, or subtle borders to add warmth and a vintage, distinguished feel.

background

Utilize the soft cream #F5DEB3 as a clean, elegant background color, providing a gentle canvas that allows the metallic tones to truly shine.

text

For optimal readability, use a dark contrasting color like true black or a deep charcoal for body text. Alternatively, the rich #8B4513 bronze provides excellent contrast against lighter backgrounds like #F5DEB3 for headings or key information.

Accessibility notes

  • Ensure sufficient contrast when pairing #D4AF37 gold with lighter shades like #C0C0C0; WCAG AA requires a minimum 4.5:1 ratio for text.
  • The deep #8B4513 bronze offers good contrast against #F5DEB3, making it suitable for body text on a light background.
  • Avoid using #B0B0B0 or #C0C0C0 as background colors for primary text, as their light nature can lead to poor readability with most text colors.
  • Always test color combinations with accessibility checkers to ensure compliance, especially for interactive elements and larger text.

Recommended combinations

Classic Opulence

Ideal for elegant headers, sub-navigation, and clean backgrounds in luxury e-commerce or editorial layouts.

#D4AF37 · #B0B0B0 · #F5DEB3

Warm Richness

Excellent for creating a cozy yet upscale feel, perfect for branding materials or accenting important information.

#D4AF37 · #8B4513 · #F5DEB3

Modern Sophistication

Great for subtle UI elements, data visualizations, or backgrounds where a refined, muted metallic effect is desired.

#B0B0B0 · #8B4513 · #C0C0C0

CSS variables

:root {
  --noble-metal-gleam-1: #D4AF37;
  --noble-metal-gleam-2: #B0B0B0;
  --noble-metal-gleam-3: #C0C0C0;
  --noble-metal-gleam-4: #8B4513;
  --noble-metal-gleam-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noble-metal-gleam": {
        1: "#D4AF37",
        2: "#B0B0B0",
        3: "#C0C0C0",
        4: "#8B4513",
        5: "#F5DEB3",
      }
    }
  }
}

Related searches

luxury color palettesgold and silver color schemeelegant metallic colorsopulence branding colorspremium design palette

Palette colors

Hex values

Color 1#D4AF37
·
Color 2#B0B0B0
·
Color 3#C0C0C0
·
Color 4#8B4513
·
Color 5#F5DEB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.2:1Fail
3.4:1AA18
1.6:1Fail
2
1:1Fail
1.2:1Fail
3.3:1AA18
1.7:1Fail
3
1.2:1Fail
1.2:1Fail
3.9:1AA18
1.4:1Fail
4
3.4:1AA18
3.3:1AA18
3.9:1AA18
5.4:1AA
5
1.6:1Fail
1.7:1Fail
1.4:1Fail
5.4:1AA

Similar palettes

More like Noble Metal Gleam

View all neutral
Art Deco Glimmer
Antique Silk Damask
Art Deco Glimmer
Antique Silver Filigree
Art Deco Elegance
Art Deco Elegance