Palette

Velvet Midnight Sky

Deep, velvety blues and purples capture the luxurious depth of a moonless, star-dusted night sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C363F#414D6B#687AA8#3E4C5E#1E2733

Palette guide

How to use Velvet Midnight Sky

Overview

The Velvet Midnight Sky palette captures the luxurious depth of a moonless, star-dusted night sky with its profound blues and subtle grays. Anchored by the nearly black #1E2733 and the deep #2C363F, it provides an exceptionally strong and stable foundation. Progressing through the rich #3E4C5E and #414D6B, it culminates in the softer #687AA8, which offers a gentle, atmospheric highlight. This palette is invaluable for designers and developers aiming to create serene, sophisticated, and immersive digital experiences that evoke tranquility, elegance, and the vastness of the night, perfect for various high-end applications.

Best used for

Astronomy or space-themed websites
Meditation and sleep apps
Luxury tech product interfaces
Sophisticated dark mode UI
High-end travel or resort branding
Relaxation and wellness platforms

Suggested color roles

primary

Use #1E2733, the deepest, almost black-blue, for main backgrounds, headers, or large structural elements, establishing profound depth.

secondary

Apply #2C363F, a dark blue-gray, excellent for navigation, secondary panels, or card backgrounds.

accent

Employ #687AA8, a lighter, soft blue, perfect for subtle highlights, interactive elements, or delicate iconography, mimicking distant stars.

background

Utilize #3E4C5E, a mid-tone dark blue, suitable for content areas, offering a serene and legible canvas.

text

Consider #414D6B, a slightly lighter dark blue, good for secondary text or captions on even darker backgrounds. For primary text, use white or light gray.

Accessibility notes

For text on #1E2733, #2C363F, #3E4C5E, and #414D6B, always use white or a very light gray for optimal readability.
#687AA8 will require dark text (e.g., black or a very dark blue) for sufficient contrast, especially for smaller font sizes.
Avoid pairing #414D6B with #3E4C5E for small text due to potential contrast issues, affecting legibility.
Ensure all interactive elements meet WCAG AA contrast requirements against their backgrounds for an accessible user experience.

Recommended combinations

Starry Depths

Deepest darks with a soft blue highlight, perfect for conveying vastness and calm in hero sections or dramatic visuals.

#1E2733 · #2C363F · #687AA8

Twilight Hues

Mid-tone blues for content, with the darkest blue for strong headings or structural elements.

#3E4C5E · #414D6B · #1E2733

Celestial Glow

Dark background with a prominent lighter blue and a supporting mid-tone for a serene and elegant feel in layered designs.

#2C363F · #687AA8 · #414D6B

CSS variables

:root {
  --velvet-midnight-sky-1: #2C363F;
  --velvet-midnight-sky-2: #414D6B;
  --velvet-midnight-sky-3: #687AA8;
  --velvet-midnight-sky-4: #3E4C5E;
  --velvet-midnight-sky-5: #1E2733;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-midnight-sky": {
        1: "#2C363F",
        2: "#414D6B",
        3: "#687AA8",
        4: "#3E4C5E",
        5: "#1E2733",
      }
    }
  }
}

Hex values

Color 1#2C363F

Color 2#414D6B

Color 3#687AA8

Color 4#3E4C5E

Color 5#1E2733

Accessibility

Contrast checker

1.5:1Fail

2.9:1Fail

1.4:1Fail

1.2:1Fail

1.5:1Fail

2:1Fail

1:1Fail

1.8:1Fail

2.9:1Fail

2:1Fail

2.1:1Fail

3.5:1AA18

1.4:1Fail

1:1Fail

2.1:1Fail

1.7:1Fail

1.2:1Fail

1.8:1Fail

3.5:1AA18

1.7:1Fail

Similar palettes

More like Velvet Midnight Sky

View all dark

Velvet Starry Night

Celestial Night Sky

Cosmic Starlight Gaze

Deep Sapphire Grotto

Midnight Bloom Veil

Midnight Forest Velvet