Palette

Twilight Bramble Path

Deep, mysterious purples and muted berries, like the shadowed edges of a bramble path at twilight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C182B#4E2D4A#7D4C75#B479AA#DDCAD3

Palette guide

How to use Twilight Bramble Path

Overview

The Twilight Bramble Path palette evokes the deep, mysterious purples and muted berries found along shadowed paths at twilight. Anchored by the profound #2C182B (Deep Berry-Black) and supported by #4E2D4A (Dark Plum), this scheme creates a moody and intriguing atmosphere. The lighter hues, including #7D4C75 (Rich Berry) and #B479AA (Muted Berry Pink), alongside the ethereal #DDCAD3 (Pale Mauve-Grey), add layers of subtle mystery. This palette is genuinely useful for designers and developers crafting dark mode UIs, gothic or fantasy game environments, or mysterious brand identities, offering a sophisticated and evocative visual experience.

Best used for

Dark mode UI themes for applications
Gothic or fantasy game design elements
Mysterious brand identities and logos
Luxury packaging with a dark aesthetic
Event branding for evening galas
Artistic photography with deep shadows

Suggested color roles

primary

Utilize #2C182B (Deep Berry-Black) as a foundational, mysterious primary color for main backgrounds or headers.

secondary

Apply #4E2D4A (Dark Plum) for supportive content areas, subheadings, or background textures that add depth.

accent

Introduce #B479AA (Muted Berry Pink) as a subtle highlight for interactive elements, icons, or delicate details.

background

Employ #DDCAD3 (Pale Mauve-Grey) for soft contrast backgrounds, simulating an ethereal mist or light source.

text

For dark backgrounds, use #DDCAD3 or white. For lighter backgrounds, #2C182B or a dark charcoal provides excellent readability.

Accessibility notes

The light #B479AA on #DDCAD3 will have insufficient contrast for readable text.
Ensure text on #2C182B and #4E2D4A is very light (e.g., white or #DDCAD3) to meet contrast standards.
The lighter tones (#B479AA, #DDCAD3) require dark text (e.g., #2C182B) for legibility.
Maintain strong contrast for interactive elements, especially in dark mode interfaces, for optimal usability.

Recommended combinations

Deep Forest

Creates a strong, mysterious base with a deep mid-tone and a soft, bramble-like accent.

#2C182B · #4E2D4A · #B479AA

Shadow & Light

Offers a dramatic contrast between deep darks, rich purple, and a pale, ethereal light.

#2C182B · #7D4C75 · #DDCAD3

Bramble Bloom

Combines a darker purple with a muted berry highlight and a soft, mist-like background.

#4E2D4A · #B479AA · #DDCAD3

CSS variables

:root {
  --twilight-bramble-path-1: #2C182B;
  --twilight-bramble-path-2: #4E2D4A;
  --twilight-bramble-path-3: #7D4C75;
  --twilight-bramble-path-4: #B479AA;
  --twilight-bramble-path-5: #DDCAD3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-bramble-path": {
        1: "#2C182B",
        2: "#4E2D4A",
        3: "#7D4C75",
        4: "#B479AA",
        5: "#DDCAD3",
      }
    }
  }
}

Hex values

Color 1#2C182B

Color 2#4E2D4A

Color 3#7D4C75

Color 4#B479AA

Color 5#DDCAD3

Accessibility

Contrast checker

1.4:1Fail

2.5:1Fail

4.9:1AA

10.6:1AAA

1.4:1Fail

1.8:1Fail

3.5:1AA18

7.5:1AAA

2.5:1Fail

1.8:1Fail

2:1Fail

4.3:1AA18

4.9:1AA

3.5:1AA18

2:1Fail

2.2:1Fail

10.6:1AAA

7.5:1AAA

4.3:1AA18

2.2:1Fail

Similar palettes

More like Twilight Bramble Path

View all dark

Gothic Charm

Ancient Forest Depths