Back to palettes

Palette

Basalt Pillar Shades

A dramatic grayscale palette inspired by the raw power and sharp edges of cooling volcanic rock.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Basalt Pillar Shades 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 Basalt Pillar Shades.

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

Data visualization

#2C2C2C#4A4A4A#6D6D6D#909090#1A1A1A

Palette guide

How to use Basalt Pillar Shades

Overview

The Basalt Pillar Shades palette offers a dramatic grayscale collection, inspired by the raw power and sharp edges of cooling volcanic rock. Featuring the deepest black #1A1A1A, dark grey #2C2C2C, and mid-grey #6D6D6D, this range provides designers and developers with a powerful toolkit for intense, minimalist designs. The additional shades of #4A4A4A and #909090 complete a spectrum that creates profound depth and robust modernity. This palette is ideal for projects that demand a stark, sophisticated, and unflinching aesthetic, emphasizing structure and strong visual impact with its monochromatic strength.

Best used for

  • Brutalist or industrial design projects
  • High-tech product branding and interfaces
  • Dark-themed websites and mobile applications
  • Photography portfolio sites with dramatic visuals
  • Architectural visualizations and presentations
  • Branding for robust, durable, or heavy-duty products

Suggested color roles

primary

Utilize the deepest black #1A1A1A for dominant backgrounds, powerful statements, or primary text in a dark theme, providing ultimate depth.

secondary

Apply the dark grey #2C2C2C for primary content areas, section headers, or significant textual blocks, offering strong readability.

accent

Employ the mid-grey #6D6D6D for subtle UI elements, borders, or secondary interactive components, adding refinement.

background

Use the dark grey #2C2C2C or #1A1A1A for a strong, minimalist base, creating an immersive and sophisticated backdrop.

text

Integrate the light grey #909090 for optimal readability on dark backgrounds, or use white for impactful headlines and calls-to-action.

Accessibility notes

  • The deepest black #1A1A1A and dark grey #2C2C2C provide excellent contrast for white or light grey text like #909090.
  • Ensure #6D6D6D text on #4A4A4A or #2C2C2C has sufficient contrast to meet WCAG readability guidelines.
  • For optimal readability, always use #909090 as text on #1A1A1A or #2C2C2C.
  • Avoid pairing #6D6D6D with #909090 for text and background without careful WCAG contrast checks.

Recommended combinations

Stark Contrast

Create clear, bold, and readable layouts, ideal for main content, navigation, and high-impact messaging.

#1A1A1A · #909090 · #2C2C2C

Layered Depth

Design a sophisticated, grayscale layering effect for content panels, sections, or background textures.

#2C2C2C · #4A4A4A · #6D6D6D

Minimalist Base

Establish a clean, dark-themed design, providing depth and clarity for various UI elements.

#1A1A1A · #6D6D6D · #909090

CSS variables

:root {
  --basalt-pillar-shades-1: #2C2C2C;
  --basalt-pillar-shades-2: #4A4A4A;
  --basalt-pillar-shades-3: #6D6D6D;
  --basalt-pillar-shades-4: #909090;
  --basalt-pillar-shades-5: #1A1A1A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "basalt-pillar-shades": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#6D6D6D",
        4: "#909090",
        5: "#1A1A1A",
      }
    }
  }
}

Related searches

dark grey monochrome palettevolcanic rock colorsminimalist black greyindustrial design paletteintense dark aesthetic

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#4A4A4A
·
Color 3#6D6D6D
·
Color 4#909090
·
Color 5#1A1A1A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.4:1AA18
1.2:1Fail
2
1.6:1Fail
1.7:1Fail
2.8:1Fail
2:1Fail
3
2.7:1Fail
1.7:1Fail
1.6:1Fail
3.4:1AA18
4
4.4:1AA18
2.8:1Fail
1.6:1Fail
5.5:1AA
5
1.2:1Fail
2:1Fail
3.4:1AA18
5.5:1AA

Similar palettes

More like Basalt Pillar Shades

View all monochrome
Volcanic Glass Shards
Volcanic Obsidian Flow
Gothic Revival
Licorice Drop
Midnight Ink Spill
Noir Film Shadows