Back to palettes

Palette

Gothic Garden Nocturne

Deep, velvety purples and blacks evoking a mysterious, overgrown gothic garden at night.

Darkdark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Garden Nocturne 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 Gothic Garden Nocturne.

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

Data visualization

#2A2A2A#4D0D2A#7A1E4B#1A0A1F#3A0A3A

Palette guide

How to use Gothic Garden Nocturne

Overview

The Gothic Garden Nocturne palette offers a deeply mysterious and sophisticated feel, perfect for projects requiring a touch of dark elegance. Featuring rich, velvety tones like the deep charcoal #2A2A2A and the profound almost-black #1A0A1F, it sets a somber yet intriguing foundation. Accents of dark magenta #4D0D2A, lush plum #7A1E4B, and a muted purple #3A0A3A add depth and a subtle hint of color, reminiscent of an overgrown, moonlit garden. This palette is ideal for evoking a sense of ancient beauty, nocturnal mystery, and luxurious darkness, providing designers with a powerful tool for impactful visual storytelling.

Best used for

  • High-end fashion branding
  • Dark mode UI themes
  • Mystical or fantasy game interfaces
  • Luxury product packaging
  • Theatrical set design
  • Gothic-themed event invitations

Suggested color roles

primary

#1A0A1F (A deep, almost-black base for large areas, evoking profound darkness and mystery.)

secondary

#2A2A2A (A sophisticated dark gray for secondary sections, providing contrast without harshness.)

accent

#7A1E4B (A rich plum that stands out against the dark background, perfect for calls to action or key elements.)

background

#1A0A1F (The darkest shade, ideal for creating an immersive, nocturnal backdrop.)

text

#7A1E4B (For headings or decorative text, providing a luxurious, readable pop. For body text, consider a very light gray or white for contrast on dark backgrounds.)

Accessibility notes

  • Ensure sufficient contrast for all text against backgrounds; #7A1E4B on #1A0A1F will likely fail for small text.
  • Use lighter text colors like white or light gray for body content on #1A0A1F or #2A2A2A backgrounds.
  • Reserve the brighter #7A1E4B for larger display text or interactive elements to maintain readability.
  • Test color combinations with accessibility checkers to meet WCAG guidelines, especially for interactive elements.

Recommended combinations

Mystic Base

Foundation for dark interfaces, using the plum as a highlight for interactive elements.

#1A0A1F · #2A2A2A · #7A1E4B

Velvet Depths

Creates a rich, layered gradient effect for backgrounds or large graphic elements.

#4D0D2A · #3A0A3A · #2A2A2A

Nocturne Accent

A striking combination for headers, footers, and brand accents, emphasizing depth with color.

#1A0A1F · #7A1E4B · #4D0D2A

CSS variables

:root {
  --gothic-garden-nocturne-1: #2A2A2A;
  --gothic-garden-nocturne-2: #4D0D2A;
  --gothic-garden-nocturne-3: #7A1E4B;
  --gothic-garden-nocturne-4: #1A0A1F;
  --gothic-garden-nocturne-5: #3A0A3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-garden-nocturne": {
        1: "#2A2A2A",
        2: "#4D0D2A",
        3: "#7A1E4B",
        4: "#1A0A1F",
        5: "#3A0A3A",
      }
    }
  }
}

Related searches

dark gothic palettemysterious color schemedeep purple black colorsluxurious dark designnocturnal garden aesthetic

Palette colors

Hex values

Color 1#2A2A2A
·
Color 2#4D0D2A
·
Color 3#7A1E4B
·
Color 4#1A0A1F
·
Color 5#3A0A3A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.4:1Fail
1.3:1Fail
1.1:1Fail
2
1:1Fail
1.5:1Fail
1.3:1Fail
1.1:1Fail
3
1.4:1Fail
1.5:1Fail
1.9:1Fail
1.6:1Fail
4
1.3:1Fail
1.3:1Fail
1.9:1Fail
1.2:1Fail
5
1.1:1Fail
1.1:1Fail
1.6:1Fail
1.2:1Fail

Similar palettes

More like Gothic Garden Nocturne

View all Dark
Arid Dusk Hues
Midnight Ocean Depths
Rainy City Nights
Volcanic Glass Beach
Abyssal Light Organism
Deep Sea Lumen