Back to palettes

Palette

Starlit Night Garden

Deep, rich blues and soft purples evoke the quiet mystery of a garden under a starlit sky.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlit Night Garden 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 Starlit Night Garden.

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

Data visualization

#1E2A4A#3B4B70#6C7DA8#A0A5BF#D0D2E0

Palette guide

How to use Starlit Night Garden

Overview

The Starlit Night Garden palette evokes the quiet mystery of a garden under a starlit sky, blending deep, rich blues and soft purples. This elegant scheme spans from the profound #1E2A4A to the ethereal #D0D2E0. Intermediate shades like the rich #3B4B70, the harmonious #6C7DA8, and the luminous #A0A5BF 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, perfect for a tranquil yet engaging aesthetic.

Best used for

  • Elegant wedding or event planning websites
  • Luxury home decor or garden design brands
  • Artistic portfolios and creative platforms
  • Meditation or mindfulness app designs
  • Sophisticated editorial layouts
  • Nature-themed digital art or illustrations

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

For text on dark backgrounds like #1E2A4A or #3B4B70, use #D0D2E0 or #A0A5BF for optimal readability. On light backgrounds like #D0D2E0, a dark charcoal or black is recommended for text.

Accessibility notes

  • Ensure #D0D2E0 has sufficient contrast against #1E2A4A for body text, meeting WCAG AA standards.
  • Avoid using #A0A5BF on #6C7DA8 for small text; check contrast ratios carefully to prevent readability issues.
  • For interactive elements, confirm that accent colors like #6C7DA8 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 #D0D2E0.

Recommended combinations

Garden Depths

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

#1E2A4A · #3B4B70 · #6C7DA8

Starlit Contrast

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

#1E2A4A · #A0A5BF · #D0D2E0

Elegant UI

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

#3B4B70 · #6C7DA8 · #A0A5BF

CSS variables

:root {
  --starlit-night-garden-1: #1E2A4A;
  --starlit-night-garden-2: #3B4B70;
  --starlit-night-garden-3: #6C7DA8;
  --starlit-night-garden-4: #A0A5BF;
  --starlit-night-garden-5: #D0D2E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlit-night-garden": {
        1: "#1E2A4A",
        2: "#3B4B70",
        3: "#6C7DA8",
        4: "#A0A5BF",
        5: "#D0D2E0",
      }
    }
  }
}

Related searches

dark blue gray paletteelegant night garden colorsstarlit serene designluxury dark UI palettetranquil blue purple theme

Palette colors

Hex values

Color 1#1E2A4A
·
Color 2#3B4B70
·
Color 3#6C7DA8
·
Color 4#A0A5BF
·
Color 5#D0D2E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.5:1AA18
5.8:1AA
9.4:1AAA
2
1.6:1Fail
2.1:1Fail
3.6:1AA18
5.8:1AA
3
3.5:1AA18
2.1:1Fail
1.7:1Fail
2.7:1Fail
4
5.8:1AA
3.6:1AA18
1.7:1Fail
1.6:1Fail
5
9.4:1AAA
5.8:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Starlit Night Garden

View all dark
Celestial Night Garden
Midnight Bloom Garden
Midnight Geode Crystal
Midnight Velour Stage
Midnight Velvet Dusk
Velvet Starry Night