Back to palettes

Palette

Fire Opal Radiance

Captures the iridescent glow and fiery heart of a precious fire opal.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D93B18#E4791E#F8C31D#FDF7EA#8C2F39

Palette guide

How to use Fire Opal Radiance

Overview

The Fire Opal Radiance palette is a vibrant and energetic collection, perfectly capturing the iridescent glow and fiery heart of a precious gemstone. Designers and developers can leverage its striking contrast and warm tones for impactful visual experiences. Featuring a bold orange-red (#D93B18), a rich amber (#E4791E), and a luminous gold (#F8C31D), it's balanced by a soft, near-white cream (#FDF7EA) and a deep, sophisticated maroon-brown (#8C2F39). This palette offers a dynamic range, from fiery highlights to grounded depth, making it ideal for projects that demand attention and convey passion.

Best used for

  • Dynamic branding and marketing campaigns
  • Event invitations and festive digital collateral
  • Children's product design and packaging
  • High-energy websites and mobile applications
  • Fashion and accessory design concepts
  • Artistic illustrations and digital paintings

Suggested color roles

primary

Use #D93B18 for bold calls-to-action, main headlines, or branding elements that need to convey energy and urgency.

secondary

Apply #E4791E for supporting sections, subheadings, or as a warm background accent to complement the primary hue.

accent

Deploy #F8C31D for highlights, interactive elements, or small details that require a luminous, eye-catching pop.

background

Utilize #FDF7EA as a clean, warm background for content, providing excellent contrast for darker text and vibrant graphics.

text

Choose #8C2F39 for primary body text, ensuring strong readability on light backgrounds like #FDF7EA, or use a crisp white for text on darker hues.

Accessibility notes

  • Ensure #8C2F39 or a dark charcoal text has sufficient contrast on #FDF7EA background (WCAG AA minimum).
  • Use #F8C31D sparingly for text on #D93B18 or #E4791E, as contrast may be low. Reserve for larger display text.
  • Verify button and link states are clearly distinguishable using a combination of light and dark palette colors.
  • Avoid placing #D93B18 directly next to #E4791E for critical information due to potential lack of contrast for some users.

Recommended combinations

Vibrant Callout

Ideal for prominent calls-to-action, banners, or headlines where high visibility and energy are key.

#D93B18 · #F8C31D · #FDF7EA

Earthy Depth

Creates a sophisticated, grounded feel, suitable for sub-branding, footer areas, or rich content sections.

#8C2F39 · #E4791E · #FDF7EA

Bright Highlight

Excellent for highlighting key features, interactive elements, or to add a touch of luminosity against a vibrant base.

#F8C31D · #D93B18 · #FDF7EA

CSS variables

:root {
  --fire-opal-radiance-1: #D93B18;
  --fire-opal-radiance-2: #E4791E;
  --fire-opal-radiance-3: #F8C31D;
  --fire-opal-radiance-4: #FDF7EA;
  --fire-opal-radiance-5: #8C2F39;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fire-opal-radiance": {
        1: "#D93B18",
        2: "#E4791E",
        3: "#F8C31D",
        4: "#FDF7EA",
        5: "#8C2F39",
      }
    }
  }
}

Related searches

vibrant color palettesenergetic brand colorsfire opal hex codeswarm orange red palettegemstone inspired design

Palette colors

Hex values

Color 1#D93B18
·
Color 2#E4791E
·
Color 3#F8C31D
·
Color 4#FDF7EA
·
Color 5#8C2F39
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.8:1Fail
4.3:1AA18
1.8:1Fail
2
1.5:1Fail
1.8:1Fail
2.8:1Fail
2.7:1Fail
3
2.8:1Fail
1.8:1Fail
1.5:1Fail
5:1AA
4
4.3:1AA18
2.8:1Fail
1.5:1Fail
7.6:1AAA
5
1.8:1Fail
2.7:1Fail
5:1AA
7.6:1AAA

Similar palettes

More like Fire Opal Radiance

View all vibrant
Fire Opal Flicker
Golden Hour Zest
Molten Core Erupt
Molten Lava Glow
Monarch Butterfly Wings
Solar Flare Burst