Palette

Moonlit Stone Steps

A serene transition from deep to light grays, reflecting the quiet elegance of moonlit stone.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#576574#7F8DA2#A8B1C2#D1DBE0

Palette guide

How to use Moonlit Stone Steps

Overview

The Moonlit Stone Steps palette offers a serene and elegant transition from deep to light grays, reflecting the quiet sophistication of moonlit stone. With shades ranging from the grounding #36454F to the airy #D1DBE0, and including the balanced #576574, #7F8DA2, and #A8B1C2, this monochrome palette is perfect for designers seeking a refined, understated aesthetic. It excels in creating clean, professional interfaces and branding that convey stability, luxury, and timelessness. Developers will find these harmonious grays easy to implement for creating clear visual hierarchies and accessible designs.

Best used for

Luxury brand websites and corporate identities
Architectural and interior design portfolios
High-end fashion and jewelry marketing
Minimalist UI/UX for sophisticated applications
Automotive or industrial design presentations
Elegant editorial layouts and print media

Suggested color roles

primary

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

secondary

Apply #7F8DA2 for supporting sections, subheadings, or subtle background textures, maintaining a cohesive, refined feel.

accent

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

background

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

text

Black or a very dark charcoal is highly legible on #D1DBE0 and #A8B1C2. White text offers excellent contrast on #36454F and #576574.

Accessibility notes

Ensure sufficient contrast for all text, especially when using #A8B1C2 or #D1DBE0 as backgrounds. Dark text is highly recommended.
The deep #36454F 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 Elegance

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

#36454F · #576574 · #D1DBE0

Stone Progression

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

#576574 · #7F8DA2 · #A8B1C2

Refined Contrast

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

#A8B1C2 · #7F8DA2 · #36454F

CSS variables

:root {
  --moonlit-stone-steps-1: #36454F;
  --moonlit-stone-steps-2: #576574;
  --moonlit-stone-steps-3: #7F8DA2;
  --moonlit-stone-steps-4: #A8B1C2;
  --moonlit-stone-steps-5: #D1DBE0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-stone-steps": {
        1: "#36454F",
        2: "#576574",
        3: "#7F8DA2",
        4: "#A8B1C2",
        5: "#D1DBE0",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#576574

Color 3#7F8DA2

Color 4#A8B1C2

Color 5#D1DBE0

Accessibility

Contrast checker

1.7:1Fail

2.9:1Fail

4.6:1AA

7:1AAA

1.7:1Fail

1.8:1Fail

2.8:1Fail

4.2:1AA18

2.9:1Fail

1.8:1Fail

1.6:1Fail

2.4:1Fail

4.6:1AA

2.8:1Fail

1.6:1Fail

1.5:1Fail

7:1AAA

4.2:1AA18

2.4:1Fail

1.5:1Fail

Similar palettes

More like Moonlit Stone Steps

View all monochrome

Whisper Stone Harmony

Ancient Forest Myst

Ancient Ruin Stone

Contemplative Stone Flow

Dusky Meadow Mist

Ink Wash Serenity