Palette

Solar Flare Radiance

Fiery reds and bold oranges burst forth, depicting the intense energy of a solar flare.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Solar Flare Radiance 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 Solar Flare Radiance.

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

Data visualization

#FFD700#FFA500#FF4500#DC143C#8B0000

Palette guide

How to use Solar Flare Radiance

Overview

The Solar Flare Radiance palette captures the intense energy of a solar flare with its fiery reds and bold oranges. Dominated by the brilliant #FFD700, the warm #FFA500, and the striking #FF4500, this palette exudes vibrancy and power. Deepened by the rich #DC143C and the profound #8B0000, it offers a robust range for dramatic visual statements. This collection is ideal for designers aiming to create high-energy, passionate, or visually arresting experiences. Its capacity to convey urgency and excitement makes it perfect for impactful digital campaigns or dynamic brand identities. Developers can leverage these colors for compelling UI elements, progress indicators, or immersive themed applications where a strong, radiant presence is key to user engagement and message delivery.

Best used for

High-energy event branding and promotions
Sports and competitive gaming aesthetics
Warning systems and critical alerts
Food and beverage packaging (spicy, vibrant)
Automotive design and marketing
Dynamic digital advertising campaigns

Suggested color roles

primary

Use #FFD700 for highlights and primary calls-to-action, leveraging its brightness to draw attention.

secondary

Deploy #FF4500 for supporting elements or strong accents that need to stand out with intensity.

accent

Apply #FFA500 for interactive elements or visual transitions, offering a warmer, energetic accent.

background

Utilize #8B0000 or #DC143C for powerful, deep backgrounds that provide excellent contrast for lighter text and elements.

text

For readability, use white or a very light gray on #8B0000 or #DC143C. Conversely, #8B0000 works well for text on #FFD700.

Accessibility notes

Ensure sufficient contrast for text placed on vibrant backgrounds like #FFD700, #FFA500, and #FF4500; dark text is often necessary.
White text will typically have excellent contrast on #DC143C and #8B0000.
Avoid using #FFA500 on #FFD700 for critical text due to potential low contrast.
Always test color combinations with a WCAG contrast checker for optimal accessibility.

Recommended combinations

Radiant Alert

Excellent for urgent alerts or warnings: #FF4500 as the main indicator, #FFD700 for a glow effect, and #8B0000 for surrounding context or text.

#FFD700 · #FF4500 · #8B0000

Energetic Flow

Creates a dynamic, energetic gradient or layered effect for banners and hero images, transitioning smoothly from orange to deep red.

#FFA500 · #FF4500 · #DC143C

Bold Statement

A powerful combination for branding: #8B0000 as a strong background or primary color, with #FFD700 for headlines and #FFA500 for secondary details.

#8B0000 · #FFD700 · #FFA500

CSS variables

:root {
  --solar-flare-radiance-1: #FFD700;
  --solar-flare-radiance-2: #FFA500;
  --solar-flare-radiance-3: #FF4500;
  --solar-flare-radiance-4: #DC143C;
  --solar-flare-radiance-5: #8B0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "solar-flare-radiance": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF4500",
        4: "#DC143C",
        5: "#8B0000",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FFA500

Color 3#FF4500

Color 4#DC143C

Color 5#8B0000

Accessibility

Contrast checker

1.4:1Fail

2.5:1Fail

3.6:1AA18

7.1:1AAA

1.4:1Fail

1.7:1Fail

2.5:1Fail

5.1:1AA

2.5:1Fail

1.7:1Fail

1.5:1Fail

2.9:1Fail

3.6:1AA18

2.5:1Fail

1.5:1Fail

2:1Fail

7.1:1AAA

5.1:1AA

2.9:1Fail

2:1Fail

Similar palettes

More like Solar Flare Radiance

Solar Flare Radiance

See it in context.

Ready when you are.

Built with Solar Flare Radiance.

How to use Solar Flare Radiance

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Radiant Alert

Energetic Flow

Bold Statement

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Solar Flare Radiance