Back to palettes

Palette

Twilight Garden Path

Deep purples and subtle greys evoke the tranquil and mysterious ambiance of a garden at twilight.

darkdark5 colors
More dark 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

#483D8B#6A5ACD#9370DB#800080#2F4F4F

Palette guide

How to use Twilight Garden Path

Overview

The "Twilight Garden Path" palette (ID: twilight-garden-path) offers a rich and mysterious blend of deep purples and a subtle dark slate gray, ideal for designers and developers crafting tranquil yet impactful experiences. Anchored by the profound #483D8B and accented by the vibrant #800080, this palette captures the essence of a garden at dusk. The inclusion of #2F4F4F provides a grounding, earthy contrast. With #6A5ACD and #9370DB offering versatile mid-tones, it's perfect for creating sophisticated UIs, elegant branding, or atmospheric digital content that requires depth, mystique, and a touch of regal charm.

Best used for

  • High-end event branding
  • Fantasy or mystery game aesthetics
  • Art and culture websites
  • Luxury product packaging
  • Elegant dark mode applications
  • Creative portfolio sites

Suggested color roles

primary

#483D8B - A commanding dark purple, excellent for main backgrounds, headers, or dominant brand identity elements.

secondary

#6A5ACD - Provides a slightly lighter purple for secondary sections, navigation, or interactive elements.

accent

#800080 - A vibrant, true purple for striking call-to-actions, highlight text, or key graphical elements.

background

#2F4F4F - A deep, dark slate gray that offers a strong, neutral foundation, especially good for content blocks.

text

#9370DB - A lighter purple that provides good contrast for body text on the darkest shades like #2F4F4F or #483D8B.

Accessibility notes

  • Ensure #9370DB text on #2F4F4F or #483D8B meets WCAG AA contrast standards.
  • The vibrant #800080 should be used cautiously for text, especially small text, against mid-tones; check contrast carefully.
  • For critical information or very small text, consider using a near-white (e.g., #F0F0F0) on the darkest backgrounds.
  • Maintain sufficient color difference between interactive elements and their default states.

Recommended combinations

Deep Garden

Primary website background, content panel, and subtle interactive elements.

#483D8B · #2F4F4F · #6A5ACD

Mystic Highlight

Dark background with a bold accent color and readable text.

#2F4F4F · #800080 · #9370DB

Elegant UI

Layered UI components from cards to buttons, offering depth and clarity.

#6A5ACD · #9370DB · #483D8B

CSS variables

:root {
  --twilight-garden-path-1: #483D8B;
  --twilight-garden-path-2: #6A5ACD;
  --twilight-garden-path-3: #9370DB;
  --twilight-garden-path-4: #800080;
  --twilight-garden-path-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-garden-path": {
        1: "#483D8B",
        2: "#6A5ACD",
        3: "#9370DB",
        4: "#800080",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

deep purple dark palettemysterious garden colorsnight theme purple greyelegant dark ui paletteroyal purple color scheme

Palette colors

Hex values

Color 1#483D8B
·
Color 2#6A5ACD
·
Color 3#9370DB
·
Color 4#800080
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.4:1Fail
1:1Fail
1:1Fail
2
1.7:1Fail
1.4:1Fail
1.8:1Fail
1.7:1Fail
3
2.4:1Fail
1.4:1Fail
2.5:1Fail
2.4:1Fail
4
1:1Fail
1.8:1Fail
2.5:1Fail
1.1:1Fail
5
1:1Fail
1.7:1Fail
2.4:1Fail
1.1:1Fail

Similar palettes

More like Twilight Garden Path

View all dark
Midnight Bloom Shadow
Amethyst Cavern Deep
Celestial Night Bloom
Cosmic Dust Whisper
Cosmic Reaches
Cosmic Veil Wonder