Palette

Volcanic Ash Glaze

Somber grays and deep blues reflect the mysterious beauty of volcanic ash landscapes.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5F9EA0#B0C4DE#808080#2F4F4F

Palette guide

How to use Volcanic Ash Glaze

Overview

This Volcanic Ash Glaze palette marries somber greys with deep, serene blues, reflecting the mysterious beauty of volcanic ash landscapes. A robust charcoal grey (#36454F) and a dark slate grey (#2F4F4F) provide a grounding foundation, while a deep teal-blue (#5F9EA0) introduces a sophisticated, muted color accent. A lighter, dusty blue (#B0C4DE) adds a touch of ethereal lightness, complemented by a versatile medium grey (#808080). This palette is excellent for designs aiming for a calm, introspective, yet strong aesthetic, suitable for professional services, environmental initiatives, or any project desiring a blend of natural depth and understated elegance.

Best used for

Environmental organization websites
Corporate professional branding
Spa and wellness digital presence
Educational institution design
Nature documentary aesthetics
Minimalist tech interfaces

Suggested color roles

primary

#36454F - A deep, stable grey for main backgrounds, navigation, or large text blocks, providing a sense of gravitas.

secondary

#2F4F4F - A slightly different dark grey-green, ideal for secondary content areas, panels, or subtle textured backgrounds.

accent

#5F9EA0 - A muted, sophisticated teal-blue for calls-to-action, key iconography, or subtle decorative elements that need a unique color pop.

background

#B0C4DE - A soft, light blue that can serve as a clean content background, offering a serene contrast to darker elements.

text

#36454F - Dark text on light backgrounds like #B0C4DE. For text on darker backgrounds, use white or a very light grey for readability.

Accessibility notes

Ensure #36454F text on #B0C4DE meets WCAG AA contrast for readability.
Text on #5F9EA0 may require white or very light grey text to meet contrast standards.
Avoid using #808080 on #B0C4DE for small text due to potentially low contrast; reserve for larger elements.
Test all interactive elements, especially those using blue accents, for clear visual states and distinction.

Recommended combinations

Deep Ocean Ash

A dark grey background with a soft blue content area and a teal accent for a calm yet sophisticated look.

#36454F · #B0C4DE · #5F9EA0

Muted Serenity

A medium grey base with a darker grey-green and a muted teal for a subtle, professional color scheme.

#808080 · #2F4F4F · #5F9EA0

Cool Contrast

A light blue background with dark grey text and a medium grey for secondary elements, offering clear hierarchy.

#B0C4DE · #36454F · #808080

CSS variables

:root {
  --volcanic-ash-glaze-4-1: #36454F;
  --volcanic-ash-glaze-4-2: #5F9EA0;
  --volcanic-ash-glaze-4-3: #B0C4DE;
  --volcanic-ash-glaze-4-4: #808080;
  --volcanic-ash-glaze-4-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-glaze-4": {
        1: "#36454F",
        2: "#5F9EA0",
        3: "#B0C4DE",
        4: "#808080",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5F9EA0

Color 3#B0C4DE

Color 4#808080

Color 5#2F4F4F

Accessibility

Contrast checker

3.2:1AA18

5.6:1AA

2.5:1Fail

1.1:1Fail

3.2:1AA18

1.7:1Fail

1.3:1Fail

2.9:1Fail

5.6:1AA

1.7:1Fail

2.2:1Fail

5:1AA

2.5:1Fail

1.3:1Fail

2.2:1Fail

2.3:1Fail

1.1:1Fail

2.9:1Fail

5:1AA

2.3:1Fail

Similar palettes

More like Volcanic Ash Glaze