Palette

Monochromatic Stone Wall

A strong, foundational palette capturing the varied textures and shades of a solid stone wall.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#546A76#A7BFC9#E8EFF1#1F2F3B

Palette guide

How to use Monochromatic Stone Wall

Overview

The "Monochromatic Stone Wall" palette offers a robust and earthy collection of greys, reminiscent of ancient architecture and natural stone. This scheme, featuring deep #2C3E50 and #1F2F3B alongside softer #546A76, #A7BFC9, and #E8EFF1, provides a strong, grounded aesthetic. It's an excellent choice for designers and developers aiming to convey reliability, strength, and a connection to nature. The varied shades allow for rich textural depth and sophisticated layering in both digital and physical designs. This palette is particularly effective for projects that require a natural, organic, or historically-inspired feel.

Best used for

Architectural firm branding
Outdoor adventure websites
E-commerce for natural products
Museum or heritage site design
Interior design inspiration boards
Robust corporate identities

Suggested color roles

primary

Utilize #2C3E50 or #1F2F3B as a dominant, foundational color for headers, footers, or main navigation, providing deep stability.

secondary

Apply #546A76 for secondary sections, panels, or backgrounds where a slightly lighter, yet still substantial, tone is desired.

accent

Use #A7BFC9 for subtle highlights, interactive elements, or iconography that needs to stand out gently against darker tones.

background

Employ #E8EFF1 for clean, expansive content areas or backgrounds to provide visual breathing room and enhance readability.

text

For dark text, use #1F2F3B or #2C3E50 on light backgrounds like #E8EFF1. For light text on dark backgrounds, use #E8EFF1.

Accessibility notes

Ensure #1F2F3B or #2C3E50 text on #E8EFF1 backgrounds meets WCAG AA contrast standards.
Avoid pairing #A7BFC9 with #E8EFF1 for small text; the contrast might be insufficient.
When using #546A76 as a background, ensure text in #E8EFF1 or #A7BFC9 has adequate contrast.
Always test contrast for critical information, especially for smaller font sizes.

Recommended combinations

Solid Foundation

A strong dark base (#2C3E50) with very light content (#E8EFF1) and a darker text accent (#1F2F3B) for headings.

#2C3E50 · #E8EFF1 · #1F2F3B

Textured Layers

Creates depth with a mid-tone background (#546A76), lighter overlays (#A7BFC9), and bright highlights (#E8EFF1).

#546A76 · #A7BFC9 · #E8EFF1

Deep & Clear

Excellent for a dark theme where #1F2F3B is the primary background, #E8EFF1 is main text, and #A7BFC9 is for secondary elements.

#1F2F3B · #A7BFC9 · #E8EFF1

CSS variables

:root {
  --monochromatic-stone-wall-1: #2C3E50;
  --monochromatic-stone-wall-2: #546A76;
  --monochromatic-stone-wall-3: #A7BFC9;
  --monochromatic-stone-wall-4: #E8EFF1;
  --monochromatic-stone-wall-5: #1F2F3B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochromatic-stone-wall": {
        1: "#2C3E50",
        2: "#546A76",
        3: "#A7BFC9",
        4: "#E8EFF1",
        5: "#1F2F3B",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#546A76

Color 3#A7BFC9

Color 4#E8EFF1

Color 5#1F2F3B

Accessibility

Contrast checker

1.9:1Fail

5.7:1AA

9.4:1AAA

1.3:1Fail

1.9:1Fail

3:1Fail

4.9:1AA

2.4:1Fail

5.7:1AA

3:1Fail

1.6:1Fail

7.2:1AAA

9.4:1AAA

4.9:1AA

1.6:1Fail

11.8:1AAA

1.3:1Fail

2.4:1Fail

7.2:1AAA

11.8:1AAA

Similar palettes

More like Monochromatic Stone Wall

View all monochrome

Historic Tablet Text

Zen Garden Grey

Architectural Grid Hues

Basalt Stream Pebble

Beach Stone Sketch

Calm Stone Meditate