Palette

Moonlit Pine Shadows

Deep blues and greens capture the serene mystery of a pine forest under the soft, cool glow of moonlight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Pine Shadows 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 Pine Shadows.

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

Data visualization

#0F252E#2B4C56#4E737B#7CA2A9#B6C9CC

Palette guide

How to use Moonlit Pine Shadows

Overview

The Moonlit Pine Shadows palette captures the serene mystery of a forest under a soft, cool moonlight, blending deep blues and subtle greens. Ranging from the profound #0F252E, evoking deep shadows, through the rich #2B4C56 and the earthy #4E737B, to the lighter, misty #7CA2A9 and #B6C9CC, this collection offers a grounding yet ethereal feel. It's perfectly suited for designs that aim to convey tranquility, natural beauty, and a touch of enigmatic charm. This palette is excellent for branding, web design, or editorial content seeking a sophisticated, earthy, and calming visual identity.

Best used for

Eco-conscious brand identities
Nature-inspired home decor
Outdoor adventure gear marketing
Wellness and mindfulness apps
Documentary film titles or branding
Sophisticated cafe or restaurant interiors

Suggested color roles

primary

#2B4C56 - A deep, grounded blue-green, excellent for primary branding elements, prominent headings, or key interactive components.

secondary

#4E737B - Use this mid-tone for supporting headers, important subtext, or secondary navigation, adding a natural, earthy feel.

accent

#7CA2A9 - A lighter, serene blue-green, perfect for subtle highlights, interactive states, or decorative details that need to stand out gently.

background

#0F252E - This very dark blue-green provides an excellent, immersive background, giving a sense of depth and quiet mystery.

text

For light text, #B6C9CC offers good contrast on dark backgrounds. Pure white or a very light grey like #F5F5F5 is also highly effective.

Accessibility notes

Ensure sufficient contrast for all text on #0F252E, #2B4C56, and #4E737B backgrounds, using lighter colors like #B6C9CC or white.
Avoid using #7CA2A9 for small text on #B6C9CC background due to potential low contrast.
Interactive elements should have clear visual indicators and sufficient contrast against their surroundings.
For body text, aim for a minimum contrast ratio of 4.5:1, especially on darker backgrounds.

Recommended combinations

Forest Night UI

Creates a sophisticated dark mode user interface, with the lightest color for text and the darkest for backgrounds.

#0F252E · #2B4C56 · #B6C9CC

Natural Elegance

Ideal for subtle gradients or layered designs that convey natural depth and refined taste.

#4E737B · #7CA2A9 · #B6C9CC

Grounded Branding

Excellent for core branding, utilizing the deep tones for primary identity and the lighter for supporting elements.

#0F252E · #2B4C56 · #7CA2A9

CSS variables

:root {
  --moonlit-pine-shadows-1: #0F252E;
  --moonlit-pine-shadows-2: #2B4C56;
  --moonlit-pine-shadows-3: #4E737B;
  --moonlit-pine-shadows-4: #7CA2A9;
  --moonlit-pine-shadows-5: #B6C9CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-pine-shadows": {
        1: "#0F252E",
        2: "#2B4C56",
        3: "#4E737B",
        4: "#7CA2A9",
        5: "#B6C9CC",
      }
    }
  }
}

Hex values

Color 1#0F252E

Color 2#2B4C56

Color 3#4E737B

Color 4#7CA2A9

Color 5#B6C9CC

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

5.7:1AA

9.2:1AAA

1.7:1Fail

1.8:1Fail

3.3:1AA18

5.4:1AA

3.1:1AA18

1.8:1Fail

1.9:1Fail

3:1AA18

5.7:1AA

3.3:1AA18

1.9:1Fail

1.6:1Fail

9.2:1AAA

5.4:1AA

3:1AA18

1.6:1Fail

Similar palettes

More like Moonlit Pine Shadows

View all dark

Ancient Forest Depths