Back to palettes

Palette

Starry Night Velvet

Deep indigos and velvety purples shimmer like distant nebulae against a dark cosmic canvas.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0E2A#2F0F4E#5E237C#9A4B7D#CC7E94

Palette guide

How to use Starry Night Velvet

Overview

The 'Starry Night Velvet' palette features deep indigos and velvety purples that shimmer like distant nebulae against a dark cosmic canvas. Starting with the profound #0A0E2A, it transitions through rich #2F0F4E, vibrant #5E237C, and warm #9A4B7D, ending with the soft rose #CC7E94. This palette offers designers and developers a mystical and elegant foundation, ideal for creating immersive and visually captivating digital experiences. It's perfectly suited for projects that aim to evoke a sense of wonder, luxury, and artistic flair.

Best used for

  • Creative portfolios and art websites
  • Mystical branding and packaging
  • Fashion design and e-commerce
  • Event invitations and marketing
  • Artistic game environments
  • Luxury product presentations

Suggested color roles

primary

Utilize #0A0E2A as the deep, mysterious base for primary backgrounds or large content blocks.

secondary

Apply #2F0F4E for supporting sections, card backgrounds, or subtle shadow effects.

accent

Reserve #5E237C for vibrant calls-to-action, key icons, or focal points that need to stand out.

background

The deepest #0A0E2A is ideal for a truly dark, immersive background canvas.

text

For optimal readability on dark backgrounds, use #CC7E94 or a bright white. For lighter elements, use #0A0E2A.

Accessibility notes

  • Ensure #CC7E94 and #9A4B7D have sufficient contrast when used as text on backgrounds, especially lighter ones.
  • #CC7E94 provides a soft contrast against the deepest colors, ideal for headers or decorative accents.
  • Avoid using mid-tones like #5E237C as text on similar backgrounds (e.g., #2F0F4E) without checking contrast.
  • Use a very light text color (e.g., white or #F5F5F5) for optimal legibility on #0A0E2A and #2F0F4E backgrounds.

Recommended combinations

Nebula Depths

A dark gradient ideal for creating cosmic depth in backgrounds or layered UI elements.

#0A0E2A · #2F0F4E · #5E237C

Velvet Glow

A transition from deep purple to a softer magenta, perfect for highlighting content or visual flow.

#2F0F4E · #5E237C · #9A4B7D

Stardust Touch

Combines a deep background with a warm mid-tone and a soft light accent for elegant compositions.

#0A0E2A · #9A4B7D · #CC7E94

CSS variables

:root {
  --starry-night-velvet-1: #0A0E2A;
  --starry-night-velvet-2: #2F0F4E;
  --starry-night-velvet-3: #5E237C;
  --starry-night-velvet-4: #9A4B7D;
  --starry-night-velvet-5: #CC7E94;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-velvet": {
        1: "#0A0E2A",
        2: "#2F0F4E",
        3: "#5E237C",
        4: "#9A4B7D",
        5: "#CC7E94",
      }
    }
  }
}

Related searches

mystical purple palettedeep indigo colorsvelvet night themecosmic nebula colorselegant dark branding

Palette colors

Hex values

Color 1#0A0E2A
·
Color 2#2F0F4E
·
Color 3#5E237C
·
Color 4#9A4B7D
·
Color 5#CC7E94
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.8:1Fail
3.3:1AA18
6.3:1AA
2
1.2:1Fail
1.5:1Fail
2.8:1Fail
5.4:1AA
3
1.8:1Fail
1.5:1Fail
1.8:1Fail
3.5:1AA18
4
3.3:1AA18
2.8:1Fail
1.8:1Fail
1.9:1Fail
5
6.3:1AA
5.4:1AA
3.5:1AA18
1.9:1Fail

Similar palettes

More like Starry Night Velvet

View all dark
Galactic Starlight Veil
Astral Dream Hues
Celestial Starry Veil
Celestial Whisper Nebula
Cosmic Drama Scene
Cosmic Violets