Palette

Fiery Nebula Rift

A dramatic burst of deep reds and oranges, mimicking the intense, chaotic beauty of a distant cosmic rift.

darkenergetic5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fiery Nebula Rift 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 Nebula Rift.

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

Data visualization

#3B0000#8A1A00#CC4A00#FF8000#FFC066

Palette guide

How to use Fiery Nebula Rift

Overview

The 'Fiery Nebula Rift' palette presents a dramatic burst of deep reds and oranges, mimicking the intense, chaotic beauty of a distant cosmic rift. Starting with an almost black deep crimson (#3B0000), it brightens through rich, earthy red-orange (#8A1A00) and vibrant orange (#CC4A00), culminating in a brilliant, glowing orange (#FF8000) and a soft, luminous peach (#FFC066). This palette creates a sense of cosmic grandeur and fiery energy, perfect for designers and developers aiming for designs that are both mysterious and vibrantly captivating, evoking distant galaxies and stellar phenomena.

Best used for

Space-themed games and sci-fi interfaces
Sci-fi book covers and cinematic title sequences
Dark mode interfaces with energetic accents
Cosmic event promotions and digital art
Luxury branding with a mysterious edge
Dramatic website backgrounds and hero images

Suggested color roles

primary

#3B0000 for deep, expansive backgrounds or foundational elements, setting a cosmic tone.

secondary

#8A1A00 for subtle depth, borders, or secondary information panels, adding warmth.

accent

#FF8000 or #FFC066 for stellar highlights, interactive elements, and glowing effects.

background

#3B0000 for a truly dark, immersive experience that allows lighter colors to pop.

text

Use #FFC066 or white for readability on dark backgrounds, or #3B0000 on lighter accents like #FFC066.

Accessibility notes

#FFC066 and #FF8000 are essential for text readability on darker backgrounds like #3B0000 or #8A1A00.
Ensure sufficient contrast for all interactive elements, especially against the dark background colors.
Avoid using #CC4A00 text on #FF8000 due to insufficient contrast, particularly for small text.
For body text, stick to high-contrast combinations like white on #3B0000 for optimal legibility.

Recommended combinations

Cosmic Glow

A dark space background with bright, distant light and ethereal highlights.

#3B0000 · #FF8000 · #FFC066

Rift Highlight

A vibrant gradient for energy effects, progress bars, or dynamic visual elements.

#8A1A00 · #CC4A00 · #FF8000

UI Elements

Dark buttons with bright text and vibrant hover states for an engaging interface.

#3B0000 · #FFC066 · #CC4A00

CSS variables

:root {
  --fiery-nebula-rift-1: #3B0000;
  --fiery-nebula-rift-2: #8A1A00;
  --fiery-nebula-rift-3: #CC4A00;
  --fiery-nebula-rift-4: #FF8000;
  --fiery-nebula-rift-5: #FFC066;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-nebula-rift": {
        1: "#3B0000",
        2: "#8A1A00",
        3: "#CC4A00",
        4: "#FF8000",
        5: "#FFC066",
      }
    }
  }
}

Hex values

Color 1#3B0000

Color 2#8A1A00

Color 3#CC4A00

Color 4#FF8000

Color 5#FFC066

Accessibility

Contrast checker

1.9:1Fail

3.8:1AA18

7:1AAA

10.9:1AAA

1.9:1Fail

2:1Fail

3.7:1AA18

5.8:1AA

3.8:1AA18

2:1Fail

1.8:1Fail

2.9:1Fail

7:1AAA

3.7:1AA18

1.8:1Fail

1.6:1Fail

10.9:1AAA

5.8:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Fiery Nebula Rift