Back to palettes

Palette

Starlight Symphony Night

Evokes the quiet grandeur of a clear night sky, filled with distant galaxies and shimmering starlight.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A0D3B#3B2F5B#6A5B9C#B2A9D6#D9D2EC

Palette guide

How to use Starlight Symphony Night

Overview

The Starlight Symphony Night palette evokes the quiet grandeur of a clear night sky, filled with distant galaxies and shimmering starlight. This elegant scheme spans from the deep, mysterious #1A0D3B to the soft, ethereal #D9D2EC. Intermediate shades like the rich #3B2F5B, the harmonious #6A5B9C, and the luminous #B2A9D6 provide a graceful transition. Designers can leverage this palette to create sophisticated and serene digital experiences, from luxury brand websites to artistic portfolios. The clear progression from dark to light allows for dynamic visual storytelling and intuitive content hierarchy. Developers will find these hex codes ideal for crafting elegant dark mode themes, artistic interfaces, or sophisticated editorial layouts that convey a sense of wonder and refined beauty.

Best used for

  • Luxury brand websites and digital campaigns
  • Artistic portfolios and creative platforms
  • High-end fashion or jewelry displays
  • Meditation or mindfulness app designs
  • Elegant event invitations or branding
  • Cosmic-themed educational content

Suggested color roles

primary

Use #1A0D3B as a deep, anchoring background color for main sections or hero images, establishing a luxurious and mysterious atmosphere.

secondary

Apply #3B2F5B for secondary content blocks, card backgrounds, or navigation, offering a rich purple that supports the primary dark tone.

accent

Leverage #6A5B9C for interactive elements, call-to-action buttons, or significant highlights, providing a distinct yet harmonious focal point.

background

The darkest shade, #1A0D3B, is excellent for a profound dark theme. For a lighter, airy background, #D9D2EC provides a clean, ethereal canvas.

text

For text on dark backgrounds like #1A0D3B or #3B2F5B, use #D9D2EC or #B2A9D6 for optimal readability. On light backgrounds like #D9D2EC, a dark charcoal or black is recommended for text.

Accessibility notes

  • Ensure #D9D2EC has sufficient contrast against #1A0D3B for body text, meeting WCAG AA standards.
  • Avoid using #B2A9D6 on #6A5B9C for small text; check contrast ratios carefully to prevent readability issues.
  • For interactive elements, confirm that accent colors like #6A5B9C provide clear visual distinction against their surrounding background.
  • Consider using a darker text color (e.g., black or dark gray) for any text placed on the lightest color #D9D2EC.

Recommended combinations

Night Gradient

Ideal for smooth background gradients, splash screens, or subtle atmospheric effects in digital interfaces.

#1A0D3B · #3B2F5B · #6A5B9C

Starlight Contrast

Excellent for dark mode interfaces where #1A0D3B is the background and lighter shades are used for text and highlights.

#1A0D3B · #B2A9D6 · #D9D2EC

Symphony UI

Suitable for card components, navigation bars, or subtle UI elements that need an elegant, harmonious feel.

#3B2F5B · #6A5B9C · #B2A9D6

CSS variables

:root {
  --starlight-symphony-night-1: #1A0D3B;
  --starlight-symphony-night-2: #3B2F5B;
  --starlight-symphony-night-3: #6A5B9C;
  --starlight-symphony-night-4: #B2A9D6;
  --starlight-symphony-night-5: #D9D2EC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-symphony-night": {
        1: "#1A0D3B",
        2: "#3B2F5B",
        3: "#6A5B9C",
        4: "#B2A9D6",
        5: "#D9D2EC",
      }
    }
  }
}

Related searches

deep purple night paletteelegant cosmic colorsindigo lavender schemeluxury dark UI paletteserene night sky design

Palette colors

Hex values

Color 1#1A0D3B
·
Color 2#3B2F5B
·
Color 3#6A5B9C
·
Color 4#B2A9D6
·
Color 5#D9D2EC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3.1:1AA18
8.2:1AAA
12.3:1AAA
2
1.5:1Fail
2.1:1Fail
5.5:1AA
8.2:1AAA
3
3.1:1AA18
2.1:1Fail
2.7:1Fail
4:1AA18
4
8.2:1AAA
5.5:1AA
2.7:1Fail
1.5:1Fail
5
12.3:1AAA
8.2:1AAA
4:1AA18
1.5:1Fail

Similar palettes

More like Starlight Symphony Night

View all cool
Midnight Aurora Glide
Moonlit Sakura Canopy
Amethyst Cavern Glow
Amethyst Field Dusk
Amethyst Mystic Grotto
Amethyst Sky