Palette

Volcanic Ash Smoke

A stark monochrome journey through the grays of volcanic ash and rising smoke plumes.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A3A3A#5D5D5D#8C8C8C#BDBDBD#EFEFEF

Palette guide

How to use Volcanic Ash Smoke

Overview

The "Volcanic Ash Smoke" palette offers a sophisticated monochrome journey through the grays of volcanic ash and rising smoke plumes. Ranging from the deep, grounding #3A3A3A to the ethereal #EFEFEF, this palette provides a versatile spectrum of cool grays. Mid-tones like #5D5D5D and #8C8C8C ensure smooth transitions and ample contrast opportunities. Designers can leverage this palette for creating elegant, understated designs that convey professionalism, modernity, and a subtle sense of drama. It's particularly effective for UI elements, corporate branding, or content platforms where a clean, focused aesthetic is paramount, allowing content to truly shine.

Best used for

Modern website and app design
Corporate identity and branding
Editorial layouts and typography
Photography and art portfolios
Dark mode interfaces
High-tech product interfaces

Suggested color roles

primary

#3A3A3A - A deep, robust charcoal, ideal for main content areas, headers, or primary navigation, providing a strong base.

secondary

#5D5D5D - A versatile dark gray, suitable for subheadings, secondary buttons, or borders, offering subtle depth.

accent

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

background

#3A3A3A - A deep, sophisticated dark gray that creates an immersive and professional backdrop.

text

#EFEFEF - For clear, readable text on dark backgrounds, or a deep charcoal like #3A3A3A for body text on lighter background elements.

Accessibility notes

Ensure sufficient contrast, especially when using lighter grays like #BDBDBD on #8C8C8C for small text.
Body text should ideally use #EFEFEF on #3A3A3A or #5D5D5D for optimal readability in dark themes.
Avoid using shades like #5D5D5D and #8C8C8C for interactive elements without additional visual cues.
Test contrast ratios for all text and interactive elements to meet WCAG guidelines.

Recommended combinations

Smoke Gradient

Creates a smooth dark-to-light transition, ideal for backgrounds or layered UI.

#3A3A3A · #5D5D5D · #EFEFEF

Clean Professional

Excellent for main content, strong headings, and bright, readable body text.

#3A3A3A · #BDBDBD · #EFEFEF

Subtle Depth

Use for secondary sections or components where a softer, lighter gray aesthetic is desired.

#5D5D5D · #8C8C8C · #EFEFEF

CSS variables

:root {
  --volcanic-ash-smoke-1: #3A3A3A;
  --volcanic-ash-smoke-2: #5D5D5D;
  --volcanic-ash-smoke-3: #8C8C8C;
  --volcanic-ash-smoke-4: #BDBDBD;
  --volcanic-ash-smoke-5: #EFEFEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-smoke": {
        1: "#3A3A3A",
        2: "#5D5D5D",
        3: "#8C8C8C",
        4: "#BDBDBD",
        5: "#EFEFEF",
      }
    }
  }
}

Hex values

Color 1#3A3A3A

Color 2#5D5D5D

Color 3#8C8C8C

Color 4#BDBDBD

Color 5#EFEFEF

Accessibility

Contrast checker

1.7:1Fail

3.4:1AA18

6.1:1AA

9.9:1AAA

1.7:1Fail

2:1Fail

3.5:1AA18

5.7:1AA

3.4:1AA18

2:1Fail

1.8:1Fail

2.9:1Fail

6.1:1AA

3.5:1AA18

1.8:1Fail

1.6:1Fail

9.9:1AAA

5.7:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Volcanic Ash Smoke