Back to palettes

Palette

Celestial Twilight Garden

Deep, magical purples and soft lavenders create the enchanting mood of a starlit garden at dusk.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0A1E#2C1A4A#5A3A7D#8C6A9E#B7A3CD

Palette guide

How to use Celestial Twilight Garden

Overview

The "Celestial Twilight Garden" palette creates the enchanting mood of a starlit garden at dusk with deep, magical purples and soft lavenders. Starting with the profound #0F0A1E, it transitions through the rich #2C1A4A and #5A3A7D, then brightens with the luminous #8C6A9E, culminating in the ethereal #B7A3CD. This dark, yet mystical and serene palette is perfect for designs that aim to convey depth, wonder, and a touch of otherworldly calm. Developers can utilize these shades for immersive dark mode interfaces, while designers can craft captivating branding or digital art that feels both vast and intimately detailed, evoking a quiet cosmic wonder.

Best used for

  • Fantasy game environments
  • Mystical branding and websites
  • Luxury event invitations
  • Spiritual or contemplative apps
  • Dreamy digital art illustrations
  • Sophisticated app backgrounds

Suggested color roles

primary

#0F0A1E - The core deep background, providing an immersive and sophisticated foundation.

secondary

#2C1A4A - Use for secondary panels, card backgrounds, or to define sections in a dark interface.

accent

#B7A3CD - The lightest shade, perfect for glowing highlights, icons, or to draw attention to key interactive elements.

background

#0F0A1E - The main background, creating a vast, dark, and mysterious cosmic aesthetic.

text

#B7A3CD - Excellent for primary text on dark backgrounds like #0F0A1E or #2C1A4A, ensuring high readability and a clean look.

Accessibility notes

  • Text in #B7A3CD on #0F0A1E provides high contrast, ensuring good readability for all text.
  • Ensure #8C6A9E text on #2C1A4A has sufficient contrast for WCAG AA compliance, especially for smaller fonts.
  • Avoid using #5A3A7D for small or critical text on #2C1A4A as contrast might be borderline.
  • Use #B7A3CD for interactive elements to ensure they are easily discoverable against darker shades.

Recommended combinations

Twilight Depths

Creates a classic dark mode look with bright, readable text and clear hierarchy.

#0F0A1E · #2C1A4A · #B7A3CD

Garden Glow

Excellent for smooth, cosmic gradients in backgrounds, headers, or digital art.

#2C1A4A · #5A3A7D · #8C6A9E

Mystic Light

Use the lighter shades for detailed illustrations or subtle UI highlights against the deep background.

#0F0A1E · #8C6A9E · #B7A3CD

CSS variables

:root {
  --celestial-twilight-garden-1: #0F0A1E;
  --celestial-twilight-garden-2: #2C1A4A;
  --celestial-twilight-garden-3: #5A3A7D;
  --celestial-twilight-garden-4: #8C6A9E;
  --celestial-twilight-garden-5: #B7A3CD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-twilight-garden": {
        1: "#0F0A1E",
        2: "#2C1A4A",
        3: "#5A3A7D",
        4: "#8C6A9E",
        5: "#B7A3CD",
      }
    }
  }
}

Related searches

dark purple garden palettecelestial twilight colorsmystical lavender huesdeep purple dark modeserene cosmic theme

Palette colors

Hex values

Color 1#0F0A1E
·
Color 2#2C1A4A
·
Color 3#5A3A7D
·
Color 4#8C6A9E
·
Color 5#B7A3CD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.2:1Fail
4.3:1AA18
8.4:1AAA
2
1.3:1Fail
1.7:1Fail
3.5:1AA18
6.7:1AA
3
2.2:1Fail
1.7:1Fail
2:1Fail
3.9:1AA18
4
4.3:1AA18
3.5:1AA18
2:1Fail
2:1Fail
5
8.4:1AAA
6.7:1AA
3.9:1AA18
2:1Fail

Similar palettes

More like Celestial Twilight Garden

View all dark
Lunar Petals
Twilight Lily Pond
Verdant Nocturne Spell
Astral Bloom Vision
Aurora Borealis Dream
Celestial Altar Stone