Palette

Midnight Velvet Cosmos

Deep, luxurious blues and purples, capturing the grandeur of a starlit cosmos draped in velvet.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Velvet Cosmos 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 Midnight Velvet Cosmos.

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

Data visualization

#191970#3B3B9B#6A5ACD#8A2BE2#0A0A3A

Palette guide

How to use Midnight Velvet Cosmos

Overview

The Midnight Velvet Cosmos palette evokes the grandeur of a starlit cosmos draped in velvet, featuring a luxurious spectrum of deep blues and purples. With #0A0A3A (deepest cosmic blue) and #191970 (dark navy) as its profound base, it sets an expansive, elegant stage. The palette transitions beautifully through #3B3B9B (mid-blue) and #6A5ACD (medium lavender), culminating in the vibrant #8A2BE2 (blue violet) for stellar highlights. This scheme is ideal for projects seeking to convey sophistication, vastness, and a touch of celestial magic, perfect for astronomy, sci-fi, or high-end tech branding.

Best used for

Astronomy and space exploration websites
Sci-fi game user interfaces (UI)
Luxury travel branding (e.g., night sky tours)
Elegant digital art and cosmic illustrations
Space-themed event promotions and decor
High-end tech product displays and packaging

Suggested color roles

primary

Use #0A0A3A as the foundational deep cosmic blue, creating an immersive, vast, and elegant dark canvas.

secondary

Apply #191970 for content sections, panels, or navigation elements, adding a layer of rich, dark navy depth.

accent

Employ #8A2BE2 for vibrant calls to action, interactive elements, or key highlights that evoke starlight and energy.

background

Choose #0A0A3A for the main background to establish a sophisticated, cosmic, and expansive dark aesthetic.

text

For primary body text, a very light grey or white is recommended. For headings or decorative text, #6A5ACD provides an elegant, readable option on darker backgrounds.

Accessibility notes

Ensure #8A2BE2 provides excellent contrast against #0A0A3A and #191970 for all critical text and interactive elements.
Verify that #6A5ACD, when used for text, meets readability standards on the darkest backgrounds, especially for smaller font sizes.
Avoid using #3B3B9B as text on #191970 due to potential low contrast; reserve it for backgrounds or large decorative elements.
Always test contrast ratios for all text and UI components to ensure WCAG AA compliance across the spectrum of blues and purples.

Recommended combinations

Cosmic Depths

The deepest cosmic blue base with a vibrant blue violet accent and a dark navy for subtle layering, creating a profound, starlit look.

#0A0A3A · #8A2BE2 · #191970

Starlit Hues

A dark navy background with a medium lavender for text and a mid-blue for supporting elements, evoking a celestial glow.

#191970 · #6A5ACD · #3B3B9B

Velvet Horizon

A mid-blue background with a vibrant accent and the deepest cosmic blue for strong, elegant contrast in borders or icons.

#3B3B9B · #8A2BE2 · #0A0A3A

CSS variables

:root {
  --midnight-velvet-cosmos-1: #191970;
  --midnight-velvet-cosmos-2: #3B3B9B;
  --midnight-velvet-cosmos-3: #6A5ACD;
  --midnight-velvet-cosmos-4: #8A2BE2;
  --midnight-velvet-cosmos-5: #0A0A3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-velvet-cosmos": {
        1: "#191970",
        2: "#3B3B9B",
        3: "#6A5ACD",
        4: "#8A2BE2",
        5: "#0A0A3A",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#3B3B9B

Color 3#6A5ACD

Color 4#8A2BE2

Color 5#0A0A3A

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

2.5:1Fail

1.3:1Fail

1.6:1Fail

1.7:1Fail

1.5:1Fail

2:1Fail

2.8:1Fail

1.7:1Fail

1.1:1Fail

3.5:1AA18

2.5:1Fail

1.5:1Fail

1.1:1Fail

3.2:1AA18

1.3:1Fail

2:1Fail

3.5:1AA18

3.2:1AA18

Similar palettes

More like Midnight Velvet Cosmos

View all dark

Midnight Velour Drapes

Midnight Velour Stage

Soft Velvet Drape

Baroque Velvet Plum

Dusky Velvet Drape

Glamorous Velvet Curtain