Back to palettes

Palette

Imperial Gold

A radiant collection of opulent golds, reminiscent of classical grandeur and a time of prosperity.

warmelegant5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Imperial Gold 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 Imperial Gold.

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

Data visualization

#FFD700#DAA520#B8860B#F0C700#CCAE00

Palette guide

How to use Imperial Gold

Overview

The Imperial Gold palette is a radiant collection of opulent golds, reminiscent of classical grandeur and a time of prosperity. Featuring the bright #FFD700, the rich #DAA520, and the deeper #B8860B, alongside #F0C700 and #CCAE00, this palette offers designers and developers a truly luxurious foundation. It's ideal for conveying prestige, elegance, and high value. Utilize these shimmering hues to create designs that feel rich, sophisticated, and timeless, perfect for projects that aim to evoke a sense of heritage and refined luxury.

Best used for

  • Luxury product branding and packaging
  • High-end event invitations and decor
  • Award ceremonies and recognition programs
  • Financial services and wealth management
  • Classical art and historical reproductions
  • Elegant website accents and UI elements

Suggested color roles

primary

Use #FFD700 as a dominant, bright gold for key headings, logos, or primary call-to-action elements.

secondary

Employ #DAA520 for supportive sections, borders, or decorative elements, offering a rich, complementary gold.

accent

Apply #B8860B as a deep, antique gold for subtle accents, shadows, or text on lighter gold backgrounds to add depth.

background

A deep charcoal or black provides dramatic contrast, allowing the golds to shine. Alternatively, a very light cream offers a softer, elegant base.

text

For optimal readability, use a dark brown, black, or #B8860B for text on lighter gold backgrounds. White text can work on very dark backgrounds.

Accessibility notes

  • Text on gold backgrounds often requires careful contrast checks; use black or a very dark brown for maximum readability.
  • Avoid placing light gold text on other light gold backgrounds, especially for essential information, due to low contrast.
  • Ensure sufficient contrast for all interactive elements against their background, meeting WCAG guidelines.
  • When using #B8860B for text, ensure it's on a background light enough to provide at least a 4.5:1 contrast ratio.

Recommended combinations

Bright & Deep Gold

Creates a classic gold layering effect, ideal for contrasting headings, borders, or metallic accents.

#FFD700 · #B8860B · #DAA520

Subtle Luxury

Perfect for monochromatic elegance, gradients, or soft, shimmering backgrounds that don't overpower content.

#F0C700 · #CCAE00 · #DAA520

Regal Statement

Use for bold statements, awards, or emblems where a rich, multi-dimensional gold effect is desired.

#FFD700 · #B8860B · #CCAE00

CSS variables

:root {
  --imperial-gold-1: #FFD700;
  --imperial-gold-2: #DAA520;
  --imperial-gold-3: #B8860B;
  --imperial-gold-4: #F0C700;
  --imperial-gold-5: #CCAE00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "imperial-gold": {
        1: "#FFD700",
        2: "#DAA520",
        3: "#B8860B",
        4: "#F0C700",
        5: "#CCAE00",
      }
    }
  }
}

Related searches

imperial gold color schemeluxury yellow paletteregal gold designclassic gold brandingopulent metallic colors

Palette colors

Hex values

Color 1#FFD700
·
Color 2#DAA520
·
Color 3#B8860B
·
Color 4#F0C700
·
Color 5#CCAE00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.3:1Fail
1.2:1Fail
1.6:1Fail
2
1.6:1Fail
1.5:1Fail
1.4:1Fail
1:1Fail
3
2.3:1Fail
1.5:1Fail
2:1Fail
1.5:1Fail
4
1.2:1Fail
1.4:1Fail
2:1Fail
1.3:1Fail
5
1.6:1Fail
1:1Fail
1.5:1Fail
1.3:1Fail

Similar palettes

More like Imperial Gold

View all warm