Back to palettes

Palette

Midnight Forest Shade

Deep, mysterious greens and grays, like the shadows cast by ancient trees in a moonlit forest.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Forest Shade 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 Midnight Forest Shade.

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

Data visualization

#8C9996#6D7A78#505E5C#384342#222B2A

Palette guide

How to use Midnight Forest Shade

Overview

The Midnight Forest Shade palette offers a sophisticated blend of muted greens and grays, reminiscent of shadows cast by ancient trees under moonlight. With colors like #8C9996, #6D7A78, #505E5C, #384342, and #222B2A, this collection is perfect for creating a calming, natural, and refined aesthetic. It evokes a sense of quiet strength and organic elegance, making it highly versatile for brands seeking an earthy yet modern identity. The desaturated tones provide a serene backdrop, allowing content to stand out gracefully without overwhelming the viewer.

Best used for

  • Nature-inspired branding and packaging
  • Sustainable and eco-friendly products
  • Calming interior design visualizations
  • Editorial design for lifestyle magazines
  • Sophisticated web and app interfaces
  • Wellness and meditation platforms

Suggested color roles

primary

Utilize #222B2A as a deep, grounding base for headers, footers, or dominant sections, providing a strong, elegant anchor.

secondary

Employ #384342 for supporting elements like subheadings, card backgrounds, or secondary navigation, adding rich depth.

accent

Apply #6D7A78 for subtle interactive elements, borders, or muted icons, offering a gentle contrast.

background

Use #8C9996 as a light, airy background for main content areas, ensuring readability and a spacious feel.

text

For optimal readability on lighter backgrounds, use #222B2A or a dark charcoal. On darker tones like #222B2A, a light gray or off-white ensures clarity.

Accessibility notes

  • Ensure sufficient contrast when using #6D7A78 on #8C9996; it may require larger text.
  • White text on #222B2A and #384342 offers excellent contrast and readability.
  • Avoid using #505E5C for small text on #6D7A78 due to potential low contrast.
  • Test color combinations on various screens to confirm legibility across different devices.

Recommended combinations

Deep Woods

Creates a profound, grounding dark theme, excellent for sophisticated backgrounds and foundational elements.

#222B2A · #384342 · #505E5C

Misty Undergrowth

Offers a lighter, atmospheric blend, ideal for content areas or subtle gradient effects.

#8C9996 · #6D7A78 · #505E5C

Forest Floor

Provides a balanced, natural progression of tones, suitable for layered designs and subtle visual hierarchy.

#384342 · #6D7A78 · #8C9996

CSS variables

:root {
  --midnight-forest-shade-1: #8C9996;
  --midnight-forest-shade-2: #6D7A78;
  --midnight-forest-shade-3: #505E5C;
  --midnight-forest-shade-4: #384342;
  --midnight-forest-shade-5: #222B2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-forest-shade": {
        1: "#8C9996",
        2: "#6D7A78",
        3: "#505E5C",
        4: "#384342",
        5: "#222B2A",
      }
    }
  }
}

Related searches

muted green gray paletteearthy forest colorscalming nature schemesophisticated dark greennatural brand colors

Palette colors

Hex values

Color 1#8C9996
·
Color 2#6D7A78
·
Color 3#505E5C
·
Color 4#384342
·
Color 5#222B2A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
3.5:1AA18
4.9:1AA
2
1.5:1Fail
1.5:1Fail
2.3:1Fail
3.3:1AA18
3
2.3:1Fail
1.5:1Fail
1.5:1Fail
2.1:1Fail
4
3.5:1AA18
2.3:1Fail
1.5:1Fail
1.4:1Fail
5
4.9:1AA
3.3:1AA18
2.1:1Fail
1.4:1Fail

Similar palettes

More like Midnight Forest Shade

View all dark