Palette

Fire Opal Flicker

The intense, fiery iridescence of a precious fire opal, glowing with inner light.

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

#E64E0F#FF8C00#FF4500#FFD700#1A0500

Palette guide

How to use Fire Opal Flicker

Overview

The Fire Opal Flicker palette ignites designs with intense warmth and vibrant energy, reminiscent of the gemstone's fiery glow. Centered around dynamic oranges and reds like #E64E0F and #FF4500, it's perfect for projects demanding attention and passion. Complemented by the rich gold of #FFD700 and the grounding depth of #1A0500, this palette offers a striking contrast ideal for high-impact branding, calls to action, or celebratory themes. The vivid #FF8C00 provides a versatile mid-tone. Developers will find this palette excellent for creating engaging UI elements that pop, ensuring a memorable user experience across digital and print mediums.

Best used for

High-energy branding and logos
Event promotions and marketing materials
Food and beverage packaging or restaurant websites
Call-to-action buttons and interactive UI elements
Sports team branding and fan merchandise
Festive and celebratory digital graphics

Suggested color roles

primary

Utilize #E64E0F as the dominant brand color, conveying passion and strength for headlines or main graphical elements.

secondary

Apply #FF8C00 for supporting sections, subheadings, or secondary calls to action, maintaining the palette's warmth.

accent

Employ #FF4500 sparingly for high-impact elements like critical call-to-action buttons or interactive highlights that demand immediate attention.

background

Use #1A0500 for sophisticated dark mode interfaces or as a grounding base for header and footer sections, allowing vibrant colors to pop.

text

For optimal readability, pair #1A0500 with light backgrounds. On dark backgrounds like #1A0500, use white or a very light off-white for body text.

Accessibility notes

Ensure sufficient contrast when pairing vibrant shades like #FF4500 or #FFD700 with each other; use #1A0500 for text on these bright colors.
Text in #1A0500 offers excellent readability on #FFD700, #FF8C00, and other lighter palette hues.
For text on #E64E0F or #FF4500 backgrounds, use pure white or a very light off-white to meet WCAG AA contrast standards.
Avoid placing light text directly on #FFD700 unless the text is very large; consider #1A0500 for better contrast on this bright yellow.

Recommended combinations

Fiery Impact

Ideal for high-impact headlines, hero banners, or critical interactive elements where maximum visual punch is required.

#FF4500 · #FFD700 · #1A0500

Sunset Glow

Excellent for brand identity, product showcases, or sections needing a warm, inviting, yet sophisticated feel with strong depth.

#E64E0F · #FF8C00 · #1A0500

Golden Flare

Perfect for energetic accents, call-to-action buttons, or small illustrative elements that demand attention against a darker or neutral background.

#FFD700 · #E64E0F · #FF4500

CSS variables

:root {
  --fire-opal-flicker-1: #E64E0F;
  --fire-opal-flicker-2: #FF8C00;
  --fire-opal-flicker-3: #FF4500;
  --fire-opal-flicker-4: #FFD700;
  --fire-opal-flicker-5: #1A0500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fire-opal-flicker": {
        1: "#E64E0F",
        2: "#FF8C00",
        3: "#FF4500",
        4: "#FFD700",
        5: "#1A0500",
      }
    }
  }
}

Hex values

Color 1#E64E0F

Color 2#FF8C00

Color 3#FF4500

Color 4#FFD700

Color 5#1A0500

Accessibility

Contrast checker

1.6:1Fail

1.1:1Fail

2.7:1Fail

5.1:1AA

1.6:1Fail

1.5:1Fail

1.7:1Fail

8.4:1AAA

1.1:1Fail

1.5:1Fail

2.5:1Fail

5.7:1AA

2.7:1Fail

1.7:1Fail

2.5:1Fail

14.1:1AAA

5.1:1AA

8.4:1AAA

5.7:1AA

14.1:1AAA

Similar palettes

More like Fire Opal Flicker

Spiced Market Cascade

Abstract Ocean Flow

Caribbean Beach Pop