Back to palettes

Palette

Fire Opal Flicker

Fiery and captivating, these hues mimic the iridescent play of light within a brilliant fire opal gemstone.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E60026#FF4500#FFA500#FFD700#FFFACD

Palette guide

How to use Fire Opal Flicker

Overview

The Fire Opal Flicker palette ignites designs with its vibrant spectrum, echoing the mesmerizing iridescence of a fire opal gemstone. This energetic collection moves from the deep crimson of #E60026, through the fiery orange-red of #FF4500 and the vivid orange of #FFA500, culminating in the radiant glow of #FFD700 and the soft luminescence of #FFFACD. Ideal for projects demanding attention and conveying enthusiasm, these hues create a dynamic visual experience. Designers and developers can leverage this palette to infuse warmth, passion, and a sense of urgency into user interfaces, marketing materials, and branding, ensuring a memorable and impactful presence.

Best used for

  • High-energy brand identity
  • Event promotions and invitations
  • Food and beverage packaging (especially spicy or vibrant products)
  • Gaming interfaces and streaming graphics
  • Fitness and sports apparel branding
  • Alerts, warnings, and calls-to-action in UI/UX

Suggested color roles

primary

#E60026. A powerful, commanding red, perfect for main branding elements, prominent buttons, or hero sections where a strong statement is desired.

secondary

#FF4500. This vibrant orange-red offers a fiery complement, excellent for subheadings, secondary calls-to-action, or graphic elements that need to stand out without overpowering the primary.

accent

#FFD700. A brilliant golden yellow, ideal for highlighting key information, interactive states, small icons, or decorative accents that require a burst of energy and attention.

background

#FFFACD. A gentle, luminous pale yellow that provides a soft, warm base, ensuring readability for darker text while maintaining the palette's overall energetic feel.

text

For most readability, use a dark charcoal like #333333 or pure black against #FFFACD. For text on #E60026 or #FF4500, use white (#FFFFFF) for optimal contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing #FFFACD with lighter text; aim for at least WCAG AA compliance (e.g., use dark text).
  • Use white text (#FFFFFF) against the darker hues like #E60026, #FF4500, and #FFA500 to maintain readability.
  • Avoid using #FFD700 directly on #FFFACD for body text as their proximity in lightness can cause legibility issues.
  • Be mindful of colorblind users; reds and oranges can be challenging. Supplement color cues with icons or text labels where critical.

Recommended combinations

Fiery Impact

High-contrast combination for calls-to-action, alerts, or striking headlines, leveraging the deepest red and the lightest background.

#E60026 · #FF4500 · #FFFACD

Radiant Energy

A vibrant, warm progression suitable for gradients, decorative elements, or graphics that need to convey energy and optimism without harsh contrasts.

#FF4500 · #FFA500 · #FFD700

Sunset Horizon

Creates a bright, airy feel, excellent for backgrounds with subtle warmth, subheadings, or illustrations, maintaining a cohesive, luminous look.

#FFA500 · #FFD700 · #FFFACD

CSS variables

:root {
  --fire-opal-flicker-2-1: #E60026;
  --fire-opal-flicker-2-2: #FF4500;
  --fire-opal-flicker-2-3: #FFA500;
  --fire-opal-flicker-2-4: #FFD700;
  --fire-opal-flicker-2-5: #FFFACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fire-opal-flicker-2": {
        1: "#E60026",
        2: "#FF4500",
        3: "#FFA500",
        4: "#FFD700",
        5: "#FFFACD",
      }
    }
  }
}

Related searches

vibrant red orange yellow palettefire opal color schemeenergetic website colorswarm brand identity palettered orange yellow hex codes

Palette colors

Hex values

Color 1#E60026
·
Color 2#FF4500
·
Color 3#FFA500
·
Color 4#FFD700
·
Color 5#FFFACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.4:1Fail
3.4:1AA18
4.5:1AA
2
1.4:1Fail
1.7:1Fail
2.5:1Fail
3.2:1AA18
3
2.4:1Fail
1.7:1Fail
1.4:1Fail
1.9:1Fail
4
3.4:1AA18
2.5:1Fail
1.4:1Fail
1.3:1Fail
5
4.5:1AA
3.2:1AA18
1.9:1Fail
1.3:1Fail

Similar palettes

More like Fire Opal Flicker

View all vibrant
Inferno Dragon Breath
Solar Flare Burst
Volcanic Wyrm Glow
Carnival Spice Blend
Celestial Pyro Burst
Coral Reef Mosaic