Back to palettes

Palette

Volcanic Ash Ridge

Raw, powerful hues from volcanic landscapes, featuring deep ash and molten earth tones.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4C4C4C#36454F#8B4513#C0C0C0#2F4F4F

Palette guide

How to use Volcanic Ash Ridge

Overview

The "Volcanic Ash Ridge" palette (id: volcanic-ash-ridge-2) evokes the raw, powerful essence of volcanic landscapes with its deep ash and molten earth tones. This striking collection features a cool dark gray #36454F, a rich brown #8B4513 reminiscent of cooled lava, and the lighter, stony #C0C0C0. The deep #2F4F4F provides a strong base, while #4C4C4C offers a versatile mid-tone. Designers can utilize this palette for projects requiring a sense of ruggedness, warmth, and natural intensity. It’s particularly effective for creating sophisticated, moody interfaces or branding that needs to convey strength and authenticity.

Best used for

  • Outdoor adventure brands
  • Luxury rustic interior design
  • Photography and art portfolios
  • Dark mode interfaces
  • Gaming and fantasy themes
  • Earthy product packaging

Suggested color roles

primary

#36454F - A deep, charcoal-like gray-blue, ideal for main content blocks or navigation, providing a sturdy foundation.

secondary

#4C4C4C - A versatile dark gray, suitable for subheadings, secondary buttons, or borders, complementing the primary.

accent

#8B4513 - A rich, fiery brown, perfect for drawing attention to calls-to-action, interactive elements, or key data points.

background

#2F4F4F - A very dark slate gray, offering a dramatic and immersive background for a moody aesthetic.

text

#C0C0C0 - For primary text on dark backgrounds, ensuring excellent readability, or a charcoal like #4C4C4C on light elements.

Accessibility notes

  • Ensure high contrast between the accent color #8B4513 and its background, as it's a mid-tone.
  • Text in #C0C0C0 on #2F4F4F or #36454F should pass WCAG AA/AAA for readability.
  • Avoid using #4C4C4C and #36454F too close together for small text due to their similar dark values.
  • Use #8B4513 sparingly as an accent; relying on it for large blocks of text might strain eyes.

Recommended combinations

Earthy Contrast

A strong dark background with bright text and a powerful, warm accent.

#2F4F4F · #C0C0C0 · #8B4513

Rugged Base

Ideal for robust UI elements, main content areas, and clear typography.

#36454F · #4C4C4C · #C0C0C0

Fiery Depth

Creates a dramatic, intense look suitable for hero sections or impactful branding.

#2F4F4F · #8B4513 · #4C4C4C

CSS variables

:root {
  --volcanic-ash-ridge-2-1: #4C4C4C;
  --volcanic-ash-ridge-2-2: #36454F;
  --volcanic-ash-ridge-2-3: #8B4513;
  --volcanic-ash-ridge-2-4: #C0C0C0;
  --volcanic-ash-ridge-2-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-ridge-2": {
        1: "#4C4C4C",
        2: "#36454F",
        3: "#8B4513",
        4: "#C0C0C0",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

dark earth tone palettevolcanic color schemerugged brand colorsmoody gray brown palettelava rock color combination

Palette colors

Hex values

Color 1#4C4C4C
·
Color 2#36454F
·
Color 3#8B4513
·
Color 4#C0C0C0
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.2:1Fail
4.7:1AA
1:1Fail
2
1.2:1Fail
1.4:1Fail
5.4:1AA
1.1:1Fail
3
1.2:1Fail
1.4:1Fail
3.9:1AA18
1.3:1Fail
4
4.7:1AA
5.4:1AA
3.9:1AA18
4.9:1AA
5
1:1Fail
1.1:1Fail
1.3:1Fail
4.9:1AA

Similar palettes

More like Volcanic Ash Ridge

View all dark
Basalt Ridge Shadow
Crater Lake Depth
Fiery Volcanic Ash
Lava Flow Ember
Magma Flow Descent
Obsidian Flow Texture