Back to palettes

Palette

Enchanted Forest Night

Deep, muted blues and greys evoke the tranquil mystery of a moonlit forest.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Enchanted Forest Night 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 Enchanted Forest Night.

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

Data visualization

#1A2F3A#3A4B58#5A6774#7E8994#A6AFB8

Palette guide

How to use Enchanted Forest Night

Overview

The Enchanted Forest Night palette evokes the tranquil mystery of a moonlit forest with its deep, muted blues and greys. Ranging from the profound #1A2F3A to the softer #A6AFB8, this collection is perfect for designers and developers crafting sophisticated, dark mode interfaces or luxury branding. It offers a sense of elegance, depth, and quiet contemplation, making it ideal for evening event themes, mystery narratives, or any project requiring a refined and atmospheric aesthetic. The subtle shifts in tone provide visual interest without sacrificing serenity.

Best used for

  • Luxury and sophisticated branding
  • Dark mode user interfaces
  • Evening event themes and invitations
  • Mystery and thriller novel covers
  • Architectural visualizations
  • High-end fashion websites

Suggested color roles

primary

Use #1A2F3A as a commanding primary color for backgrounds, headers, or main content blocks in a dark theme.

secondary

Apply #3A4B58 for supportive dark blue-grey elements, offering depth without being overly heavy.

accent

Introduce #7E8994 as a soft, atmospheric highlight for subtle calls-to-action or decorative details.

background

Utilize #A6AFB8 as a light, airy backdrop for text or lighter content. For a true dark theme, use #1A2F3A.

text

White or a very light grey offers excellent contrast on #1A2F3A, #3A4B58, and #5A6774. Use #1A2F3A for text on #A6AFB8.

Accessibility notes

  • White text on #1A2F3A provides optimal contrast for headings and body text in dark mode.
  • Ensure sufficient contrast when using #7E8994 on #A6AFB8; aim for larger font sizes or decorative usage.
  • Avoid using dark text on any color darker than #7E8994 to maintain readability.
  • The palette offers a good range for dark mode, but always test text legibility across all chosen pairings.

Recommended combinations

Deep Night

Ideal for a primary dark mode layout, creating depth and guiding the eye with subtle contrast.

#1A2F3A · #3A4B58 · #7E8994

Moonlit Glow

Use for lighter sections or elements where a soft, ethereal illumination is desired against darker content.

#A6AFB8 · #7E8994 · #3A4B58

Subtle Contrast

Employ for visual hierarchy, using the mid-tone for content blocks and the lightest/darkest for text/background.

#5A6774 · #1A2F3A · #A6AFB8

CSS variables

:root {
  --enchanted-forest-night-1: #1A2F3A;
  --enchanted-forest-night-2: #3A4B58;
  --enchanted-forest-night-3: #5A6774;
  --enchanted-forest-night-4: #7E8994;
  --enchanted-forest-night-5: #A6AFB8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "enchanted-forest-night": {
        1: "#1A2F3A",
        2: "#3A4B58",
        3: "#5A6774",
        4: "#7E8994",
        5: "#A6AFB8",
      }
    }
  }
}

Related searches

dark forest color schememoonlit palette designmysterious blue grey UIsophisticated night themedeep atmospheric colors

Palette colors

Hex values

Color 1#1A2F3A
·
Color 2#3A4B58
·
Color 3#5A6774
·
Color 4#7E8994
·
Color 5#A6AFB8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
3.9:1AA18
6.2:1AA
2
1.5:1Fail
1.6:1Fail
2.5:1Fail
4.1:1AA18
3
2.4:1Fail
1.6:1Fail
1.6:1Fail
2.6:1Fail
4
3.9:1AA18
2.5:1Fail
1.6:1Fail
1.6:1Fail
5
6.2:1AA
4.1:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Enchanted Forest Night

View all dark