Back to palettes

Palette

Volcanic Ash Haze

Subtle and smoky grays, reminiscent of volcanic ash suspended in the distant air.

neutraldark5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A1A7AB#82898D#666B70#4D5054#303337

Palette guide

How to use Volcanic Ash Haze

Overview

The "Volcanic Ash Haze" palette is a sophisticated neutral collection, offering a range of smoky grays perfect for creating subtle yet impactful designs. This collection transitions smoothly from the lighter #A1A7AB to the deep, grounding #303337, providing excellent depth. Designers can leverage hues like #82898D and #4D5054 to build strong visual hierarchies and elegant interfaces. The muted quality of these colors makes them ideal for backgrounds, typography, and UI elements where a calm, professional aesthetic is desired without being overly stark. Developers will find these consistent grays easy to implement for consistent branding across various components, ensuring a cohesive user experience.

Best used for

  • Corporate websites and branding
  • Minimalist UI design
  • Professional presentations
  • Photography portfolios
  • Architectural visualizations
  • Tech product interfaces

Suggested color roles

primary

#4D5054 - A robust mid-dark gray, excellent for main content areas or primary navigation, providing a stable foundation.

secondary

#666B70 - A slightly lighter gray, suitable for subheadings, secondary buttons, or defining sections within a layout.

accent

#A1A7AB - The lightest shade, perfect for subtle highlights, interactive states, or delicate outlines against darker elements.

background

#303337 - A deep, dark gray that creates a sophisticated and immersive backdrop, making lighter elements pop.

text

#A1A7AB - For light text on dark backgrounds, or a near-black like #303337 for body text on lighter background elements.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter grays like #A1A7AB on #82898D.
  • Body text should ideally use darker grays like #303337 or #4D5054 on light backgrounds for readability.
  • Avoid using similar shades (e.g., #82898D and #666B70) for adjacent interactive elements without clear visual indicators.
  • Test colorblind accessibility; rely on more than just color for conveying information, especially with this monochromatic range.

Recommended combinations

Subtle Depth

Ideal for creating deep, layered backgrounds with subtle text and highlights in web interfaces.

#303337 · #4D5054 · #A1A7AB

Corporate Professional

Excellent for main content, subheadings, and UI elements in a professional setting.

#4D5054 · #666B70 · #82898D

Elegant Contrast

Use the darkest for backgrounds, the lightest for primary text, and the mid-tone for secondary text or accents.

#303337 · #A1A7AB · #82898D

CSS variables

:root {
  --volcanic-ash-haze-1: #A1A7AB;
  --volcanic-ash-haze-2: #82898D;
  --volcanic-ash-haze-3: #666B70;
  --volcanic-ash-haze-4: #4D5054;
  --volcanic-ash-haze-5: #303337;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-haze": {
        1: "#A1A7AB",
        2: "#82898D",
        3: "#666B70",
        4: "#4D5054",
        5: "#303337",
      }
    }
  }
}

Related searches

smoky gray color schemeneutral website paletteprofessional dark gray colorsminimalist ash tonessubtle UI design grays

Palette colors

Hex values

Color 1#A1A7AB
·
Color 2#82898D
·
Color 3#666B70
·
Color 4#4D5054
·
Color 5#303337
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
3.3:1AA18
5.2:1AA
2
1.5:1Fail
1.5:1Fail
2.3:1Fail
3.6:1AA18
3
2.2:1Fail
1.5:1Fail
1.5:1Fail
2.4:1Fail
4
3.3:1AA18
2.3:1Fail
1.5:1Fail
1.6:1Fail
5
5.2:1AA
3.6:1AA18
2.4:1Fail
1.6:1Fail

Similar palettes

More like Volcanic Ash Haze

View all neutral
Volcanic Ash Drift
Volcanic Ash
Volcanic Ash Cloud
Volcanic Ash Dawn
Gargoyle Grey
Haunted Library Pages