Back to palettes

Palette

Volcanic Rock Spires

A stark progression of greys, capturing the raw, desolate beauty of a landscape shaped by volcanic rock.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D3D3D#5E5E5E#808080#A3A3A3#C7C7C7

Palette guide

How to use Volcanic Rock Spires

Overview

The "Volcanic Rock Spires" palette offers a stark yet sophisticated progression of greys, from the deep `#3D3D3D` to the bright `#C7C7C7`. This monochromatic scheme captures the raw, desolate beauty of volcanic landscapes, providing a versatile foundation for minimalist and modern designs. It excels at creating clear visual hierarchies and a sense of understated elegance, making it perfect for projects requiring a clean, professional, and stable aesthetic. Designers and developers will find its range ideal for refined interfaces and powerful, yet subtle, branding.

Best used for

  • Minimalist websites and digital portfolios
  • Photography and art showcases
  • Modern app interfaces and dashboards
  • Luxury product showcases and branding
  • Architectural and urban design concepts
  • Clean, professional corporate identities

Suggested color roles

primary

Use `#5E5E5E` as a balanced mid-tone for main content areas or primary navigation, offering visual anchor.

secondary

Apply `#808080` as a lighter mid-tone for subtle details, secondary information, or layered backgrounds.

accent

Utilize `#A3A3A3` as a soft highlight for interactive elements, active states, or to add gentle contrast.

background

Employ `#3D3D3D` as a solid, grounding dark background, setting a sophisticated and focused tone.

text

For excellent readability on dark backgrounds, use `#C7C7C7` for text or a dark charcoal like `#333333` for text on lighter shades.

Accessibility notes

  • Text in `#C7C7C7` provides excellent contrast against `#3D3D3D` and `#5E5E5E` backgrounds.
  • Be mindful of using `#A3A3A3` text on `#808080` due to potential low contrast; always check carefully.
  • For dark text on lighter backgrounds, consider using `#3D3D3D` or `#5E5E5E` on `#C7C7C7`.
  • Always use a contrast checker to ensure all text and UI elements meet WCAG AA standards for accessibility.

Recommended combinations

Spires Edge

Creates a dark base with a strong, light highlight, ideal for striking headers and main content areas.

#3D3D3D · #5E5E5E · #C7C7C7

Desolate Layers

Provides a subtle gradient for depth and texture, useful for layered backgrounds or distinct sections.

#5E5E5E · #808080 · #A3A3A3

Clean Contrast

Combines a strong dark base with a bright accent and a balanced mid-tone, perfect for clear UI hierarchy.

#3D3D3D · #A3A3A3 · #808080

CSS variables

:root {
  --volcanic-rock-spires-1: #3D3D3D;
  --volcanic-rock-spires-2: #5E5E5E;
  --volcanic-rock-spires-3: #808080;
  --volcanic-rock-spires-4: #A3A3A3;
  --volcanic-rock-spires-5: #C7C7C7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-rock-spires": {
        1: "#3D3D3D",
        2: "#5E5E5E",
        3: "#808080",
        4: "#A3A3A3",
        5: "#C7C7C7",
      }
    }
  }
}

Related searches

minimalist grey palettestark monochromevolcanic rock textureclean modern colorssubtle grey scheme

Palette colors

Hex values

Color 1#3D3D3D
·
Color 2#5E5E5E
·
Color 3#808080
·
Color 4#A3A3A3
·
Color 5#C7C7C7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
4.3:1AA18
6.4:1AA
2
1.7:1Fail
1.6:1Fail
2.6:1Fail
3.8:1AA18
3
2.8:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
4.3:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.4:1AA
3.8:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Volcanic Rock Spires

View all monochrome
Arctic Explorer Suit
Lunar Surface
Monochrome Paper Cuts
Quartz Vein Refined
Stone Cairn Trail
Stone Cairn Wisdom