Back to palettes

Palette

Solar Flare Burst

An explosive palette capturing the intense, radiant energy of a solar flare against a dark cosmic backdrop.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F44336#FF9800#FFC107#FDD835#333333

Palette guide

How to use Solar Flare Burst

Overview

The "Solar Flare Burst" palette combines vibrant reds and yellows with a grounding dark charcoal, evoking the intense energy of a solar event against a cosmic backdrop. Featuring the bold #F44336 (red), the bright #FDD835 (yellow), and the solid #333333 (charcoal), this palette offers high contrast and dynamic impact for designers and developers. It's perfectly suited for projects requiring a powerful visual statement, where clarity and energy are paramount. The balance between fiery hues and a deep neutral allows for striking visual hierarchy and modern aesthetics.

Best used for

  • Space-themed applications and websites
  • Energetic tech startup branding
  • Bold presentations and infographics
  • Warning labels and safety signage
  • Gaming UI and immersive experiences
  • Automotive and industrial design interfaces

Suggested color roles

primary

Use #F44336 for strong calls to action, critical alerts, or dominant brand elements that demand immediate attention.

secondary

Apply #FF9800 for supporting content, subheadings, or secondary interactive elements, adding warmth and approachability.

accent

Leverage #FDD835 for brilliant highlights, interactive states, or small icons that need to pop with vibrant energy.

background

The deep #333333 provides an excellent, high-contrast canvas for the bright reds and yellows to truly burst.

text

White or #FDD835 text works beautifully on #333333. For #FDD835 or #FFC107 backgrounds, use #333333 or black text.

Accessibility notes

  • Ensure sufficient contrast for text on bright yellow (#FDD835, #FFC107) backgrounds by using dark text (e.g., #333333).
  • White text on #F44336, #FF9800, and #333333 should meet WCAG AA contrast standards.
  • Avoid using similar bright yellow/orange hues for text and background without careful contrast checking.
  • The #333333 background provides excellent contrast for most vibrant colors in this palette, aiding readability.

Recommended combinations

Cosmic Contrast

Creates a dramatic and bold visual, ideal for hero sections or striking brand statements.

#333333 · #F44336 · #FDD835

Fiery Spectrum

Offers an intense, energetic progression, suitable for vibrant content blocks or gradients.

#F44336 · #FF9800 · #FFC107

Bright Warning

Generates clear, attention-grabbing alerts or interactive elements against a dark background.

#FFC107 · #FDD835 · #333333

CSS variables

:root {
  --solar-flare-burst-3-1: #F44336;
  --solar-flare-burst-3-2: #FF9800;
  --solar-flare-burst-3-3: #FFC107;
  --solar-flare-burst-3-4: #FDD835;
  --solar-flare-burst-3-5: #333333;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "solar-flare-burst-3": {
        1: "#F44336",
        2: "#FF9800",
        3: "#FFC107",
        4: "#FDD835",
        5: "#333333",
      }
    }
  }
}

Related searches

red yellow black palettesolar system colorsenergetic UI designdark mode vibrant colorsbold tech branding

Palette colors

Hex values

Color 1#F44336
·
Color 2#FF9800
·
Color 3#FFC107
·
Color 4#FDD835
·
Color 5#333333
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.3:1Fail
2.6:1Fail
3.4:1AA18
2
1.7:1Fail
1.3:1Fail
1.5:1Fail
5.9:1AA
3
2.3:1Fail
1.3:1Fail
1.2:1Fail
7.8:1AAA
4
2.6:1Fail
1.5:1Fail
1.2:1Fail
9.1:1AAA
5
3.4:1AA18
5.9:1AA
7.8:1AAA
9.1:1AAA

Similar palettes

More like Solar Flare Burst

View all vibrant