Palette

Stone Wall Whisper

Gentle, muted tones inspired by ancient, weathered stone walls that have stood the test of time.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stone Wall Whisper 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 Stone Wall Whisper.

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

Data visualization

#5D6D7E#8E9DAA#BFCAD1#DDE1E3#3C4851

Palette guide

How to use Stone Wall Whisper

Overview

The Stone Wall Whisper palette offers gentle, muted tones inspired by ancient, weathered stone walls that have stood the test of time. This sophisticated collection ranges from the deep, grounding #3C4851 to the airy #DDE1E3, featuring versatile blue-grays like #5D6D7E and #8E9DAA. It's an excellent choice for designers aiming to evoke history, architectural elegance, and a sense of calm endurance. This palette can create robust, subtle, and profoundly elegant visual experiences, suitable for high-end branding, minimalist interiors, or any project that benefits from a historic yet modern aesthetic.

Best used for

Architectural firm branding and websites
Historical preservation project communications
Minimalist interior design concepts
Luxury brand digital experiences
Serene digital interfaces
Academic institution publications

Suggested color roles

primary

Use #5D6D7E (Slate Gray) as a dignified primary color for branding, prominent calls to action, or key information.

secondary

Apply #8E9DAA (Light Slate Gray) for supportive elements, subheadings, or to add subtle depth to content areas.

accent

Employ #3C4851 (Dark Blue-Gray) for strong emphasis, bold headings, or to define key structural elements with gravitas.

background

Utilize #DDE1E3 (Very Light Blue-Gray) as a clean, open canvas, allowing other colors to truly resonate.

text

Choose #3C4851 (Dark Blue-Gray) for primary body text, ensuring excellent readability and a sophisticated tone.

Accessibility notes

Ensure #3C4851 text on #DDE1E3 backgrounds provides strong contrast for all users.
Avoid using #BFCAD1 on #DDE1E3 for small text due to potential low contrast ratios.
Verify that #5D6D7E text on #DDE1E3 backgrounds meets WCAG AA standards for readability.
For interactive elements, maintain clear visual feedback for hover and active states using distinct colors.

Recommended combinations

Historic Layers

Ideal for main backgrounds, primary text, and prominent features, creating a strong, authoritative presence.

#DDE1E3 · #3C4851 · #5D6D7E

Weathered Tones

Great for UI elements, subtle depth, and secondary text, reflecting weathered stone textures.

#8E9DAA · #BFCAD1 · #5D6D7E

Ancient Script

Effective for strong headings, a clean canvas, and accent details that need to stand out with dignity.

#3C4851 · #DDE1E3 · #8E9DAA

CSS variables

:root {
  --stone-wall-whisper-3-1: #5D6D7E;
  --stone-wall-whisper-3-2: #8E9DAA;
  --stone-wall-whisper-3-3: #BFCAD1;
  --stone-wall-whisper-3-4: #DDE1E3;
  --stone-wall-whisper-3-5: #3C4851;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-wall-whisper-3": {
        1: "#5D6D7E",
        2: "#8E9DAA",
        3: "#BFCAD1",
        4: "#DDE1E3",
        5: "#3C4851",
      }
    }
  }
}

Hex values

Color 1#5D6D7E

Color 2#8E9DAA

Color 3#BFCAD1

Color 4#DDE1E3

Color 5#3C4851

Accessibility

Contrast checker

1.9:1Fail

3.2:1AA18

4:1AA18

1.8:1Fail

1.9:1Fail

1.7:1Fail

2.1:1Fail

3.4:1AA18

3.2:1AA18

1.7:1Fail

1.3:1Fail

5.6:1AA

4:1AA18

2.1:1Fail

1.3:1Fail

7.1:1AAA

1.8:1Fail

3.4:1AA18

5.6:1AA

7.1:1AAA

Similar palettes

More like Stone Wall Whisper

Minimal Silent Canvas

Muted Haze Comfort