Back to palettes

Palette

Fire Opal Gemstone

A brilliant display of oranges and reds, mirroring the captivating play of light in a fire opal.

warmelegant5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fire Opal Gemstone 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 Fire Opal Gemstone.

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

Data visualization

#F9F2E2#F0C49C#E08A66#CC5F3B#B03A1F

Palette guide

How to use Fire Opal Gemstone

Overview

The Fire Opal Gemstone palette offers a luxurious journey through warm, fiery hues, inspired by the captivating play of light in its namesake gem. Ranging from a soft, creamy base (#F9F2E2) to a deep, intense red-orange (#B03A1F), this collection provides a sophisticated spectrum for designers. Mid-tones like the inviting #F0C49C, the vibrant #E08A66, and the bold #CC5F3B create a harmonious yet dynamic flow. This palette is perfect for projects requiring elegance, warmth, and a touch of precious energy, ensuring a rich and memorable visual experience. Its inherent warmth makes it ideal for evoking comfort, luxury, or a vibrant, energetic mood across various digital and print applications.

Best used for

  • Luxury brand identity
  • Autumnal seasonal campaigns
  • High-end food and beverage packaging
  • Elegant event invitations
  • Interior design accents
  • Fashion and beauty editorial

Suggested color roles

primary

Utilize #CC5F3B as a vibrant primary color for branding, key calls-to-action, or main headings to convey energy and sophisticated warmth.

secondary

Apply #E08A66 for secondary elements such as subheadings, illustrative details, or informational graphics, offering a rich yet supportive complement.

accent

Reserve #B03A1F for powerful accents like hover states, critical alerts, or small, impactful graphical elements to add depth and dramatic flair.

background

Employ #F9F2E2 as a clean, warm background for most content, ensuring high readability and a gentle, inviting aesthetic.

text

For primary body text, a dark charcoal or very dark brown is recommended for optimal readability. For large headings on light backgrounds, #B03A1F can be used effectively.

Accessibility notes

  • Ensure sufficient contrast when pairing mid-tones like #F0C49C or #E08A66 with lighter text.
  • The lightest background #F9F2E2 provides excellent contrast for text in #CC5F3B or #B03A1F.
  • Avoid using #F9F2E2 or #F0C49C for small body text on white or very light backgrounds.
  • Always test color combinations with WCAG contrast checkers, especially for interactive elements and crucial information.

Recommended combinations

Soft Glow

Ideal for subtle gradients, background textures, or layered UI elements that need a gentle, inviting transition and soft depth.

#F9F2E2 · #F0C49C · #E08A66

Fiery Core

Effective for high-impact calls-to-action, prominent branding, or hero sections where strong contrast and vibrant warmth are desired.

#CC5F3B · #B03A1F · #F9F2E2

Rich Earth

Great for creating a rich, autumnal feel in illustrations, data visualizations, or supporting brand elements that require cohesive warmth.

#F0C49C · #E08A66 · #CC5F3B

CSS variables

:root {
  --fire-opal-gemstone-1: #F9F2E2;
  --fire-opal-gemstone-2: #F0C49C;
  --fire-opal-gemstone-3: #E08A66;
  --fire-opal-gemstone-4: #CC5F3B;
  --fire-opal-gemstone-5: #B03A1F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fire-opal-gemstone": {
        1: "#F9F2E2",
        2: "#F0C49C",
        3: "#E08A66",
        4: "#CC5F3B",
        5: "#B03A1F",
      }
    }
  }
}

Related searches

warm orange red paletteluxury gemstone colorsvibrant autumn color schemeelegant fiery huessophisticated warm branding

Palette colors

Hex values

Color 1#F9F2E2
·
Color 2#F0C49C
·
Color 3#E08A66
·
Color 4#CC5F3B
·
Color 5#B03A1F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.4:1Fail
3.6:1AA18
5.4:1AA
2
1.4:1Fail
1.6:1Fail
2.5:1Fail
3.8:1AA18
3
2.4:1Fail
1.6:1Fail
1.5:1Fail
2.3:1Fail
4
3.6:1AA18
2.5:1Fail
1.5:1Fail
1.5:1Fail
5
5.4:1AA
3.8:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Fire Opal Gemstone

View all warm
Aged Leather Patina
Amber Glaze
Amber Whiskey Swirl
Ancient Egypt Gold
Ancient Egyptian Gold
Ancient Gold Tapestry