Back to palettes

Palette

Volcanic Rock Flow

A sturdy and dark progression of greys, mirroring the solid presence of cooled volcanic rock formations.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2D2F#424649#62676B#888E93#AEB5BA

Palette guide

How to use Volcanic Rock Flow

Overview

The "Volcanic Rock Flow" palette is a robust, dark-leaning monochromatic grey scheme, embodying the solid, enduring presence of cooled volcanic rock formations. Ranging from the deep, almost black `#2B2D2F` to the lighter, yet still grounded `#AEB5BA`, it provides a sturdy and serious aesthetic. This palette is excellent for designs needing to convey strength, reliability, and a sophisticated industrial feel. Designers and developers will find it offers ample contrast within its dark spectrum for clear hierarchy and impactful, modern interfaces.

Best used for

  • Industrial and engineering branding
  • Cybersecurity interfaces and dashboards
  • Heavy machinery and automotive marketing
  • Architectural presentations and portfolios
  • Rugged product design and packaging
  • Dark mode web and app themes

Suggested color roles

primary

Use `#424649` as a solid base for most content elements, providing a sturdy foundation.

secondary

Apply `#62676B` as a mid-tone for UI details, secondary information, or subtle dividers.

accent

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

background

Employ `#2B2D2F` as a deep, powerful dark background, setting a serious and focused tone.

text

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

Accessibility notes

  • Text in `#AEB5BA` offers good contrast against `#2B2D2F`, `#424649`, and `#62676B` backgrounds.
  • Avoid using `#62676B` as text on `#424649` due to insufficient contrast for readability.
  • For small text or critical information, consider using pure white on the darkest shades to maximize legibility.
  • Always verify contrast ratios with a tool to ensure all text and UI elements meet WCAG AA standards.

Recommended combinations

Solid Foundation

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

#2B2D2F · #424649 · #AEB5BA

Layered Rock

Provides a subtle grey progression for visual depth, useful for layered backgrounds or distinct sections.

#424649 · #62676B · #888E93

Industrial Edge

Combines a dark, rugged base with a distinct mid-tone highlight, perfect for UI elements that need to stand out.

#2B2D2F · #888E93 · #62676B

CSS variables

:root {
  --volcanic-rock-flow-1: #2B2D2F;
  --volcanic-rock-flow-2: #424649;
  --volcanic-rock-flow-3: #62676B;
  --volcanic-rock-flow-4: #888E93;
  --volcanic-rock-flow-5: #AEB5BA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-rock-flow": {
        1: "#2B2D2F",
        2: "#424649",
        3: "#62676B",
        4: "#888E93",
        5: "#AEB5BA",
      }
    }
  }
}

Related searches

dark grey industrial palettevolcanic rock colorsstrong monochrome schemerugged design palettecool dark grey

Palette colors

Hex values

Color 1#2B2D2F
·
Color 2#424649
·
Color 3#62676B
·
Color 4#888E93
·
Color 5#AEB5BA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
4.2:1AA18
6.7:1AA
2
1.5:1Fail
1.7:1Fail
2.9:1Fail
4.6:1AA
3
2.4:1Fail
1.7:1Fail
1.7:1Fail
2.8:1Fail
4
4.2:1AA18
2.9:1Fail
1.7:1Fail
1.6:1Fail
5
6.7:1AA
4.6:1AA
2.8:1Fail
1.6:1Fail

Similar palettes

More like Volcanic Rock Flow

View all monochrome
Charcoal Smoke Hues
Gritty Factory Floor
Gritty Industrial Grey
Industrial Gear Grind
Obsidian Shard Coast
Shadowed Granite Depths