Back to palettes

Palette

Topaz Gleam

Brilliant golden yellows that shimmer with the clear, radiant gleam of a flawless topaz gemstone.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Topaz 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 Topaz Gleam.

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

Data visualization

#C08226#F2AA43#FFCC72#FFF3C4#9A681E

Palette guide

How to use Topaz Gleam

Overview

The Topaz Gleam palette radiates with the brilliant, energetic glow of a flawless gemstone, offering a spectrum of golden yellows that are both vibrant and rich. From the deep, grounding #9A681E to the dazzling #F2AA43, and the soft, luminous #FFF3C4, these colors bring warmth and optimism to any design. This palette is perfect for projects seeking to convey luxury, joy, or a premium feel, providing designers with tools to create eye-catching and memorable visual experiences. It's particularly effective for designs that need to stand out with a sunny, opulent touch.

Best used for

  • Luxury brand websites and packaging
  • E-commerce sites for jewelry or high-end products
  • Event promotions and invitations (especially celebratory)
  • Food and beverage branding (e.g., honey, golden ales)
  • Digital illustrations requiring a sunny or precious feel
  • User interfaces needing a warm, inviting glow

Suggested color roles

primary

Utilize #F2AA43 as a vibrant, eye-catching primary for calls to action, important headings, or key brand elements.

secondary

Apply #C08226 for supporting sections, subheadings, or navigation, offering a richer, more grounded golden tone.

accent

Use #FFCC72 for highlights, interactive states, or decorative elements to add a lighter, more playful gleam.

background

Employ #FFF3C4 as a soft, luminous background, providing a subtle warmth that allows other colors to shine.

text

For optimal readability, use a dark color like charcoal or a deep brown like #9A681E for text on lighter shades like #FFF3C4.

Accessibility notes

  • Ensure sufficient contrast for text when using lighter palette colors like #FFCC72 or #FFF3C4; dark text is often required.
  • The darkest color, #9A681E, provides excellent contrast against the lightest, #FFF3C4, suitable for critical information.
  • Avoid using mid-tone yellows for small text on light backgrounds as readability can be significantly compromised.
  • Interactive elements should have clear visual cues, as some yellow tones may have similar luminosity, affecting perceived contrast.

Recommended combinations

Golden Glow

Creates a bright, inviting atmosphere, perfect for hero sections or celebratory content with a luminous feel.

#FFF3C4 · #FFCC72 · #F2AA43

Rich Topaz

Ideal for conveying depth and luxury, suitable for premium branding or sophisticated design elements.

#9A681E · #C08226 · #F2AA43

Warm Contrast

Provides strong visual separation, great for calls to action or distinguishing important information against a soft background.

#F2AA43 · #FFF3C4 · #9A681E

CSS variables

:root {
  --topaz-gleam-1: #C08226;
  --topaz-gleam-2: #F2AA43;
  --topaz-gleam-3: #FFCC72;
  --topaz-gleam-4: #FFF3C4;
  --topaz-gleam-5: #9A681E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "topaz-gleam": {
        1: "#C08226",
        2: "#F2AA43",
        3: "#FFCC72",
        4: "#FFF3C4",
        5: "#9A681E",
      }
    }
  }
}

Related searches

golden yellow color schemetopaz gemstone palettebright sunny colorsluxury gold paletteenergetic yellow tones

Palette colors

Hex values

Color 1#C08226
·
Color 2#F2AA43
·
Color 3#FFCC72
·
Color 4#FFF3C4
·
Color 5#9A681E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
2.9:1Fail
1.5:1Fail
2
1.6:1Fail
1.3:1Fail
1.8:1Fail
2.4:1Fail
3
2.2:1Fail
1.3:1Fail
1.3:1Fail
3.2:1AA18
4
2.9:1Fail
1.8:1Fail
1.3:1Fail
4.3:1AA18
5
1.5:1Fail
2.4:1Fail
3.2:1AA18
4.3:1AA18

Similar palettes

More like Topaz Gleam

View all vibrant
Marigold Sunburst Glow
Sunflower Field Bright
Arid Bloom Blaze
Bright Marigold Bloom
Citrus Burst Joy
Citrus Grove Delight