Palette

Gilded Age

Rich golden tones and warm browns recall the opulence and grandeur of a bygone era of prosperity and luxury.

warmelegant5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gilded Age 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 Gilded Age.

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

Data visualization

#8B4513#B8860B#DAA520#FFD700#FFEC8B

Palette guide

How to use Gilded Age

Overview

The 'Gilded Age' palette is a rich collection of golden tones and warm browns, exquisitely recalling the opulence and grandeur of a bygone era of prosperity and luxury. From the grounding #8B4513 (Saddle Brown) to the bright #FFD700 (Gold) and luminous #FFEC8B (Pale Gold), this palette offers a harmonious blend of depth and radiance. It features the classic #B8860B (Dark Goldenrod) and #DAA520 (Goldenrod), creating a cohesive, inviting, and inherently luxurious feel. This collection is perfect for designs that aim to convey a sense of traditional elegance, historic charm, and enduring quality.

Best used for

Classic corporate branding and identity
Historical architecture firm portfolios
Upscale furniture design marketing
Luxury travel agency websites
Traditional event themes and invitations
Vintage-inspired editorial layouts

Suggested color roles

primary

Utilize #DAA520 (Goldenrod) for key elements, logos, or prominent headlines to convey warmth and richness.

secondary

Apply #B8860B (Dark Goldenrod) for supporting elements, borders, or backgrounds that require a deeper, more grounded gold.

accent

Introduce #8B4513 (Saddle Brown) for strong contrast, grounding elements, or elegant typography.

background

Employ #FFEC8B (Pale Gold) as a soft, warm background, providing excellent readability for darker text.

text

For optimal readability on lighter backgrounds like #FFEC8B, use #8B4513 (Saddle Brown) or #B8860B (Dark Goldenrod) as your primary text colors.

Accessibility notes

Ensure sufficient contrast when pairing #FFD700 (Gold) with #FFEC8B (Pale Gold) for text, as both are light.
Text in #8B4513 or #B8860B on an #FFEC8B background offers excellent readability.
Avoid using #DAA520 (Goldenrod) text on #B8860B (Dark Goldenrod) for critical information due to potential low contrast.
The darkest brown, #8B4513, provides a strong, accessible choice for text across all lighter golds.

Recommended combinations

Elegant Foundation

Creates a warm, inviting base; ideal for main content areas, sophisticated branding, and clear information hierarchy.

#FFEC8B · #DAA520 · #8B4513

Radiant Accent

Highlights key features with a luminous touch; perfect for decorative elements, call-to-action buttons, or subtle gradients.

#B8860B · #FFD700 · #DAA520

Grounded Opulence

Combines deep warmth with soft brilliance; suitable for titles, logos, and UI elements requiring strong contrast.

#8B4513 · #FFEC8B · #B8860B

CSS variables

:root {
  --gilded-age-1: #8B4513;
  --gilded-age-2: #B8860B;
  --gilded-age-3: #DAA520;
  --gilded-age-4: #FFD700;
  --gilded-age-5: #FFEC8B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gilded-age": {
        1: "#8B4513",
        2: "#B8860B",
        3: "#DAA520",
        4: "#FFD700",
        5: "#FFEC8B",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#B8860B

Color 3#DAA520

Color 4#FFD700

Color 5#FFEC8B

Accessibility

Contrast checker

2.2:1Fail

3.2:1AA18

5.1:1AA

6:1AA

2.2:1Fail

1.5:1Fail

2.3:1Fail

2.7:1Fail