Palette

Velvet Starry Night

Deep indigos and midnight blues accented with subtle purples, like a luxurious velvet fabric under the vast, star-filled sky.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A1F#1F1F47#3D3D6A#6A6ABE#B4B4DE

Palette guide

How to use Velvet Starry Night

Overview

The Velvet Starry Night palette evokes a sense of luxurious depth and cosmic elegance, perfect for projects requiring a sophisticated, dark aesthetic. Dominated by deep indigos and rich blues, it moves from the near-black #0A0A1F to the dark indigo of #1F1F47, offering a solid foundation for immersive interfaces. The subtle transition to #3D3D6A and the more vibrant #6A6ABE introduces a touch of mysterious purple, reminiscent of a twilight sky. Finally, the soft #B4B4DE provides a gentle, starlit highlight, ensuring readability and visual interest. This palette is ideal for creating designs that feel both profound and refined, offering excellent contrast opportunities for both light and dark text against its varied blues and purples.

Best used for

Luxury brand websites and digital experiences
High-end mobile application dark modes
Elegant event invitations and branding
Editorial design for arts and culture publications
Theatrical or cinematic mood setting
Sophisticated user interfaces for professional tools

Suggested color roles

primary

#1F1F47 - Use this deep indigo as the foundational background for main sections or large UI blocks, establishing the palette's rich, dark mood.

secondary

#3D3D6A - Ideal for secondary backgrounds, card elements, or prominent headers, providing a subtle shift in depth from the primary.

accent

#6A6ABE - Apply this muted blue-purple to interactive elements like buttons, links, or crucial data points to draw attention without being overly bright.

background

#0A0A1F - Employ this near-black as the deepest background layer for the overall canvas or for subtle shadow effects, enhancing the sense of vastness.

text

#B4B4DE - Use this light lavender for primary body text against the darker blues, ensuring excellent readability and a soft, elegant contrast. For very large headings, white or #B4B4DE can work.

Accessibility notes

Ensure sufficient contrast when using #B4B4DE text on #3D3D6A backgrounds; always test carefully for AA/AAA compliance.
Reserve #0A0A1F for backgrounds or large, bold headings with very light text (like white or #B4B4DE) due to its extreme darkness.
The combination of #6A6ABE for interactive elements and #1F1F47 for backgrounds generally offers good contrast for UI accessibility.
Avoid using #3D3D6A for small body text on #1F1F47 backgrounds; opt for #B4B4DE or pure white for better legibility.

Recommended combinations

Deep & Elegant

Perfect for a stark, luxurious dark mode interface. Use #0A0A1F for the deepest background, #1F1F47 for content cards, and #B4B4DE for primary text and subtle highlights.

#0A0A1F · #1F1F47 · #B4B4DE

Subtle Contrast

Ideal for creating depth and hierarchy within a dark theme. #1F1F47 as main background, #3D3D6A for secondary panels, and #6A6ABE for interactive elements or subheadings.

#1F1F47 · #3D3D6A · #6A6ABE

Starlit Accent

Leverage the deep background of #0A0A1F, use #6A6ABE for prominent call-to-actions, and #B4B4DE for key information or subtle decorative elements.

#0A0A1F · #6A6ABE · #B4B4DE

CSS variables

:root {
  --velvet-starry-night-1: #0A0A1F;
  --velvet-starry-night-2: #1F1F47;
  --velvet-starry-night-3: #3D3D6A;
  --velvet-starry-night-4: #6A6ABE;
  --velvet-starry-night-5: #B4B4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-starry-night": {
        1: "#0A0A1F",
        2: "#1F1F47",
        3: "#3D3D6A",
        4: "#6A6ABE",
        5: "#B4B4DE",
      }
    }
  }
}

Hex values

Color 1#0A0A1F

Color 2#1F1F47

Color 3#3D3D6A

Color 4#6A6ABE

Color 5#B4B4DE

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

4.1:1AA18

9.8:1AAA

1.3:1Fail

1.5:1Fail

3.3:1AA18

7.8:1AAA

1.9:1Fail

1.5:1Fail

2.1:1Fail

5.1:1AA

4.1:1AA18

3.3:1AA18

2.1:1Fail

2.4:1Fail

9.8:1AAA

7.8:1AAA

5.1:1AA

2.4:1Fail

Similar palettes

More like Velvet Starry Night

View all dark

Midnight Velvet Dusk

Midnight Velvet Starry

Cosmic Drama Scene

Cosmic Painter's Canvas

Crimson Canopy Twilight

Dark Sapphire Elegance