Palette

Galactic Nebula

A striking contrast of dark cosmic depths against fiery, distant star clouds.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#1C0D2F#5F0F40#9A031E#FB8B24

Palette guide

How to use Galactic Nebula

Overview

The Galactic Nebula palette offers a stunning contrast of deep cosmic hues with fiery, energetic accents, perfect for creating dramatic and engaging designs. Featuring true black #000000, a profound deep purple #1C0D2F, a rich magenta #5F0F40, a bold fiery red #9A031E, and a vibrant orange #FB8B24, this palette evokes mystery and excitement. Designers and developers can leverage its powerful contrasts to highlight key information or create captivating visual journeys. It's an ideal choice for projects aiming for a futuristic, adventurous, or high-impact aesthetic, ensuring elements stand out with dynamic energy against a dark, expansive backdrop.

Best used for

Sci-fi game interfaces and branding
Dramatic event promotions and posters
Dark mode applications with vibrant accents
Digital art and fantasy illustrations
Energetic website headers and landing pages
Luxury product showcases with a cosmic theme

Suggested color roles

primary

Use #1C0D2F as the dominant background or main color for large sections, establishing a deep, mysterious base.

secondary

Apply #5F0F40 for sub-sections, navigation, or supporting graphics to add depth and a touch of warmth.

accent

Deploy #FB8B24 for calls to action, interactive elements, or crucial highlights to draw immediate attention.

background

Utilize #000000 or #1C0D2F for immersive, dark backgrounds that make brighter elements pop dramatically.

text

Pair a crisp white or #FB8B24 for primary text on dark backgrounds to ensure high readability and visual impact.

Accessibility notes

Ensure #FB8B24 and white text have sufficient contrast on #000000 or #1C0D2F backgrounds (WCAG AA standard).
Avoid using #5F0F40 on #1C0D2F for small body text, as contrast may be insufficient for readability.
Use #9A031E and #FB8B24 for larger headings or important alerts to maximize visibility.
Provide alternative text for color-dependent information, especially when contrasting colors like #5F0F40 and #9A031E are used together.

Recommended combinations

Deep Space Fire

Ideal for main layouts, showcasing a deep dark base with a striking, warm accent for key information.

#000000 · #1C0D2F · #FB8B24

Cosmic Ember

Excellent for gradients or layered elements, creating a transition from deep purple to fiery red.

#1C0D2F · #5F0F40 · #9A031E

Nebula Glow

Perfect for vibrant graphical elements, icons, or illustrations that require high energy and visual pop.

#5F0F40 · #9A031E · #FB8B24

CSS variables

:root {
  --galactic-nebula-1: #000000;
  --galactic-nebula-2: #1C0D2F;
  --galactic-nebula-3: #5F0F40;
  --galactic-nebula-4: #9A031E;
  --galactic-nebula-5: #FB8B24;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "galactic-nebula": {
        1: "#000000",
        2: "#1C0D2F",
        3: "#5F0F40",
        4: "#9A031E",
        5: "#FB8B24",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#1C0D2F

Color 3#5F0F40

Color 4#9A031E

Color 5#FB8B24

Accessibility

Contrast checker

1.1:1Fail

1.6:1Fail

2.4:1Fail

8.8:1AAA

1.1:1Fail

1.4:1Fail

2.1:1Fail

7.7:1AAA

1.6:1Fail

1.4:1Fail

1.5:1Fail

5.4:1AA