Palette

Fiery Ash Embers

Intense oranges and deep browns, capturing the smoldering glow of embers and volcanic ash.

WarmEnergetic5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fiery Ash Embers 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 Fiery Ash Embers.

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

Data visualization

#CC5500#FF6600#FF9900#552200#AA4400

Palette guide

How to use Fiery Ash Embers

Overview

The Fiery Ash Embers palette evokes the intense glow of smoldering fire and deep, rich earth. Featuring a dynamic range from bright orange #FF9900 and vibrant #FF6600 to the deep, grounding tones of #CC5500, #AA4400, and the almost black #552200, this collection is perfect for projects needing warmth, energy, and a touch of rustic sophistication. Designers can leverage its high contrast for dramatic visual impact, while developers will find these hues easy to implement for striking UI elements or immersive digital environments. It's ideal for conveying passion, tradition, or autumnal themes.

Best used for

digital art and illustrations
rustic branding and logos
gaming UI elements
autumn event promotions
warm website themes
dramatic editorial layouts

Suggested color roles

primary

#FF6600 for energetic calls to action, key headings, or focal points.

secondary

#CC5500 to support primary, adding depth to content blocks or secondary buttons.

accent

#FF9900 for bright highlights, small icons, or interactive elements that need to pop.

background

#552200 for a rich, dark backdrop, or #AA4400 for a warmer, muted background.

text

Use white or light cream for contrast against darker shades like #552200, or a deep charcoal for lighter backgrounds.

Accessibility notes

Ensure #552200 text on #FF9900 or #FF6600 backgrounds has sufficient contrast.
Light text (e.g., white) will contrast well against #CC5500, #AA4400, and #552200.
Avoid using #FF6600 directly on #CC5500 for small text due to low contrast.
Consider larger font sizes for any text using #AA4400 on #552200 to improve readability.

Recommended combinations

Sunset Glow

Vibrant gradient for headers or banners, capturing a fiery sunset effect.

#FF9900 · #FF6600 · #CC5500

Ember Depth

Creates a rich, earthy foundation with a pop of fiery accent for UI cards or sections.

#552200 · #AA4400 · #FF6600

Rustic Warmth

Sophisticated blend for backgrounds and secondary elements in traditional or rustic designs.

#CC5500 · #AA4400 · #552200

CSS variables

:root {
  --fiery-ash-embers-1: #CC5500;
  --fiery-ash-embers-2: #FF6600;
  --fiery-ash-embers-3: #FF9900;
  --fiery-ash-embers-4: #552200;
  --fiery-ash-embers-5: #AA4400;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-ash-embers": {
        1: "#CC5500",
        2: "#FF6600",
        3: "#FF9900",
        4: "#552200",
        5: "#AA4400",
      }
    }
  }
}

Hex values

Color 1#CC5500

Color 2#FF6600

Color 3#FF9900

Color 4#552200

Color 5#AA4400

Accessibility

Contrast checker

1.5:1Fail

2:1Fail

3:1AA18

1.4:1Fail

1.5:1Fail

1.4:1Fail

4.4:1AA18

2:1Fail

1.4:1Fail

6.1:1AA

2.8:1Fail

3:1AA18

4.4:1AA18

6.1:1AA

2.2:1Fail

1.4:1Fail

2:1Fail

2.8:1Fail

2.2:1Fail

Similar palettes

More like Fiery Ash Embers

Fiery Ash Embers

See it in context.

Ready when you are.

Built with Fiery Ash Embers.

How to use Fiery Ash Embers

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunset Glow

Ember Depth

Rustic Warmth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Fiery Ash Embers