Palette

Moonlit Stone Path

Gradations of grey mirroring a serene stone path illuminated by moonlight.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Stone Path 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 Stone Path.

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

Data visualization

#2F4F4F#708090#A9A9A9#DCDCDC#F5F5F5

Palette guide

How to use Moonlit Stone Path

Overview

The Moonlit Stone Path palette offers a sophisticated spectrum of cool greys, mirroring a serene stone path illuminated by moonlight. Ranging from the deep teal-grey of #2F4F4F to the near-white #F5F5F5, with intermediate shades like #708090, #A9A9A9, and #DCDCDC, this monochrome palette is excellent for designers seeking a minimalist, elegant, and modern aesthetic. It provides a timeless foundation for interfaces and branding that emphasize clarity, professionalism, and understated luxury. Developers will appreciate its versatility for creating clean, accessible designs with natural visual hierarchy.

Best used for

Architectural firm websites and portfolios
Minimalist personal and corporate branding
High-tech product interfaces and displays
Modern art gallery digital platforms
Luxury automotive marketing materials
Clean, professional corporate reports

Suggested color roles

primary

Utilize #708090 as a balanced primary color for main content areas or prominent UI elements, offering a dependable mid-grey.

secondary

Apply #A9A9A9 for supporting sections, subheadings, or subtle background textures, maintaining a light and airy feel.

accent

The deepest shade, #2F4F4F, serves as a strong accent for important call-to-actions, headers, or robust navigation, providing depth.

background

For a clean, expansive background, #F5F5F5 is ideal. #DCDCDC can be used for slightly darker, subtle section separation.

text

Black or a very dark charcoal is highly legible on #F5F5F5 and #DCDCDC. White text offers excellent contrast on #2F4F4F and #708090.

Accessibility notes

Ensure sufficient contrast for all text, especially when using #A9A9A9 or #DCDCDC as backgrounds. Darker text is crucial.
The deep #2F4F4F provides excellent contrast for white or very light text, making it suitable for primary text on dark elements.
Avoid using light grey text on light grey backgrounds, as this will result in poor readability and accessibility issues.
Test color combinations under various display settings to ensure legibility and visual comfort for all users.

Recommended combinations

Deep Stone

Ideal for striking headers, dark mode interfaces, or hero sections where the bright white provides a stark and clean contrast.

#2F4F4F · #708090 · #F5F5F5

Grey Path

Perfect for subtle gradients, layered UI elements, or informational panels that require a smooth, harmonious progression of greys.

#708090 · #A9A9A9 · #DCDCDC

Clean Contrast

Use for robust navigation, footers, or branding elements that need a sophisticated, clear contrast between light and dark.

#DCDCDC · #A9A9A9 · #2F4F4F

CSS variables

:root {
  --moonlit-stone-path-1: #2F4F4F;
  --moonlit-stone-path-2: #708090;
  --moonlit-stone-path-3: #A9A9A9;
  --moonlit-stone-path-4: #DCDCDC;
  --moonlit-stone-path-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-stone-path": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#DCDCDC",
        5: "#F5F5F5",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#708090

Color 3#A9A9A9

Color 4#DCDCDC

Color 5#F5F5F5

Accessibility

Contrast checker

2.2:1Fail

3.8:1AA18

6.5:1AA

8.2:1AAA

2.2:1Fail

1.7:1Fail

3:1Fail

3.7:1AA18

3.8:1AA18

1.7:1Fail

2.2:1Fail

6.5:1AA

3:1Fail

1.7:1Fail

1.3:1Fail

8.2:1AAA

3.7:1AA18

2.2:1Fail

1.3:1Fail

Similar palettes

More like Moonlit Stone Path

Moonlit Stone Path

See it in context.

Ready when you are.

Built with Moonlit Stone Path.

How to use Moonlit Stone Path

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Stone

Grey Path

Clean Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Moonlit Stone Path