Palette

Phoenix Ember Flight

Inspired by the legendary phoenix, a vibrant spectrum of reds and golds symbolizing rebirth and fiery spirit.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Phoenix Ember Flight 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 Phoenix Ember Flight.

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

Data visualization

#B22222#DC143C#FF4500#FFD700#FFECB3

Palette guide

How to use Phoenix Ember Flight

Overview

The Phoenix Ember Flight palette is a dynamic and energetic collection, embodying the mythical bird's fiery spirit and rebirth. It features a spectrum of intense reds, from the deep #B22222 (Firebrick) and vivid #DC143C (Crimson) to the bright #FF4500 (Orange Red), creating a powerful gradient of warmth. These fiery tones are beautifully complemented by the radiant #FFD700 (Gold) and a soft, glowing #FFECB3 (Light Goldenrod Yellow), mimicking the embers and light of a rising phoenix. This palette is ideal for projects requiring high energy, passion, and a sense of transformation or celebration.

Best used for

Sports team branding and merchandise
Energetic event promotions
Gaming interfaces and character design
Automotive industry marketing
Warning or alert systems (with care)
Personal development or motivational content

Suggested color roles

primary

Use #B22222 (Firebrick) as a strong, passionate base for large sections, conveying power and intensity.

secondary

Employ #FF4500 (Orange Red) for calls-to-action, active states, or key interactive elements to draw immediate attention.

accent

Apply #FFD700 (Gold) sparingly for achievements, premium features, or decorative highlights to add a touch of prestige and gleam.

background

A very pale cream, a soft grey, or #FFECB3 (Light Goldenrod Yellow) for a warm, inviting canvas.

text

For dark backgrounds like #B22222, use #FFD700 or a crisp white. For lighter backgrounds, a deep charcoal or #B22222 provides strong readability.

Accessibility notes

Many red-on-red or red-on-orange combinations will have poor contrast; use high contrast for text.
#FFD700 or #FFECB3 against #B22222 or #DC143C usually provides good contrast for larger text.
Avoid using #FF4500 directly on #FFD700 for small text.
Be mindful of colorblind users, as red/green deficiencies can impact perception of these fiery tones.

Recommended combinations

Fiery Impact

Ideal for hero sections, prominent calls-to-action, or dynamic headings.

#B22222 · #FF4500 · #FFD700

Ember Glow

Soften the intensity for backgrounds, illustrations, or secondary content areas.

#DC143C · #FFECB3 · #B22222

Phoenix Rise

Excellent for highlights, icons, or progress indicators, symbolizing energy and progression.

#FFD700 · #FF4500 · #DC143C

CSS variables

:root {
  --phoenix-ember-flight-1: #B22222;
  --phoenix-ember-flight-2: #DC143C;
  --phoenix-ember-flight-3: #FF4500;
  --phoenix-ember-flight-4: #FFD700;
  --phoenix-ember-flight-5: #FFECB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "phoenix-ember-flight": {
        1: "#B22222",
        2: "#DC143C",
        3: "#FF4500",
        4: "#FFD700",
        5: "#FFECB3",
      }
    }
  }
}

Hex values

Color 1#B22222

Color 2#DC143C

Color 3#FF4500

Color 4#FFD700

Color 5#FFECB3

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

4.8:1AA

5.7:1AA

1.3:1Fail

1.5:1Fail

3.6:1AA18

4.3:1AA18

1.9:1Fail

1.5:1Fail

2.5:1Fail

2.9:1Fail

4.8:1AA

3.6:1AA18

2.5:1Fail

1.2:1Fail

5.7:1AA

4.3:1AA18

2.9:1Fail

1.2:1Fail

Similar palettes

More like Phoenix Ember Flight

Erupting Volcanic Heat