Back to palettes

Palette

Ash Cloud Layers

A subtle, soft gradient of cool grays, like the shifting layers of clouds on a calm, overcast day.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ash Cloud Layers 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 Ash Cloud Layers.

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

Data visualization

#2B2F33#555A5E#80868B#AAB2B9#D5DEE5

Palette guide

How to use Ash Cloud Layers

Overview

The Ash Cloud Layers palette presents a subtle, soft gradient of cool grays, reminiscent of shifting layers of clouds on a calm, overcast day. This monochromatic scheme ranges from the deep charcoal of #2B2F33, through mid-tones like #555A5E and #80868B, to the airy lightness of #AAB2B9 and #D5DEE5. It's a highly versatile and professional palette, offering a clean, minimalist aesthetic for designers and developers. Perfect for creating sophisticated interfaces, corporate branding, or elegant print materials where understated elegance and clarity are paramount.

Best used for

  • Minimalist website designs
  • Corporate branding and identity
  • Professional presentation templates
  • Tech and software interfaces
  • Architectural visualization
  • Sophisticated fashion editorials

Suggested color roles

primary

#2B2F33 serves as a strong, foundational primary color, ideal for main headings and key UI elements.

secondary

#555A5E provides a supportive, slightly softer gray for secondary information or subtle dividers.

accent

#AAB2B9 acts as a subtle accent, perfect for hover states, light borders, or background textures.

background

#D5DEE5 offers a clean, airy, and neutral background, providing excellent contrast for darker text.

text

#2B2F33 ensures optimal readability for primary text on lighter backgrounds, while #555A5E can be used for secondary text.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially for #2B2F33 on #D5DEE5.
  • Avoid using lighter grays like #AAB2B9 for small text on #D5DEE5 backgrounds due to poor contrast.
  • Maintain clear visual hierarchy by varying shades for different levels of information.
  • Test readability across various screen types and lighting conditions for optimal user experience.

Recommended combinations

Minimalist Base

A foundational combination for clean layouts, providing clear contrast and visual depth.

#D5DEE5 · #80868B · #2B2F33

Subtle Depth

Creates a sophisticated layered effect, ideal for UI elements or subtle branding gradients.

#AAB2B9 · #555A5E · #2B2F33

Clean Gradient

Perfect for backgrounds or large design blocks that require a smooth, modern transition.

#2B2F33 · #555A5E · #80868B

CSS variables

:root {
  --ash-cloud-layers-1: #2B2F33;
  --ash-cloud-layers-2: #555A5E;
  --ash-cloud-layers-3: #80868B;
  --ash-cloud-layers-4: #AAB2B9;
  --ash-cloud-layers-5: #D5DEE5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ash-cloud-layers": {
        1: "#2B2F33",
        2: "#555A5E",
        3: "#80868B",
        4: "#AAB2B9",
        5: "#D5DEE5",
      }
    }
  }
}

Related searches

cool gray paletteminimalist color schememonochromatic graysprofessional design colorssubtle UI colors

Palette colors

Hex values

Color 1#2B2F33
·
Color 2#555A5E
·
Color 3#80868B
·
Color 4#AAB2B9
·
Color 5#D5DEE5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.7:1AA18
6.3:1AA
9.9:1AAA
2
1.9:1Fail
1.9:1Fail
3.2:1AA18
5.1:1AA
3
3.7:1AA18
1.9:1Fail
1.7:1Fail
2.7:1Fail
4
6.3:1AA
3.2:1AA18
1.7:1Fail
1.6:1Fail
5
9.9:1AAA
5.1:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Ash Cloud Layers

View all monochrome
Ancient Volcanic Ash
Charcoal Sketch Grey
Granite Canyon Flow
Granite Quarry Scale
Graphite Sketch Subtle
Grayscale Urban Haze