Palette

Fiery Phoenix Ash

Intense reds and deep browns capturing the destructive beauty and rebirth from ash of a mythical phoenix.

WarmEnergetic5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3E2723#6D4C41#D84315#BF360C#FFAB00

Palette guide

How to use Fiery Phoenix Ash

Overview

The 'Fiery Phoenix Ash' palette captures the destructive beauty and rebirth from ash of a mythical phoenix. It features deep, earthy browns like #3E2723 and #6D4C41, representing the ash, contrasted powerfully with intense, smoldering reds like #D84315 and #BF360C, culminating in a brilliant, fiery orange (#FFAB00) symbolizing rebirth. This palette evokes strength, transformation, and a dramatic narrative, blending grounding darkness with vibrant, hopeful light. It's ideal for designers and developers seeking a robust, sophisticated, and symbolically rich color scheme.

Best used for

Mythological or fantasy game interfaces and branding
Sophisticated masculine branding and product design
Historical documentaries and dramatic storytelling visuals
Fall/winter fashion lines and apparel marketing
Book covers with themes of transformation or renewal
Dark mode UI with warm, impactful accents

Suggested color roles

primary

#3E2723 for a deep, grounding, and sophisticated background or base, evoking ash.

secondary

#6D4C41 for supporting elements, borders, or subtle textural details, adding warmth.

accent

#FFAB00 for brilliant highlights, calls to action, or glowing effects representing rebirth and energy.

background

#3E2723 for a rich, dark, and elegant canvas that enhances the vibrant accents.

text

Use #FFAB00 or a clean white/cream on the darker browns, and #3E2723 on lighter accents for contrast.

Accessibility notes

#FFAB00 is vital for text readability on dark browns like #3E2723 and #6D4C41, ensure sufficient contrast.
Ensure high contrast for interactive elements, especially between text and button backgrounds.
Avoid using #D84315 text on #BF360C background due to very low contrast, use for larger graphic elements.
Use white or very light text on the darker reds and browns for body content to ensure legibility.

Recommended combinations

Rebirth Glow

A dark base with a vibrant, glowing focal point and a strong secondary accent.

#3E2723 · #FFAB00 · #D84315

Ashy Texture

For textured backgrounds or subtle gradients, evoking a sense of depth and material.

#6D4C41 · #BF360C · #3E2723

Hero Button

A strong, fiery button with a bright highlight and a dark, grounding text color.

#D84315 · #FFAB00 · #3E2723

CSS variables

:root {
  --fiery-phoenix-ash-1: #3E2723;
  --fiery-phoenix-ash-2: #6D4C41;
  --fiery-phoenix-ash-3: #D84315;
  --fiery-phoenix-ash-4: #BF360C;
  --fiery-phoenix-ash-5: #FFAB00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-phoenix-ash": {
        1: "#3E2723",
        2: "#6D4C41",
        3: "#D84315",
        4: "#BF360C",
        5: "#FFAB00",
      }
    }
  }
}

Hex values

Color 1#3E2723

Color 2#6D4C41

Color 3#D84315

Color 4#BF360C

Color 5#FFAB00

Accessibility

Contrast checker

1.8:1Fail

3.1:1AA18

2.5:1Fail

7.3:1AAA

1.8:1Fail

1.7:1Fail

1.4:1Fail

4:1AA18

3.1:1AA18

1.7:1Fail

1.3:1Fail

2.3:1Fail

2.5:1Fail

1.4:1Fail

1.3:1Fail

3:1Fail

7.3:1AAA

4:1AA18

2.3:1Fail

3:1Fail

Similar palettes

More like Fiery Phoenix Ash