Back to palettes

Palette

Midnight Garden Shadow

Deep, elusive greys and blues mirroring the cool, mysterious depths of a garden under a midnight sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F3C4B#485A6C#61798D#7B98AD#94B7CE

Palette guide

How to use Midnight Garden Shadow

Overview

The Midnight Garden Shadow palette captures the elusive beauty of a garden under a midnight sky, utilizing a sophisticated range of cool, mysterious greys and blues. This palette, featuring deep tones like #2F3C4B and #485A6C, alongside lighter, ethereal shades such as #7B98AD and #94B7CE, offers designers and developers a versatile foundation for creating serene and elegant digital experiences. Its harmonious progression from dark to light allows for subtle depth and visual interest, perfect for conveying a sense of calm and understated luxury. The interplay of #61798D provides a crucial mid-tone, ensuring flexibility in design applications where a balanced yet sophisticated aesthetic is desired. It's ideal for projects aiming for a refined, contemporary feel.

Best used for

  • Elegant branding and corporate identity
  • Serene website backgrounds and UI elements
  • Digital art and atmospheric illustrations
  • Luxury product packaging design
  • Environmental or nature-themed applications
  • Sophisticated event invitations

Suggested color roles

primary

Use #2F3C4B as the dominant base color for large areas, conveying depth and stability.

secondary

Employ #485A6C for supporting elements, subheadings, or secondary content blocks to maintain a cohesive dark theme.

accent

Apply #94B7CE sparingly for interactive elements, highlights, or subtle graphic details to draw attention.

background

Choose #2F3C4B or #485A6C for dark, immersive backgrounds, providing a sophisticated backdrop.

text

Pair light text colors like #94B7CE or pure white (e.g., #FFFFFF) against darker backgrounds, or a dark charcoal on lighter sections for optimal readability.

Accessibility notes

  • Ensure sufficient contrast when using #61798D or #7B98AD for text on darker backgrounds like #2F3C4B.
  • Prioritize #94B7CE for critical text and interactive elements to meet WCAG contrast guidelines on dark surfaces.
  • Avoid using mid-tones such as #485A6C for small text on #2F3C4B without careful contrast checking.
  • Consider providing a light mode option if this palette is used for extensive text content on dark backgrounds.

Recommended combinations

Deep Foundations

Ideal for main content areas with clear hierarchy, using the lightest for calls to action.

#2F3C4B · #485A6C · #94B7CE

Serene Gradient

Perfect for subtle background gradients or layered UI elements that need smooth transitions.

#485A6C · #61798D · #7B98AD

Highlight Contrast

Effective for showcasing key information or graphics against a deep, stable background.

#2F3C4B · #7B98AD · #94B7CE

CSS variables

:root {
  --midnight-garden-shadow-1: #2F3C4B;
  --midnight-garden-shadow-2: #485A6C;
  --midnight-garden-shadow-3: #61798D;
  --midnight-garden-shadow-4: #7B98AD;
  --midnight-garden-shadow-5: #94B7CE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-garden-shadow": {
        1: "#2F3C4B",
        2: "#485A6C",
        3: "#61798D",
        4: "#7B98AD",
        5: "#94B7CE",
      }
    }
  }
}

Related searches

dark blue grey palettecool night colorsmysterious color schemeselegant shadow tonesgarden midnight design

Palette colors

Hex values

Color 1#2F3C4B
·
Color 2#485A6C
·
Color 3#61798D
·
Color 4#7B98AD
·
Color 5#94B7CE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.7:1AA18
5.3:1AA
2
1.6:1Fail
1.6:1Fail
2.3:1Fail
3.4:1AA18
3
2.5:1Fail
1.6:1Fail
1.5:1Fail
2.1:1Fail
4
3.7:1AA18
2.3:1Fail
1.5:1Fail
1.4:1Fail
5
5.3:1AA
3.4:1AA18
2.1:1Fail
1.4:1Fail

Similar palettes

More like Midnight Garden Shadow

View all dark
Midnight Ink Spill
Moonlit Garden Gloom
Twilight Garden Path
Abyssal Coral Bloom
Abyssal Coral Bloom
Abyssal Reef Shadow