Palette

Volcanic Rock Ridge

The stark, powerful beauty of volcanic rock formations, captured in shades of grey.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Rock Ridge 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 Rock Ridge.

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

Data visualization

#1B1B1B#3A3A3A#5C5C5C#8A8A8A#B0B0B0

Palette guide

How to use Volcanic Rock Ridge

Overview

The "Volcanic Rock Ridge" palette is a stark and powerful monochromatic grey scheme, echoing the raw, unyielding beauty of geological formations. From the intense `#1B1B1B` to the lighter `#B0B0B0`, this palette offers a strong, dark foundation with excellent tonal range for depth and contrast. It's perfectly suited for designs that aim to convey ruggedness, sophistication, and a timeless, unembellished aesthetic. Designers and developers can leverage this palette to create powerful, stable, and visually impactful interfaces and branding.

Best used for

Luxury and high-end tech branding
Architectural and engineering portfolios
Dark mode interfaces and themes
Minimalist art and photography websites
Geological and scientific presentations
Robust product design

Suggested color roles

primary

Use `#3A3A3A` as the dominant dark grey for structural elements and main content areas, providing stability.

secondary

Apply `#5C5C5C` as a mid-tone for secondary information, subtle dividers, or background textures.

accent

Utilize `#8A8A8A` for subtle highlights, interactive states, or to draw attention without being overly bold.

background

Employ `#1B1B1B` as the deepest, most immersive background, setting a powerful and sophisticated tone.

text

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

Accessibility notes

Text in `#B0B0B0` provides excellent readability against `#1B1B1B` and `#3A3A3A` backgrounds.
Exercise caution when using `#5C5C5C` text on `#3A3A3A`; always check contrast ratios carefully.
For critical text, a pure white can maximize legibility on the darkest backgrounds, ensuring WCAG AA compliance.
Ensure sufficient contrast for all interactive elements and states to maintain accessibility standards.

Recommended combinations

Ridge Depth

Creates a deep base with a contrasting light element, ideal for stark headers and dark mode layouts.

#1B1B1B · #3A3A3A · #B0B0B0

Stone Layers

Provides layered mid-tones for subtle variation and visual depth in backgrounds or component groupings.

#3A3A3A · #5C5C5C · #8A8A8A

Stark Contrast

A powerful dark base with bright highlights and a strong mid-tone, perfect for impactful UI elements.

#1B1B1B · #8A8A8A · #5C5C5C

CSS variables

:root {
  --volcanic-rock-ridge-1: #1B1B1B;
  --volcanic-rock-ridge-2: #3A3A3A;
  --volcanic-rock-ridge-3: #5C5C5C;
  --volcanic-rock-ridge-4: #8A8A8A;
  --volcanic-rock-ridge-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-rock-ridge": {
        1: "#1B1B1B",
        2: "#3A3A3A",
        3: "#5C5C5C",
        4: "#8A8A8A",
        5: "#B0B0B0",
      }
    }
  }
}

Hex values

Color 1#1B1B1B

Color 2#3A3A3A

Color 3#5C5C5C

Color 4#8A8A8A

Color 5#B0B0B0

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

5:1AA

7.9:1AAA

1.5:1Fail

1.7:1Fail

3.3:1AA18

5.2:1AA