Palette

Opal Flame Shimmer

Fiery reds and shimmering oranges, capturing the lively, shifting colors within a precious opal.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Opal Flame Shimmer 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 Opal Flame Shimmer.

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

Data visualization

#CC3300#FF6600#FF9933#FFCC66#FFE5B4

Palette guide

How to use Opal Flame Shimmer

Overview

The Opal Flame Shimmer palette ignites with fiery reds and shimmering oranges, capturing the lively, shifting colors within a precious opal. Featuring vibrant shades like #CC3300, #FF6600, #FF9933, #FFCC66, and #FFE5B4, this collection is perfect for designers and developers aiming to create energetic, dynamic, and warm digital experiences. Its glowing tones are ideal for high-impact branding, exciting web interfaces, and content that needs to convey passion, warmth, or a sense of urgency, ensuring a captivating visual presence.

Best used for

Energetic brand identities
Food and beverage marketing (spicy, warm themes)
Creative agency websites
Event promotion (festivals, parties)
Children's product design
Autumn-themed content and campaigns

Suggested color roles

primary

#CC3300 (a deep fiery red-orange) is excellent for bold calls to action, main headings, or prominent graphical elements, demanding attention.

secondary

#FF6600 (a vibrant orange) works well for navigation, key interactive elements, or secondary headings, maintaining energy.

accent

#FF9933 (a bright orange-gold) can be used for highlights, subtle glowing effects, or decorative details, adding a luminous touch.

background

#FFE5B4 (a very light, warm cream) serves as a soft, inviting backdrop that allows the more vibrant colors to pop and shine.

text

#CC3300 or #FF6600 (on light backgrounds) provides strong contrast, or opt for a dark charcoal/black for optimal readability.

Accessibility notes

Text in #CC3300 or #FF6600 on #FFE5B4 should provide good contrast and readability for most users.
Lighter colors like #FFCC66 may not be suitable for small text on #FFE5B4 backgrounds due to insufficient contrast.
Ensure sufficient contrast for all interactive elements, especially if using a lighter shade for their default state.
For small text or critical information, consider using the darkest colors from the palette or black on light backgrounds.

Recommended combinations

Fiery Base

Creates a warm, inviting gradient for backgrounds or large sections, setting an energetic tone.

#FFE5B4 · #FFCC66 · #FF9933

Vibrant Pop

For high-impact calls to action, feature banners, or elements requiring immediate attention.

#CC3300 · #FF6600 · #FFE5B4

Glowing Emphasis

Ideal for highlighting important information, creating subtle glowing effects, or decorative accents.

#FF9933 · #FFCC66 · #CC3300

CSS variables

:root {
  --opal-flame-shimmer-1: #CC3300;
  --opal-flame-shimmer-2: #FF6600;
  --opal-flame-shimmer-3: #FF9933;
  --opal-flame-shimmer-4: #FFCC66;
  --opal-flame-shimmer-5: #FFE5B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "opal-flame-shimmer": {
        1: "#CC3300",
        2: "#FF6600",
        3: "#FF9933",
        4: "#FFCC66",
        5: "#FFE5B4",
      }
    }
  }
}

Hex values

Color 1#CC3300

Color 2#FF6600

Color 3#FF9933

Color 4#FFCC66

Color 5#FFE5B4

Accessibility

Contrast checker

1.8:1Fail

2.4:1Fail

3.5:1AA18

4.2:1AA18

1.8:1Fail

1.4:1Fail

2:1Fail

2.4:1Fail

1.4:1Fail

1.7:1Fail

3.5:1AA18

2:1Fail

1.4:1Fail

1.2:1Fail

4.2:1AA18

2.4:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Opal Flame Shimmer

Opal Flame Shimmer

See it in context.

Ready when you are.

Built with Opal Flame Shimmer.

How to use Opal Flame Shimmer

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fiery Base

Vibrant Pop

Glowing Emphasis

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Opal Flame Shimmer