Back to palettes

Palette

Volcano Ember Haze

Intense reds and glowing yellows capture the raw power and fiery beauty of volcanic embers and haze.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcano Ember Haze 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 Volcano Ember Haze.

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

Data visualization

#B22222#CD5C5C#FF4500#FFD700#FFC72C

Palette guide

How to use Volcano Ember Haze

Overview

The Volcano Ember Haze palette radiates warmth and energy, capturing the fiery essence of volcanic embers and glowing haze. It features a vibrant range from the deep red of #B22222 and softer #CD5C5C, through the intense orange of #FF4500, to the bright, luminous yellows of #FFD700 and #FFC72C. This collection is perfect for designers and developers seeking to infuse projects with a sense of dynamism, warmth, and raw power. It's an excellent choice for themes related to energy, excitement, and natural phenomena, creating visuals that are both inviting and impactful.

Best used for

  • Food and beverage branding (spicy, warm)
  • Energetic marketing campaigns
  • Autumn-themed graphic design
  • Children's entertainment (fire themes)
  • Event posters and promotions
  • Camping and outdoor gear branding

Suggested color roles

primary

Use #FF4500 as the central, energetic color for main calls-to-action and key visual elements.

secondary

Apply #B22222 for supporting sections or backgrounds that need a deep, warm red foundation.

accent

Reserve #FFD700 for brilliant highlights, glowing effects, or important icons that demand attention.

background

Employ #CD5C5C as a warm, inviting background color, providing a softer base for the brighter tones.

text

For clear readability, use white or a very dark grey/black on the vibrant colors. On #CD5C5C, a deep charcoal would work well.

Accessibility notes

  • Ensure sufficient contrast for text on #FFD700 and #FFC72C, usually requiring dark text.
  • The vibrant reds and oranges may pose challenges for colorblind users; consider alternative indicators.
  • Avoid using #CD5C5C for small text on #B22222 as the contrast might be insufficient.
  • Always use a high contrast color for essential text on the brightest shades in the palette.

Recommended combinations

Ember Glow

Creates a dynamic, glowing effect, ideal for hero sections or energetic visual highlights.

#B22222 · #FF4500 · #FFD700

Hazy Warmth

Provides a softer, inviting warm palette, suitable for backgrounds or less intense content blocks.

#CD5C5C · #FFC72C · #B22222

Fiery Burst

Excellent for conveying excitement and urgency, perfect for buttons or alerts.

#FF4500 · #FFD700 · #B22222

CSS variables

:root {
  --volcano-ember-haze-1: #B22222;
  --volcano-ember-haze-2: #CD5C5C;
  --volcano-ember-haze-3: #FF4500;
  --volcano-ember-haze-4: #FFD700;
  --volcano-ember-haze-5: #FFC72C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcano-ember-haze": {
        1: "#B22222",
        2: "#CD5C5C",
        3: "#FF4500",
        4: "#FFD700",
        5: "#FFC72C",
      }
    }
  }
}

Related searches

ember glow palettefiery yellow redvolcanic warm colorsenergetic autumn themebright lava hues

Palette colors

Hex values

Color 1#B22222
·
Color 2#CD5C5C
·
Color 3#FF4500
·
Color 4#FFD700
·
Color 5#FFC72C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.9:1Fail
4.8:1AA
4.3:1AA18
2
1.7:1Fail
1.2:1Fail
2.8:1Fail
2.5:1Fail
3
1.9:1Fail
1.2:1Fail
2.5:1Fail
2.2:1Fail
4
4.8:1AA
2.8:1Fail
2.5:1Fail
1.1:1Fail
5
4.3:1AA18
2.5:1Fail
2.2:1Fail
1.1:1Fail

Similar palettes

More like Volcano Ember Haze

View all warm