Palette

Monochrome Ash Veil

A somber yet elegant gradient of greys, like a soft layer of volcanic ash, conveying quiet depth.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochrome Ash Veil 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 Monochrome Ash Veil.

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

Data visualization

#2E2E2E#5C5C5C#8A8A8A#B8B8B8#E6E6E6

Palette guide

How to use Monochrome Ash Veil

Overview

The "Monochrome Ash Veil" palette presents a sophisticated and subtle gradient of greys, from the deep #2E2E2E to the soft #E6E6E6, encompassing mid-tones like #5C5C5C, #8A8A8A, and #B8B8B8. This collection evokes a sense of quiet depth and understated elegance, much like a fine layer of ash. It's a versatile choice for designers and developers looking to create calm, minimalist, and refined digital experiences. The gentle progression of shades allows for nuanced visual hierarchies and a polished aesthetic, making it excellent for projects that require a serene yet impactful presence, without relying on vibrant colors.

Best used for

Minimalist portfolio websites
High-end fashion branding
Serene meditation apps
E-commerce for luxury goods
Art gallery websites
Professional corporate reports

Suggested color roles

primary

Use #2E2E2E as a strong, grounding color for main sections, headers, or backgrounds in a sophisticated dark theme.

secondary

Apply #5C5C5C for secondary content blocks, sidebars, or subtle dividers, maintaining a sense of depth.

accent

Utilize #B8B8B8 or #E6E6E6 for subtle highlights, interactive elements, or iconography that needs gentle emphasis.

background

Employ #E6E6E6 for clean, spacious content areas, or #8A8A8A for a slightly darker, more contemplative backdrop.

text

For dark backgrounds, use #E6E6E6 or #B8B8B8. For light backgrounds like #E6E6E6, use #2E2E2E or #5C5C5C for body text.

Accessibility notes

Ensure #2E2E2E text on #E6E6E6 backgrounds meets WCAG AA contrast standards.
Avoid using #B8B8B8 text on #E6E6E6 backgrounds for small or critical text.
When using #5C5C5C as a background, ensure text in #B8B8B8 or #E6E6E6 has sufficient contrast.
Test all color pairings with accessibility tools to guarantee readability across devices.

Recommended combinations

Elegant Contrast

A powerful dark base (#2E2E2E) with crisp light text (#E6E6E6) and a medium grey for secondary information (#5C5C5C).

#2E2E2E · #E6E6E6 · #5C5C5C

Subtle Layers

Creates a harmonious layered effect, suitable for complex UI elements or data visualizations with soft transitions.

#5C5C5C · #8A8A8A · #B8B8B8

Clean Read

Use #2E2E2E for headings, #8A8A8A for subheadings, and #E6E6E6 as a background for clean, easy-to-read content.

#2E2E2E · #8A8A8A · #E6E6E6

CSS variables

:root {
  --monochrome-ash-veil-1: #2E2E2E;
  --monochrome-ash-veil-2: #5C5C5C;
  --monochrome-ash-veil-3: #8A8A8A;
  --monochrome-ash-veil-4: #B8B8B8;
  --monochrome-ash-veil-5: #E6E6E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-ash-veil": {
        1: "#2E2E2E",
        2: "#5C5C5C",
        3: "#8A8A8A",
        4: "#B8B8B8",
        5: "#E6E6E6",
      }
    }
  }
}

Hex values

Color 1#2E2E2E

Color 2#5C5C5C

Color 3#8A8A8A

Color 4#B8B8B8

Color 5#E6E6E6

Accessibility

Contrast checker

2:1Fail

3.9:1AA18

6.8:1AA

10.9:1AAA

2:1Fail

1.9:1Fail

3.4:1AA18

5.4:1AA

3.9:1AA18

1.9:1Fail

1.7:1Fail

2.8:1Fail

6.8:1AA

3.4:1AA18

1.7:1Fail

1.6:1Fail

10.9:1AAA

5.4:1AA

2.8:1Fail

1.6:1Fail

Similar palettes

More like Monochrome Ash Veil

View all monochrome

Charcoal Sketchbook Grey

Cloud Grey Mirage

Ghostly Fog Hues

Monochromatic Mist

Monochrome Charcoal Depth

Morning Fog Grey