Palette

Starlight Deep Nebula

A breathtaking display of deep blues and purples, hinting at the luminous gases of a distant nebula.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#191970#483D8B#6A5ACD#8A2BE2#00CED1

Palette guide

How to use Starlight Deep Nebula

Overview

This "Starlight Deep Nebula" palette evokes cosmic wonder with its deep blues and vibrant purples. Anchored by the profound #191970 and the rich #483D8B, it offers a sophisticated yet energetic foundation. The lighter #6A5ACD and striking #8A2BE2 introduce an ethereal quality, perfect for capturing attention. A brilliant splash of #00CED1 provides a contrasting, almost electric, highlight. Ideal for projects aiming for a futuristic, luxurious, or mystical aesthetic, this palette guides designers in creating depth and visual interest. Developers can leverage its distinct hues to define interactive elements, data visualizations, or immersive UI experiences, ensuring a cohesive and memorable brand identity.

Best used for

Sci-fi game UI/UX
Luxury tech branding
Astrology or spiritual wellness apps
Concert or event promotions
Data visualization dashboards
High-end fashion editorial

Suggested color roles

primary

#191970: Use as the dominant background or primary branding color for a profound, stable base. Excellent for large sections or foundational elements.

secondary

#483D8B: A versatile mid-tone for secondary branding, subheadings, or active states. Provides depth without overwhelming the primary.

accent

#00CED1: Deploy this electric teal sparingly for call-to-action buttons, key data points, or interactive highlights to draw immediate attention.

background

#191970: Serves as a deep, immersive backdrop for dark mode interfaces or cosmic-themed designs, allowing brighter elements to pop.

text

For dark backgrounds like #191970, use a light text color such as pure white (#FFFFFF) or very light grey. For lighter elements, #191970 or #483D8B can provide excellent contrast.

Accessibility notes

Ensure sufficient contrast between #191970 (primary background) and any lighter text or interactive elements (aim for WCAG AA or AAA).
Avoid using #6A5ACD and #8A2BE2 together for small text, as their similar luminance can hinder readability.
When pairing #00CED1 (accent) with any dark background, verify its contrast ratio is high enough for legibility, especially for important information.
Consider using a light text color, like white or a very light grey, against all the darker hues (#191970, #483D8B) for optimal readability.

Recommended combinations

Cosmic Depth

Ideal for creating a sophisticated, layered background or a gradient effect with subtle transitions, evoking deep space.

#191970 · #483D8B · #6A5ACD

Nebula Glow

Perfect for energetic headers, vibrant illustrations, or interactive components that need to stand out with an ethereal glow.

#6A5ACD · #8A2BE2 · #00CED1

Vivid Contrast

Use the deep blue as a base, the teal for strong accents, and the medium purple for supporting elements or secondary text.

#191970 · #00CED1 · #483D8B

CSS variables

:root {
  --starlight-deep-nebula-1: #191970;
  --starlight-deep-nebula-2: #483D8B;
  --starlight-deep-nebula-3: #6A5ACD;
  --starlight-deep-nebula-4: #8A2BE2;
  --starlight-deep-nebula-5: #00CED1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-deep-nebula": {
        1: "#191970",
        2: "#483D8B",
        3: "#6A5ACD",
        4: "#8A2BE2",
        5: "#00CED1",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#483D8B

Color 3#6A5ACD

Color 4#8A2BE2

Color 5#00CED1

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

2.5:1Fail

7.6:1AAA

1.6:1Fail

1.7:1Fail

1.5:1Fail

4.6:1AA

2.8:1Fail

1.7:1Fail

1.1:1Fail

2.7:1Fail

2.5:1Fail

1.5:1Fail

1.1:1Fail

3:1AA18

7.6:1AAA

4.6:1AA

2.7:1Fail

3:1AA18

Similar palettes

More like Starlight Deep Nebula

Celestial Nebula Hues

Cosmic Bloom Nebula

Cosmic Dust Trails