Back to palettes

Palette

Volcanic Scoria Grey

Captures the muted, powerful tones of cooled volcanic ash and ancient scoria.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Scoria Grey 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 Volcanic Scoria Grey.

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

Data visualization

#2C2C2C#4A4A4A#6D6D6D#919191#B3B3B3

Palette guide

How to use Volcanic Scoria Grey

Overview

The "Volcanic Scoria Grey" palette delivers a powerful, muted range of greys, from the deep `#2C2C2C` to the lighter `#B3B3B3`, embodying the essence of cooled volcanic ash and ancient scoria. This monochromatic scheme is dramatic yet versatile, offering excellent depth and contrast for sophisticated designs. It's perfect for conveying a sense of grounded strength, stark beauty, and modern minimalism. Designers and developers can leverage this palette to create professional, impactful visual communication, from dark mode themes to architectural presentations.

Best used for

  • Dark mode themes and applications
  • Luxury branding and high-end design
  • Photography backdrops and portfolios
  • Architectural renderings and blueprints
  • Tech product interfaces and dashboards
  • Geological documentaries and educational materials

Suggested color roles

primary

Use `#4A4A4A` as a solid dark grey for main content areas, providing a strong visual anchor.

secondary

Apply `#6D6D6D` as a mid-tone for secondary information, subtle dividers, or layered backgrounds.

accent

Utilize `#919191` for subtle highlights, interactive states, or to add a touch of understated contrast.

background

Employ `#2C2C2C` as the deepest, most dramatic background, setting a powerful and focused tone.

text

For excellent readability on dark backgrounds, use `#B3B3B3` for text or a crisp white for critical headings and calls to action.

Accessibility notes

  • Text in `#B3B3B3` provides strong contrast against `#2C2C2C` and `#4A4A4A` backgrounds.
  • Avoid using `#6D6D6D` text on `#4A4A4A` due to potential contrast issues; always verify with a checker.
  • For maximum legibility on the darkest shades, consider using pure white for critical text elements.
  • Always verify contrast ratios for all text and interactive elements to ensure WCAG AA compliance.

Recommended combinations

Ashy Depth

Creates a deep base with a strong, light accent, ideal for clear headings and dark mode layouts.

#2C2C2C · #4A4A4A · #B3B3B3

Scoria Texture

Provides a subtle gradient for layered visual interest, useful for textured backgrounds or distinct sections.

#4A4A4A · #6D6D6D · #919191

Dramatic Contrast

Combines a powerful dark base with a distinct highlight and mid-tone, perfect for impactful UI elements.

#2C2C2C · #919191 · #6D6D6D

CSS variables

:root {
  --volcanic-scoria-grey-1: #2C2C2C;
  --volcanic-scoria-grey-2: #4A4A4A;
  --volcanic-scoria-grey-3: #6D6D6D;
  --volcanic-scoria-grey-4: #919191;
  --volcanic-scoria-grey-5: #B3B3B3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-scoria-grey": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#6D6D6D",
        4: "#919191",
        5: "#B3B3B3",
      }
    }
  }
}

Related searches

dark grey ash palettevolcanic monochromestark grey schemedramatic dark thememuted grey colors

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#4A4A4A
·
Color 3#6D6D6D
·
Color 4#919191
·
Color 5#B3B3B3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.4:1AA18
6.7:1AA
2
1.6:1Fail
1.7:1Fail
2.8:1Fail
4.2:1AA18
3
2.7:1Fail
1.7:1Fail
1.6:1Fail
2.5:1Fail
4
4.4:1AA18
2.8:1Fail
1.6:1Fail
1.5:1Fail
5
6.7:1AA
4.2:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Volcanic Scoria Grey

View all monochrome
Volcanic Ash Drift
Volcanic Ash Smoke
Volcanic Glass Shard
Basalt Pillar Shades
Iron Gate Silhouette
Monochromatic Storm Sky