Palette

Celestial Night Garden

Deep blues and purples, punctuated by shimmering silver, conjure the elegant mystery of a garden under a starry midnight sky.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E1E5E#5A3A8B#1E5E4E#C7C7E0#1A0A3A

Palette guide

How to use Celestial Night Garden

Overview

The Celestial Night Garden palette weaves together deep purples and blues with a surprising touch of dark teal and a shimmering silver, evoking an elegant and mysterious nocturnal landscape. From the profound #1A0A3A to the rich #2E1E5E, and the intriguing #1E5E4E, it offers a unique blend of cool and sophisticated tones. The light, almost ethereal #C7C7E0 provides a striking contrast. Designers can craft luxurious and enigmatic interfaces, while developers will find these distinct hex codes perfect for creating dark themes that feel both opulent and grounded, ideal for projects seeking a unique, refined aesthetic.

Best used for

High-end jewelry or luxury goods websites
Artistic or creative agency portfolios
Boutique hotel branding
Mysterious game environments or character design
Evening wear fashion labels
Theatrical production design

Suggested color roles

primary

#2E1E5E serves as a deep, elegant purple base for major sections or brand identity.

secondary

#5A3A8B offers a slightly brighter purple, good for headers, sub-sections, or interactive elements.

accent

#C7C7E0 provides a soft, luminous silver-lavender, perfect for delicate highlights, text, or subtle glows. #1E5E4E can be a unique, earthy accent.

background

#1A0A3A creates the deepest, most mysterious backdrop, ensuring other colors pop.

text

Use #C7C7E0 or white for primary text on the dark purple/blue backgrounds.

Accessibility notes

#C7C7E0 provides excellent contrast against #1A0A3A, #2E1E5E, and #5A3A8B for text.
Avoid using #1E5E4E for small text on dark backgrounds; its contrast might be insufficient.
Ensure any interactive elements using #5A3A8B on #2E1E5E backgrounds meet minimum contrast requirements.
Prioritize clear, legible typography, especially when combining the deep, rich colors.

Recommended combinations

Garden Mystery

Ideal for hero sections or dramatic visual displays, contrasting deep darks with a luminous accent.

#1A0A3A · #2E1E5E · #C7C7E0

Enchanted Blend

Excellent for layered UI elements, showcasing a unique blend of purples and a subtle teal.

#2E1E5E · #5A3A8B · #1E5E4E

Silver Bloom

Creates a sophisticated, intriguing look, perfect for highlights or unique data points.

#1A0A3A · #1E5E4E · #C7C7E0

CSS variables

:root {
  --celestial-night-garden-1: #2E1E5E;
  --celestial-night-garden-2: #5A3A8B;
  --celestial-night-garden-3: #1E5E4E;
  --celestial-night-garden-4: #C7C7E0;
  --celestial-night-garden-5: #1A0A3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-night-garden": {
        1: "#2E1E5E",
        2: "#5A3A8B",
        3: "#1E5E4E",
        4: "#C7C7E0",
        5: "#1A0A3A",
      }
    }
  }
}

Hex values

Color 1#2E1E5E

Color 2#5A3A8B

Color 3#1E5E4E

Color 4#C7C7E0

Color 5#1A0A3A

Accessibility

Contrast checker

1.6:1Fail

1.9:1Fail

8.7:1AAA

1.3:1Fail

1.6:1Fail

1.1:1Fail

5.3:1AA

2.1:1Fail

1.9:1Fail

1.1:1Fail

4.6:1AA

2.4:1Fail

8.7:1AAA

5.3:1AA

4.6:1AA

11:1AAA

1.3:1Fail

2.1:1Fail

2.4:1Fail

11:1AAA

Similar palettes

More like Celestial Night Garden

Twilight Bloom Garden

Cathedral Stained Glass

Cobblestone Alley Night