Palette

Velvet Stardust Night

Deep indigo and dark blues infused with distant starlight, like a luxurious velvet night sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Velvet Stardust Night 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 Velvet Stardust Night.

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

Data visualization

#05051A#1C1C3E#3A3A75#6C6CCF#B0B0F0

Palette guide

How to use Velvet Stardust Night

Overview

The Velvet Stardust Night palette offers a deep, luxurious journey into dark indigos and cosmic blues, perfect for evoking mystery and elegance. Anchored by the profound depth of #05051A and #1C1C3E, it transitions smoothly through the rich #3A3A75 to the luminous #6C6CCF, culminating in the ethereal glow of #B0B0F0. This celestial collection provides a sophisticated foundation for digital interfaces and branding that aim for a dreamy yet powerful aesthetic. Designers can leverage its inherent contrast and cool tones to create immersive experiences, while developers will appreciate the clear hierarchical possibilities. It's ideal for projects requiring a touch of cosmic wonder and refined darkness.

Best used for

High-end tech product interfaces (apps, websites)
Luxury brand identity and packaging
Space-themed game UI or digital art
Dreamy photography portfolio websites
E-commerce platforms for jewelry or art
Dark mode themes for productivity tools

Suggested color roles

primary

#1C1C3E - A deep, enveloping indigo, excellent for main content areas or primary brand elements where a sophisticated dark tone is desired.

secondary

#3A3A75 - A slightly lighter, rich indigo, perfect for secondary sections, navigation backgrounds, or prominent cards to add depth without overwhelming.

accent

#B0B0F0 - A soft, luminous periwinkle that acts as a beacon. Ideal for interactive elements, highlights, or subtle celestial details.

background

#05051A - The darkest, near-black indigo, providing a profound, infinite backdrop that allows lighter elements to truly pop and create a dramatic effect.

text

#B0B0F0 or a very light gray/white - For most body text, #B0B0F0 offers excellent readability against the darker backgrounds. For headings, #6C6CCF can provide impact.

Accessibility notes

Ensure sufficient contrast between #05051A or #1C1C3E backgrounds and #B0B0F0 text to meet WCAG AA standards for readability.
Use #6C6CCF judiciously for smaller text; it might require a larger font size to pass contrast ratios on darker backgrounds.
Avoid using #3A3A75 as text on #1C1C3E or vice-versa, as their similar luminance can hinder readability.
Always test color combinations with accessibility checkers, especially for interactive elements and form inputs.

Recommended combinations

Cosmic Depth

For a high-contrast, dramatic layout where #05051A is the main background, #1C1C3E defines sections, and #B0B0F0 highlights key information or calls to action.

#05051A · #1C1C3E · #B0B0F0

Starlight Glow

A softer, gradient-like transition for interfaces where depth and subtle hierarchy are important, using #6C6CCF for interactive elements.

#1C1C3E · #3A3A75 · #6C6CCF

Nebula Accent

An elegant combination for dark themes, with #05051A as the deep base, #3A3A75 for secondary content, and #B0B0F0 as a bright, ethereal accent for icons or status indicators.

#05051A · #3A3A75 · #B0B0F0

CSS variables

:root {
  --velvet-stardust-night-1: #05051A;
  --velvet-stardust-night-2: #1C1C3E;
  --velvet-stardust-night-3: #3A3A75;
  --velvet-stardust-night-4: #6C6CCF;
  --velvet-stardust-night-5: #B0B0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-stardust-night": {
        1: "#05051A",
        2: "#1C1C3E",
        3: "#3A3A75",
        4: "#6C6CCF",
        5: "#B0B0F0",
      }
    }
  }
}

Hex values

Color 1#05051A

Color 2#1C1C3E

Color 3#3A3A75

Color 4#6C6CCF

Color 5#B0B0F0

Accessibility

Contrast checker

1.2:1Fail

2:1Fail

4.5:1AA18

9.9:1AAA

1.2:1Fail

1.6:1Fail

3.6:1AA18

8:1AAA

2:1Fail

1.6:1Fail

2.3:1Fail

5.1:1AA

4.5:1AA18

3.6:1AA18

2.3:1Fail

2.2:1Fail

9.9:1AAA

8:1AAA

5.1:1AA

2.2:1Fail

Similar palettes

More like Velvet Stardust Night