Back to palettes

Palette

Volcanic Ash Drift

Subtle, dusty grays reflecting fine volcanic ash settled gently across a subdued landscape.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F5F5DC#D3D3D3#B0B0B0#8A8A8A#616161

Palette guide

How to use Volcanic Ash Drift

Overview

The "Volcanic Ash Drift" palette offers a serene collection of subtle, dusty grays, evoking the gentle settlement of fine volcanic ash. This gradient ranges from the near-white #F5F5DC to the deeper #616161, providing a sophisticated and earthy foundation for minimalist designs. The intermediate tones, #D3D3D3, #B0B0B0, and #8A8A8A, allow for nuanced layering and the creation of clear visual hierarchies within a cohesive, subdued aesthetic. It's an excellent choice for designers aiming for a calm, organic, and modern feel, ensuring clarity and an understated elegance in digital and print media, embodying natural tranquility.

Best used for

  • Eco-friendly product packaging
  • Spa and wellness brand identity
  • Minimalist lifestyle blogs
  • Art and craft portfolio websites
  • Soft, natural-themed UI designs
  • Sustainable fashion e-commerce

Suggested color roles

primary

#616161 - A grounding mid-dark grey, perfect for strong typography, primary buttons, or robust structural elements that require presence.

secondary

#8A8A8A - A versatile mid-grey, excellent for secondary content, dividers, or subtle backgrounds that need to stand out from lighter tones.

accent

#F5F5DC - The lightest, almost off-white, ideal for soft highlights, hover states, or delicate graphic elements against darker shades, adding brightness.

background

#D3D3D3 - A light, neutral grey that provides an expansive, clean canvas. Excellent for main page backgrounds, offering good readability for darker text.

text

#616161 or charcoal on lighter backgrounds like #F5F5DC or #D3D3D3 for optimal readability. For darker backgrounds, #F5F5DC provides good contrast.

Accessibility notes

  • Ensure sufficient contrast when using #B0B0B0 or #8A8A8A for text on backgrounds like #D3D3D3.
  • Dark text, such as #616161, on the light #F5F5DC or #D3D3D3 background provides excellent readability.
  • Avoid low-contrast combinations like #D3D3D3 text on a #B0B0B0 background for essential information.
  • Always check WCAG AA contrast ratios, especially for smaller font sizes and interactive elements.

Recommended combinations

Gentle Layers

Creates a soft, airy interface, ideal for content cards, light background patterns, or areas needing a subtle depth.

#F5F5DC · #D3D3D3 · #B0B0B0

Grounded Content

Uses the darkest grey for primary text against the lightest background, with a mid-tone for supporting information, ensuring clarity.

#616161 · #8A8A8A · #F5F5DC

Earthy Progression

Excellent for sections where a gradual, subtle darkening is desired, such as navigation hover states or layered informational blocks.

#D3D3D3 · #B0B0B0 · #616161

CSS variables

:root {
  --volcanic-ash-drift-1: #F5F5DC;
  --volcanic-ash-drift-2: #D3D3D3;
  --volcanic-ash-drift-3: #B0B0B0;
  --volcanic-ash-drift-4: #8A8A8A;
  --volcanic-ash-drift-5: #616161;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-drift": {
        1: "#F5F5DC",
        2: "#D3D3D3",
        3: "#B0B0B0",
        4: "#8A8A8A",
        5: "#616161",
      }
    }
  }
}

Related searches

light grey monochrome paletteminimalist earthy tonessoft ash color schemenatural grey UI designsubtle neutral palette

Palette colors

Hex values

Color 1#F5F5DC
·
Color 2#D3D3D3
·
Color 3#B0B0B0
·
Color 4#8A8A8A
·
Color 5#616161
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
3.1:1AA18
5.6:1AA
2
1.4:1Fail
1.4:1Fail
2.3:1Fail
4.1:1AA18
3
2:1Fail
1.4:1Fail
1.6:1Fail
2.9:1Fail
4
3.1:1AA18
2.3:1Fail
1.6:1Fail
1.8:1Fail
5
5.6:1AA
4.1:1AA18
2.9:1Fail
1.8:1Fail

Similar palettes

More like Volcanic Ash Drift

View all monochrome
Volcanic Ash Glaze
Volcanic Ash Ridge
Ancient Volcanic Ash
Ash Cloud Layers
Granite Quarry Scale
Monochrome Ash Veil