Back to palettes

Palette

Twilight Garden Path

Soft purples and deep grays capturing the calm, introspective mood of a garden at twilight.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D2B52#5E4B72#7F6C92#A18DAE#C2B2CF

Palette guide

How to use Twilight Garden Path

Overview

The "Twilight Garden Path" palette (ID: twilight-garden-path-2) presents a harmonious gradient of soft purples and deep, muted grays, evoking a calm and introspective mood. From the deep #3D2B52 to the gentle #C2B2CF, this collection is perfect for designers and developers seeking a serene yet sophisticated aesthetic. The mid-tones like #7F6C92 and #A18DAE provide excellent versatility for UI elements and content blocks. This palette excels in creating elegant, mystical, and tranquil digital experiences, branding, or editorial layouts that require a touch of understated magic and calm.

Best used for

  • Spa and wellness brand identities
  • Meditation app interfaces
  • Ethereal event invitations or websites
  • Luxury fashion or beauty e-commerce
  • Art gallery digital platforms
  • Personal blogs with a reflective tone

Suggested color roles

primary

#3D2B52 - Establishes a deep, grounding base for backgrounds or dominant brand elements, offering a sense of depth.

secondary

#5E4B72 - Suitable for secondary navigation, card headers, or prominent UI components, providing smooth transition.

accent

#C2B2CF - Best used for subtle highlights, interactive elements, or light text on darker backgrounds to ensure legibility.

background

#3D2B52 - Creates a rich, immersive dark background, ideal for setting a tranquil and mysterious atmosphere.

text

#C2B2CF - Recommended for primary text on the darkest shades like #3D2B52 or #5E4B72 to achieve good contrast and readability.

Accessibility notes

  • Ensure #C2B2CF text on #3D2B52 or #5E4B72 meets WCAG AA contrast standards for readability.
  • Avoid using adjacent mid-tones like #7F6C92 and #A18DAE for text/background pairings without thorough contrast checking.
  • Consider using a pure white text (e.g., #FFFFFF) for critical information on the deepest purples for maximum impact.
  • Ensure sufficient visual distinction between interactive elements, especially if using similar shades for states.

Recommended combinations

Serene Gradient

Backgrounds or layered elements to create a smooth, twilight-like depth.

#3D2B52 · #5E4B72 · #7F6C92

Mystical Contrast

Light content areas with legible text and deep, grounding accents.

#A18DAE · #C2B2CF · #3D2B52

UI Element Focus

Card elements, buttons, and text for a soft yet defined user interface.

#5E4B72 · #C2B2CF · #7F6C92

CSS variables

:root {
  --twilight-garden-path-2-1: #3D2B52;
  --twilight-garden-path-2-2: #5E4B72;
  --twilight-garden-path-2-3: #7F6C92;
  --twilight-garden-path-2-4: #A18DAE;
  --twilight-garden-path-2-5: #C2B2CF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-garden-path-2": {
        1: "#3D2B52",
        2: "#5E4B72",
        3: "#7F6C92",
        4: "#A18DAE",
        5: "#C2B2CF",
      }
    }
  }
}

Related searches

soft purple grey palettecalm twilight colorsmystical garden themeelegant purple uimuted cool branding

Palette colors

Hex values

Color 1#3D2B52
·
Color 2#5E4B72
·
Color 3#7F6C92
·
Color 4#A18DAE
·
Color 5#C2B2CF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.2:1AA18
6.3:1AA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
3.9:1AA18
3
2.7:1Fail
1.6:1Fail
1.6:1Fail
2.4:1Fail
4
4.2:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
6.3:1AA
3.9:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Twilight Garden Path

View all cool
Twilight Garden Veil
Twilight Garden Serene
Desert Twilight Sky
Glacial Aurora Glimmer
Mystic Forest Fog
Nebula Whispers Soft