Palette

Nebula Starfield

Dark, mystical shades punctuated by the faint glow of distant stars and nebulae in the vast cosmos.

DarkDark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A10#2C0F4A#673AB7#D1C4E9#FFF8E1

Palette guide

How to use Nebula Starfield

Overview

The Nebula Starfield palette masterfully captures the vast cosmos, blending profound darks with the ethereal glow of distant stars. It begins with the nearly black #0A0A10, transitioning into the deep purple of #2C0F4A. The vibrant #673AB7 introduces a celestial energy, while #D1C4E9 and the luminous #FFF8E1 represent starlight piercing the void. This palette is perfect for designers creating immersive, mystical digital experiences, sophisticated branding, or any project requiring a blend of deep mystery and subtle brilliance. Its distinct contrast steps allow for clear visual hierarchy and captivating atmospheric effects across various platforms.

Best used for

Space-themed websites and applications
Luxury product showcases
High-tech company branding
Immersive game environments
Mystical or spiritual content platforms
Dark mode UI for creative tools

Suggested color roles

primary

#0A0A10 - The deepest, almost absolute black, ideal for expansive backgrounds, containers, or primary structural elements, providing a true cosmic void.

secondary

#2C0F4A - A rich, dark purple excellent for secondary content blocks, navigation bars, or subtle shadow effects, adding depth and mystery.

accent

#673AB7 - A vibrant and captivating purple, perfect for calls-to-action, interactive elements, or key visual highlights that need to shine like a distant star.

background

#0A0A10 - Use this profound shade as the main backdrop to establish a dark, immersive, and luxurious atmosphere, allowing lighter elements to truly glimmer.

text

#FFF8E1 - For primary body text and headlines, providing exceptional contrast and readability against the dark backgrounds, resembling distant starlight.

Accessibility notes

Ensure #FFF8E1 text on #0A0A10 or #2C0F4A backgrounds meets WCAG AAA contrast ratios.
Avoid using #D1C4E9 for small text on #673AB7 as contrast might be insufficient.
#673AB7 is a strong accent, but pair with #FFF8E1 text for optimal accessibility on interactive elements.
Always verify contrast for text and interactive elements, especially with mid-range purples.

Recommended combinations

Cosmic Void

Ideal for dark mode UI, using the darkest for background and the lightest for primary text.

#0A0A10 · #2C0F4A · #FFF8E1

Nebula Glow

Create dynamic gradients for hero sections or layered atmospheric illustrations, evoking a soft transition.

#2C0F4A · #673AB7 · #D1C4E9

Star Dust

Use the darkest as a backdrop, #673AB7 for headings, and #FFF8E1 for key information or accents.

#0A0A10 · #673AB7 · #FFF8E1

CSS variables

:root {
  --nebula-starfield-1: #0A0A10;
  --nebula-starfield-2: #2C0F4A;
  --nebula-starfield-3: #673AB7;
  --nebula-starfield-4: #D1C4E9;
  --nebula-starfield-5: #FFF8E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nebula-starfield": {
        1: "#0A0A10",
        2: "#2C0F4A",
        3: "#673AB7",
        4: "#D1C4E9",
        5: "#FFF8E1",
      }
    }
  }
}

Hex values

Color 1#0A0A10

Color 2#2C0F4A

Color 3#673AB7

Color 4#D1C4E9

Color 5#FFF8E1

Accessibility

Contrast checker

1.2:1Fail

2.7:1Fail

12:1AAA

18.6:1AAA

1.2:1Fail

2.2:1Fail

10:1AAA

15.5:1AAA

2.7:1Fail

2.2:1Fail

4.5:1AA18

6.9:1AA

12:1AAA

10:1AAA

4.5:1AA18

1.5:1Fail

18.6:1AAA

15.5:1AAA

6.9:1AA

1.5:1Fail

Similar palettes

More like Nebula Starfield