Palette

Midnight Forest

Deep, cool blues and forest greens create a mysterious and immersive atmosphere, like a moonlit wood.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#4A6E7C#7AA7A8#1E2B38#638D8E

Palette guide

How to use Midnight Forest

Overview

The Midnight Forest palette weaves together deep, cool blues and forest greens, creating a mysterious and immersive atmosphere akin to a moonlit wood. With colors like #2C3E50, #4A6E7C, #7AA7A8, #1E2B38, and #638D8E, this collection offers a balanced, calming, and sophisticated aesthetic. It's ideal for designers seeking to evoke a sense of tranquility, depth, and natural elegance. The interplay of dark, rich tones and lighter, airy accents provides versatility for both corporate and creative projects, ensuring a visually engaging and harmonious user experience.

Best used for

Environmental organizations and NGOs
Wellness and mindfulness applications
Tech companies with a serene brand
Corporate branding and professional websites
Serene digital experiences and interfaces
Nature photography and documentary design

Suggested color roles

primary

Utilize #1E2B38 as the deepest blue-gray for foundational backgrounds, headers, or robust structural elements, providing a strong anchor.

secondary

Employ #2C3E50 for supporting panels, card backgrounds, or secondary navigation, offering a rich dark blue depth.

accent

Apply #7AA7A8 for subtle highlights, interactive states, or icons, providing an airy and refreshing contrast.

background

Use #1E2B38 or #2C3E50 for immersive dark backgrounds that convey sophistication and depth.

text

For optimal readability on dark backgrounds, use white or a very light gray. For subtle secondary text or accents, #7AA7A8 can be used on darker shades, ensuring sufficient contrast.

Accessibility notes

Ensure white or light gray text has strong contrast on #1E2B38, #2C3E50, and #4A6E7C.
Avoid using #7AA7A8 for small text on #638D8E, as contrast might be insufficient.
Use #7AA7A8 primarily for larger headings or graphic elements when paired with mid-tones.
Test color combinations on various devices to confirm legibility and desired mood.

Recommended combinations

Deep Waters

Creates a deep, cool, and foundational theme, excellent for robust backgrounds and structural components.

#1E2B38 · #2C3E50 · #4A6E7C

Misty Canopy

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

#4A6E7C · #638D8E · #7AA7A8

Forest Edge

Provides high contrast with elegant blue-green tones, suitable for primary content on dark backgrounds with refreshing accents.

#1E2B38 · #7AA7A8 · #638D8E

CSS variables

:root {
  --midnight-forest-1: #2C3E50;
  --midnight-forest-2: #4A6E7C;
  --midnight-forest-3: #7AA7A8;
  --midnight-forest-4: #1E2B38;
  --midnight-forest-5: #638D8E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-forest": {
        1: "#2C3E50",
        2: "#4A6E7C",
        3: "#7AA7A8",
        4: "#1E2B38",
        5: "#638D8E",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#4A6E7C

Color 3#7AA7A8

Color 4#1E2B38

Color 5#638D8E

Accessibility

Contrast checker

2:1Fail

4.1:1AA18

1.3:1Fail

3:1Fail

2:1Fail

2.1:1Fail

2.6:1Fail

1.5:1Fail

4.1:1AA18

2.1:1Fail

5.4:1AA

1.4:1Fail

1.3:1Fail

2.6:1Fail

5.4:1AA

3.9:1AA18

3:1Fail

1.5:1Fail

1.4:1Fail

3.9:1AA18

Similar palettes

More like Midnight Forest

View all dark

Midnight Forest Velvet

Abyss Gaze

Abyssal Bioluminescence

Abyssal Bioluminescent Glow

Abyssal Coral Glow

Abyssal Depths