Back to palettes

Palette

Midnight Stone Garden

A monochrome study in dark grays, capturing the silent, moonlit beauty of a zen garden constructed from various stones.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2A2A2E#4A4A52#7A7A85#A6A6AC#D1D1D4

Palette guide

How to use Midnight Stone Garden

Overview

The Midnight Stone Garden palette offers a serene and minimalist collection of dark grays, inspired by the tranquil beauty of a moonlit zen garden. Featuring deep hues like #2A2A2E and softer tones such as #D1D1D4, this monochrome palette is perfect for designs requiring sophistication, calm, and a modern edge. The subtle variations between #4A4A52 and #7A7A85 allow for depth and texture, making it versatile for both digital and print applications that demand a refined, understated elegance.

Best used for

  • Minimalist website designs
  • Architectural firm branding
  • Luxury product showcases
  • Meditation or wellness apps
  • Dark mode interfaces
  • Contemporary art galleries

Suggested color roles

primary

Utilize #2A2A2E as the foundational dark background, creating a calm and sophisticated base for all content.

secondary

Apply #4A4A52 for subtle section breaks, borders, or secondary content areas to add structure without visual clutter.

accent

Use #D1D1D4 for delicate highlights, interactive elements, or iconography that needs a soft, luminous presence.

background

Employ #2A2A2E as the main canvas for a truly tranquil and monochrome dark theme.

text

For optimal readability, use #D1D1D4 for primary text on darker backgrounds. #A6A6AC can be used for secondary text or captions.

Accessibility notes

  • Ensure high contrast when pairing #D1D1D4 with #2A2A2E for text, meeting WCAG AA standards for readability.
  • Avoid using mid-tones like #4A4A52 or #7A7A85 for small body text on the darkest backgrounds, as contrast may be insufficient.
  • For interactive elements, ensure the lighter shades provide clear visual feedback against the darker grays.
  • Consider using a slightly bolder font weight for text in #A6A6AC to enhance legibility on darker backgrounds.

Recommended combinations

Stone Base

Forms a deep, grounded background with subtle variations, ideal for main layouts and content blocks.

#2A2A2E · #4A4A52 · #7A7A85

Zen Contrast

Creates clear hierarchy with light text and elements against a dark, calming backdrop.

#2A2A2E · #D1D1D4 · #A6A6AC

Subtle Depth

Excellent for gradients, layered effects, or subtle UI components that require a gentle transition of grays.

#4A4A52 · #7A7A85 · #A6A6AC

CSS variables

:root {
  --midnight-stone-garden-1: #2A2A2E;
  --midnight-stone-garden-2: #4A4A52;
  --midnight-stone-garden-3: #7A7A85;
  --midnight-stone-garden-4: #A6A6AC;
  --midnight-stone-garden-5: #D1D1D4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-stone-garden": {
        1: "#2A2A2E",
        2: "#4A4A52",
        3: "#7A7A85",
        4: "#A6A6AC",
        5: "#D1D1D4",
      }
    }
  }
}

Related searches

dark grey color paletteminimalist stone colorszen garden thememonochrome dark modeelegant grey hues

Palette colors

Hex values

Color 1#2A2A2E
·
Color 2#4A4A52
·
Color 3#7A7A85
·
Color 4#A6A6AC
·
Color 5#D1D1D4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.4:1AA18
5.9:1AA
9.4:1AAA
2
1.6:1Fail
2.1:1Fail
3.6:1AA18
5.8:1AA
3
3.4:1AA18
2.1:1Fail
1.8:1Fail
2.8:1Fail
4
5.9:1AA
3.6:1AA18
1.8:1Fail
1.6:1Fail
5
9.4:1AAA
5.8:1AA
2.8:1Fail
1.6:1Fail

Similar palettes

More like Midnight Stone Garden

View all dark
Cosmic Void Depths
Obsidian Night Gaze
Volcanic Ash Glow
Asteroid Belt Shadow
Cathedral Shadow Grey
Charcoal Depths