Palette

Starlight Velvet Night

A deep, luxurious palette capturing the profound beauty of a velvet night sky studded with distant stars.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#191970#4B0082#C0C0C0#F8F8F8

Palette guide

How to use Starlight Velvet Night

Overview

The Starlight Velvet Night palette offers a deep, luxurious scheme that captures the profound beauty of a velvet night sky studded with distant stars. Anchored by the absolute darkness of #0A0A0A and featuring the rich navy of #191970, this palette transitions to the regal purple of #4B0082. The luminous #C0C0C0 and the near-white #F8F8F8 provide brilliant contrast, mimicking shimmering starlight. Designers can leverage this palette to create exceptionally elegant and dramatic digital experiences, perfect for high-end brands or artistic projects. The stark contrast between deep darks and bright lights ensures strong visual impact and clear hierarchy. Developers will find these hex codes ideal for crafting sophisticated dark mode interfaces, luxury product showcases, or impactful editorial designs that demand attention.

Best used for

Luxury brand websites and digital campaigns
High-end fashion or jewelry e-commerce
Art gallery or museum digital platforms
Dramatic movie or game title screens
Elegant event branding and invitations
Photography portfolios with a dark, moody aesthetic

Suggested color roles

primary

Utilize #0A0A0A as the ultimate background for a truly velvet night feel, ideal for hero sections or full-screen experiences.

secondary

Apply #191970 for secondary content blocks, navigation bars, or subtle background textures, providing depth without overwhelming.

accent

Leverage #4B0082 for call-to-action buttons, key interactive elements, or striking headlines, providing a rich, regal highlight.

background

The darkest shade, #0A0A0A, serves as an excellent primary dark background. For a slightly softer dark, #191970 can be used.

text

For text on #0A0A0A or #191970, use #F8F8F8 or #C0C0C0 for optimal readability and a luminous effect. On #F8F8F8, a dark charcoal or black is suitable.

Accessibility notes

Ensure #F8F8F8 has high contrast against #0A0A0A and #191970 for all body text, meeting WCAG AAA standards.
Be cautious using #C0C0C0 on #4B0082 for small text; verify contrast ratios for sufficient readability.
For interactive elements, confirm that #4B0082 provides clear visual distinction against its surrounding dark background.
Avoid placing #191970 directly next to #4B0082 without sufficient contrast or a clear visual separator for distinct elements.

Recommended combinations

Deep Cosmos

Ideal for creating layered, dark backgrounds or subtle depth in complex UI components, evoking mystery and luxury.

#0A0A0A · #191970 · #4B0082

Starry Contrast

Excellent for dark mode interfaces where #0A0A0A is the background and lighter shades are used for text and luminous highlights.

#0A0A0A · #C0C0C0 · #F8F8F8

Regal Night

Great for illustrating progression or hierarchy in data visualizations, or for elegant decorative elements in a dark theme.

#191970 · #4B0082 · #C0C0C0

CSS variables

:root {
  --starlight-velvet-night-1: #0A0A0A;
  --starlight-velvet-night-2: #191970;
  --starlight-velvet-night-3: #4B0082;
  --starlight-velvet-night-4: #C0C0C0;
  --starlight-velvet-night-5: #F8F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-velvet-night": {
        1: "#0A0A0A",
        2: "#191970",
        3: "#4B0082",
        4: "#C0C0C0",
        5: "#F8F8F8",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#191970

Color 3#4B0082

Color 4#C0C0C0

Color 5#F8F8F8

Accessibility

Contrast checker

1.3:1Fail

1.5:1Fail

10.9:1AAA

18.6:1AAA

1.3:1Fail

1.1:1Fail

8.2:1AAA

14:1AAA

1.5:1Fail

1.1:1Fail

7.1:1AAA

12.2:1AAA