Palette

Moonlit Shadow Path

Navigates the elusive beauty of a forest path bathed in the pale, cool light of the moon.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Shadow 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 Moonlit Shadow Path.

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

Data visualization

#0C0C1E#1E1E3F#3A3A6F#6B6BBF#C1C1F0

Palette guide

How to use Moonlit Shadow Path

Overview

The Moonlit Shadow Path palette navigates the elusive beauty of a forest path bathed in the pale, cool light of the moon, offering a dramatic and mysterious collection of deep blues and purples. Ranging from the profound #0C0C1E and #1E1E3F to the evocative #3A3A6F, #6B6BBF, and the luminous #C1C1F0, this palette is perfect for designers creating immersive, dark-themed interfaces or branding that conveys intrigue and sophistication. Its strong contrast capabilities ensure readability while maintaining a rich, atmospheric aesthetic. Developers will find these colors ideal for building engaging dark mode experiences.

Best used for

Dark mode UI/UX for applications and websites
Mystery novel covers and promotional materials
Gothic or fantasy game interfaces
Night photography and astrophotography portfolios
Immersive digital art installations
Science fiction or cosmic-themed branding

Suggested color roles

primary

Utilize #1E1E3F as a profound primary for main content areas or navigation, setting a deep and mysterious tone.

secondary

Apply #3A3A6F for supporting elements, subheadings, or background panels, offering a slightly lighter, yet still deep, blue.

accent

The luminous #C1C1F0 serves as a powerful accent for interactive elements, calls-to-action, or highlights that need to pop dramatically.

background

For an ultimate dark and immersive background, #0C0C1E is ideal. #1E1E3F can be used for slightly less intense dark sections.

text

White or the lightest shade #C1C1F0 provides excellent readability on the darkest colors like #0C0C1E and #1E1E3F. Use #6B6BBF for headings on darker shades.

Accessibility notes

Prioritize high contrast for text, especially when using lighter shades like #C1C1F0 for text on darker backgrounds to meet WCAG standards.
The darkest colors, #0C0C1E and #1E1E3F, offer optimal contrast for white or very light text.
Ensure interactive elements have sufficient contrast and clear focus states, as the palette's depth can obscure subtle visual cues.
Avoid using mid-tones like #3A3A6F for small text on dark backgrounds without careful contrast checking.

Recommended combinations

Deep Abyss

Ideal for dramatic headers, hero sections, or dark mode backgrounds where the lightest blue creates a striking focal point.

#0C0C1E · #1E1E3F · #C1C1F0

Mystic Glow

Perfect for subtle gradients, layered UI elements, or illustrations that require depth and an ethereal light effect.

#3A3A6F · #6B6BBF · #C1C1F0

Shadowed Path

Use for robust navigation, footers, or branding elements that need a sophisticated, deep blue presence with subtle progression.

#1E1E3F · #3A3A6F · #6B6BBF

CSS variables

:root {
  --moonlit-shadow-path-1: #0C0C1E;
  --moonlit-shadow-path-2: #1E1E3F;
  --moonlit-shadow-path-3: #3A3A6F;
  --moonlit-shadow-path-4: #6B6BBF;
  --moonlit-shadow-path-5: #C1C1F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-shadow-path": {
        1: "#0C0C1E",
        2: "#1E1E3F",
        3: "#3A3A6F",
        4: "#6B6BBF",
        5: "#C1C1F0",
      }
    }
  }
}

Hex values

Color 1#0C0C1E

Color 2#1E1E3F

Color 3#3A3A6F

Color 4#6B6BBF

Color 5#C1C1F0

Accessibility

Contrast checker

1.2:1Fail

1.9:1Fail

4.1:1AA18

11.2:1AAA

1.2:1Fail

1.5:1Fail

3.4:1AA18

9.3:1AAA

1.9:1Fail

1.5:1Fail

2.2:1Fail

6:1AA