Palette

Slate Wall

Strong, enduring grays, replicating the solid and sophisticated feel of a classic slate stone wall.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F363F#58626E#8A97A5#BAC6D2#232A31

Palette guide

How to use Slate Wall

Overview

The Slate Wall palette offers a robust and sophisticated collection of grays, perfect for projects requiring a stable, enduring aesthetic. Featuring deep tones like #232A31 and #2F363F, alongside versatile mid-grays such as #58626E and #8A97A5, it culminates in the soft, approachable #BAC6D2. This palette expertly mimics the solid, timeless feel of natural slate stone. Designers can leverage its inherent neutrality to create elegant backdrops or to ground vibrant accent colors. Developers will find these shades excellent for UI elements that need to convey reliability and modern minimalism, ensuring visual consistency across various interfaces. Its uniform cool undertones simplify color pairing.

Best used for

Corporate websites and branding
Architectural visualization
UI themes for professional applications
Minimalist interior design concepts
High-end product packaging
Photography portfolios

Suggested color roles

primary

#2F363F - Ideal for main sections, headers, or primary brand elements, providing a strong, foundational presence.

secondary

#58626E - Excellent for subheadings, navigation menus, or secondary content blocks, offering a smooth transition from the primary.

accent

#8A97A5 - Use sparingly for interactive elements, highlights, or subtle graphic details to add a touch of understated sophistication.

background

#BAC6D2 - A light, airy background for main content areas, ensuring excellent readability and a clean aesthetic.

text

#232A31 - Provides strong contrast against lighter backgrounds like #BAC6D2, ensuring optimal readability for body text.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #8A97A5 for text on #BAC6D2.
For UI elements, use a contrast checker to verify interactive states against adjacent colors.
Darker shades like #232A31 and #2F363F provide excellent contrast for white or very light text.
Avoid using #BAC6D2 for small text on #8A97A5 or similar mid-tones without careful contrast testing.

Recommended combinations

Foundation

A classic dark text on light background with a mid-tone for secondary elements or borders.

#232A31 · #BAC6D2 · #58626E

Subtle Depth

Creates a sophisticated, layered look for interfaces or architectural renderings.

#2F363F · #8A97A5 · #58626E

UI Neutral

A versatile combination for clean user interfaces, buttons, and informational panels.

#BAC6D2 · #2F363F · #8A97A5

CSS variables

:root {
  --slate-wall-1: #2F363F;
  --slate-wall-2: #58626E;
  --slate-wall-3: #8A97A5;
  --slate-wall-4: #BAC6D2;
  --slate-wall-5: #232A31;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "slate-wall": {
        1: "#2F363F",
        2: "#58626E",
        3: "#8A97A5",
        4: "#BAC6D2",
        5: "#232A31",
      }
    }
  }
}

Hex values

Color 1#2F363F

Color 2#58626E

Color 3#8A97A5

Color 4#BAC6D2

Color 5#232A31

Accessibility

Contrast checker

2:1Fail

4.1:1AA18

7:1AAA

1.2:1Fail

2:1Fail

2.1:1Fail

3.6:1AA18

2.3:1Fail

4.1:1AA18

2.1:1Fail

1.7:1Fail

4.9:1AA

7:1AAA

3.6:1AA18

1.7:1Fail

8.4:1AAA

1.2:1Fail

2.3:1Fail

4.9:1AA

8.4:1AAA

Similar palettes

More like Slate Wall

View all neutral

Ancient Ruin Stone

Stone Temple Carvings

Ancient Roman Stone

Ancient Rune Stone

Ancient Stone Temple

Ancient Temple Stones