Palette

Somber Ash Wastes

A somber, textural palette inspired by the raw, powerful beauty of volcanic landscapes.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Somber Ash Wastes 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 Somber Ash Wastes.

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

Data visualization

#3A3B3C#5C5E60#8F9092#BDBDC0#E0E1E2

Palette guide

How to use Somber Ash Wastes

Overview

The Somber Ash Wastes palette is a monochromatic collection inspired by the raw, powerful beauty of volcanic landscapes. It features a range of deep to light grays: a dark charcoal (#3A3B3C), a robust grey (#5C5E60), a medium neutral grey (#8F9092), a light stone grey (#BDBDC0), and a very light ash grey (#E0E1E2). This palette is excellent for designers seeking a stark, textural, and minimalist aesthetic. It conveys a sense of groundedness, resilience, and quiet strength. Developers can effectively use these hues for clean, modern UI designs, technical documentation, or backgrounds where a subtle, sophisticated neutrality is desired, ensuring content remains the primary focus. This palette is inherently versatile and timeless.

Best used for

Minimalist web and app design
Architectural and industrial design presentations
Photography portfolios (especially black & white)
Technical documentation and reports
Corporate branding (serious, reliable)
Dark mode themes with subtle depth

Suggested color roles

primary

Use #3A3B3C for foundational elements like headers or footers, providing a solid, dark anchor.

secondary

Apply #5C5E60 for main content areas or darker text, offering good readability on lighter grays.

accent

Utilize #E0E1E2 for subtle highlights, borders, or hover states, providing a clean contrast.

background

Employ #E0E1E2 as a crisp, light background, or #BDBDC0 for a slightly warmer, more textured base.

text

For optimal readability, use #3A3B3C or #5C5E60 for text on lighter backgrounds like #E0E1E2 or #BDBDC0. White text works well on #3A3B3C.

Accessibility notes

Ensure sufficient contrast between text and background, especially for shades close in value like #5C5E60 on #8F9092.
Darkest grays (#3A3B3C, #5C5E60) on lightest grays (#BDBDC0, #E0E1E2) will offer best readability.
Avoid using light gray text on medium gray backgrounds for critical information.
Always test text and background pairings with a WCAG contrast checker to meet accessibility standards.

Recommended combinations

Stark Landscape

Creates a strong, minimalist layout: #3A3B3C for bold headings, #E0E1E2 for clean content areas, and #8F9092 for supporting text or dividers.

#3A3B3C · #E0E1E2 · #8F9092

Textured Depth

Ideal for layered backgrounds or card designs, providing subtle depth and separation with varying shades of gray.

#5C5E60 · #BDBDC0 · #E0E1E2

Quiet Contrast

A balanced combination for content: #8F9092 as a background, #3A3B3C for primary text, and #E0E1E2 for subtle highlights or small elements.

#8F9092 · #3A3B3C · #E0E1E2

CSS variables

:root {
  --somber-ash-wastes-1: #3A3B3C;
  --somber-ash-wastes-2: #5C5E60;
  --somber-ash-wastes-3: #8F9092;
  --somber-ash-wastes-4: #BDBDC0;
  --somber-ash-wastes-5: #E0E1E2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "somber-ash-wastes": {
        1: "#3A3B3C",
        2: "#5C5E60",
        3: "#8F9092",
        4: "#BDBDC0",
        5: "#E0E1E2",
      }
    }
  }
}

Hex values

Color 1#3A3B3C

Color 2#5C5E60

Color 3#8F9092

Color 4#BDBDC0

Color 5#E0E1E2

Accessibility

Contrast checker

1.7:1Fail

3.5:1AA18

6:1AA

8.6:1AAA

1.7:1Fail

2:1Fail

3.5:1AA18

5:1AA

3.5:1AA18

2:1Fail

1.7:1Fail

2.4:1Fail

6:1AA

3.5:1AA18

1.7:1Fail

1.4:1Fail

8.6:1AAA

5:1AA

2.4:1Fail

1.4:1Fail

Similar palettes

More like Somber Ash Wastes

Somber Ash Wastes

See it in context.

Ready when you are.

Built with Somber Ash Wastes.

How to use Somber Ash Wastes

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Stark Landscape

Textured Depth

Quiet Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Somber Ash Wastes