Palette

Winter Moonlit Path

Dark, cool grays and pale blues capture the crisp, serene silence of a forest path under a winter moon.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2E42#4F5570#7B85A1#ABBCCB#E2E8EE

Palette guide

How to use Winter Moonlit Path

Overview

The Winter Moonlit Path palette captures the crisp, serene silence of a forest path under a winter moon, blending deep, cool grays with pale, luminous blues. From the profound #2B2E42 to the bright #E2E8EE, with sophisticated mid-tones like #4F5570 and #7B85A1, this palette is ideal for creating designs with a mysterious yet elegant appeal. Designers can leverage the darker shades for impactful backgrounds, providing a sense of depth and luxury, while the lighter tones offer excellent contrast for text and interactive elements. This palette is particularly effective for dark mode interfaces, luxury branding, or any project aiming for a sophisticated, atmospheric, and modern aesthetic.

Best used for

Dark mode UI/UX design and interfaces
Luxury branding and high-end product showcases
Creative portfolios and artistic websites
Atmospheric game design and digital art
Sophisticated web themes and app designs
Winter-themed events or editorial content

Suggested color roles

primary

Use #2B2E42 for dominant backgrounds, dark headers, or primary elements, providing a deep, luxurious feel.

secondary

Apply #4F5570 for secondary sections, panels, or subtle gradients, adding depth without harshness.

accent

Highlight with #ABBCCB for active states, subtle borders, or informational icons, offering a soft luminous contrast.

background

Choose #2B2E42 or #4F5570 for dark, immersive backgrounds, creating a sophisticated and atmospheric canvas.

text

For body text, use #E2E8EE or white for optimal readability and a striking contrast against darker backgrounds.

Accessibility notes

Ensure sufficient contrast for light text on dark backgrounds; all combinations in this palette should be checked.
Pair #E2E8EE or #ABBCCB with #2B2E42 or #4F5570 for excellent readability on darker elements.
Avoid using #7B85A1 for small text on #4F5570 without careful contrast checks; it might be too subtle.
Utilize ample whitespace or padding around text elements to enhance legibility in dark mode interfaces.

Recommended combinations

Dark Mode Card

Design a dark mode card: #4F5570 for the card background, #E2E8EE for the title, and #ABBCCB for supporting text.

#4F5570 · #E2E8EE · #ABBCCB

Moonlit Navigation

Create a navigation bar: #2B2E42 for the background, #ABBCCB for active links, and #7B85A1 for inactive links.

#2B2E42 · #ABBCCB · #7B85A1

Atmospheric Button

Design an atmospheric button: #7B85A1 for the button background, #E2E8EE for the text, and #4F5570 for the hover state.

#7B85A1 · #E2E8EE · #4F5570

CSS variables

:root {
  --winter-moonlit-path-1: #2B2E42;
  --winter-moonlit-path-2: #4F5570;
  --winter-moonlit-path-3: #7B85A1;
  --winter-moonlit-path-4: #ABBCCB;
  --winter-moonlit-path-5: #E2E8EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-moonlit-path": {
        1: "#2B2E42",
        2: "#4F5570",
        3: "#7B85A1",
        4: "#ABBCCB",
        5: "#E2E8EE",
      }
    }
  }
}

Hex values

Color 1#2B2E42

Color 2#4F5570

Color 3#7B85A1

Color 4#ABBCCB

Color 5#E2E8EE

Accessibility

Contrast checker

1.8:1Fail

3.6:1AA18

6.9:1AA

10.8:1AAA

1.8:1Fail

2:1Fail

3.8:1AA18

5.9:1AA

3.6:1AA18

2:1Fail

1.9:1Fail

3:1Fail

6.9:1AA

3.8:1AA18

1.9:1Fail

1.6:1Fail

10.8:1AAA

5.9:1AA

3:1Fail

1.6:1Fail

Similar palettes

More like Winter Moonlit Path

View all dark

Deep Winter Storm

Moonlit Garden Gloom

Winter Solstice Night

Celestial Deep Blue

Celestial Night Bloom

City After Hours