Back to palettes

Palette

Volcanic Ash Field

The raw, stark landscape after a volcanic eruption, cooled and still.

earthminimal5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#363F47#5B6C7C#7C8D9E#2A3138#A06857

Palette guide

How to use Volcanic Ash Field

Overview

The "Volcanic Ash Field" palette captures the raw, stark beauty of a cooled post-eruption landscape. Dominated by cool, deep greys like #363F47 and #2A3138, this collection is softened by lighter, atmospheric blues such as #5B6C7C and #7C8D9E. A single, powerful accent comes from the earthy, rustic orange #A06857, reminiscent of exposed minerals or distant warmth. This palette is ideal for designers seeking a grounded, serious, and naturally inspired aesthetic, providing depth and a touch of organic warmth. It's perfectly suited for projects that need to convey strength, resilience, and understated natural elegance in digital or print.

Best used for

  • Outdoor adventure brand identity
  • Environmental conservation websites
  • Documentary film graphics
  • Industrial design presentations
  • Scientific research data visualizations
  • Modern landscape photography portfolios

Suggested color roles

primary

#2A3138 - A very deep, cool charcoal, ideal for robust backgrounds, main headers, or foundational structural elements, providing significant weight.

secondary

#363F47 - A deep, slightly softer cool grey-blue, perfect for secondary panels, card backgrounds, or prominent text against lighter shades.

accent

#A06857 - A distinctive, earthy rust orange, excellent for calls-to-action, highlights, or graphic elements that need to draw immediate attention and convey warmth.

background

#7C8D9E - A lighter, atmospheric blue-grey that offers a serene, expansive canvas. Ideal for main page backgrounds, providing excellent readability for dark text.

text

#2A3138 or charcoal on lighter backgrounds like #7C8D9E or #5B6C7C for optimal readability. For dark backgrounds, #7C8D9E provides good contrast.

Accessibility notes

  • Ensure sufficient contrast when using #5B6C7C or #7C8D9E for text on mid-range backgrounds.
  • Dark text, such as #2A3138, on the light #7C8D9E background provides excellent readability.
  • The accent color #A06857 needs careful contrast checking when used for text on any background.
  • Avoid low-contrast combinations like #5B6C7C text on a #363F47 background for important information.

Recommended combinations

Stark Horizon

Creates a deep, layered cool interface, ideal for immersive backgrounds, navigation, or complex data displays.

#2A3138 · #363F47 · #5B6C7C

Mineral Warmth

A high-contrast combination perfect for hero sections or calls-to-action, where the rust provides a focal point against cool greys.

#7C8D9E · #A06857 · #2A3138

Ashy Sky

Excellent for softer content blocks, subtle backgrounds, or gradient effects, offering a gentle transition between atmospheric tones.

#5B6C7C · #7C8D9E · #363F47

CSS variables

:root {
  --volcanic-ash-field-1: #363F47;
  --volcanic-ash-field-2: #5B6C7C;
  --volcanic-ash-field-3: #7C8D9E;
  --volcanic-ash-field-4: #2A3138;
  --volcanic-ash-field-5: #A06857;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-field": {
        1: "#363F47",
        2: "#5B6C7C",
        3: "#7C8D9E",
        4: "#2A3138",
        5: "#A06857",
      }
    }
  }
}

Related searches

volcanic earth tonescool grey and rust palettenatural landscape colorsstark earth UI designmuted blue grey orange

Palette colors

Hex values

Color 1#363F47
·
Color 2#5B6C7C
·
Color 3#7C8D9E
·
Color 4#2A3138
·
Color 5#A06857
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.1:1AA18
1.2:1Fail
2.4:1Fail
2
2:1Fail
1.6:1Fail
2.4:1Fail
1.2:1Fail
3
3.1:1AA18
1.6:1Fail
3.9:1AA18
1.3:1Fail
4
1.2:1Fail
2.4:1Fail
3.9:1AA18
2.9:1Fail
5
2.4:1Fail
1.2:1Fail
1.3:1Fail
2.9:1Fail

Similar palettes

More like Volcanic Ash Field

View all earth