Back to palettes

Palette

Soot and Ash Veil

A stark, yet nuanced palette from deep black to muted grey, capturing textures of soot and ash.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#3A3A3A#5A5A5A#7A7A7A#9A9A9A

Palette guide

How to use Soot and Ash Veil

Overview

The Soot and Ash Veil palette offers a stark yet nuanced monochrome spectrum, capturing the textures of soot and ash from deep black to muted grey. This collection includes a profound black (#1A1A1A), a very dark grey (#3A3A3A), a dark grey (#5A5A5A), a medium grey (#7A7A7A), and a light grey (#9A9A9A). Designers will find this palette perfect for creating sophisticated, minimalist, and contemporary designs that exude elegance and focus. It's particularly effective for projects requiring a strong, dramatic backdrop or a clean, uncluttered aesthetic. Developers can utilize these shades for impactful dark mode interfaces, sophisticated branding, or any application where a powerful, timeless, and refined visual presence is desired, ensuring excellent contrast and visual hierarchy.

Best used for

  • Minimalist and modern web design
  • Luxury product packaging (dark aesthetics)
  • Photography and art exhibition sites
  • Dark mode application interfaces
  • High-end corporate branding
  • Fashion and lifestyle platforms

Suggested color roles

primary

Use #1A1A1A as the dominant background or for bold typography, creating a strong, dramatic foundation.

secondary

Apply #3A3A3A for main content areas or secondary headers, offering a softer yet deep contrast.

accent

Utilize #9A9A9A for subtle highlights, borders, or hover states, providing a clean, crisp accent.

background

Employ #1A1A1A for a truly dark experience or #3A3A3A for a slightly less intense dark background.

text

White or very light grey text (like #9A9A9A) is essential for readability on darker shades. #1A1A1A works for large text on #9A9A9A.

Accessibility notes

  • Ensure white or #9A9A9A text has sufficient contrast on #1A1A1A, #3A3A3A, and #5A5A5A.
  • Avoid using #7A7A7A text on #5A5A5A backgrounds, as contrast will be poor.
  • For optimal readability, aim for high contrast ratios, especially for body text.
  • Always use a WCAG contrast checker to verify all text and background pairings.

Recommended combinations

Deep Contrast

A classic dark mode setup: #1A1A1A for the background, #9A9A9A for primary text, and #5A5A5A for secondary text or subtle dividers.

#1A1A1A · #9A9A9A · #5A5A5A

Layered Ash

Excellent for creating visual hierarchy in cards or sections, with #3A3A3A as the base, #7A7A7A for content, and #5A5A5A for borders or details.

#3A3A3A · #7A7A7A · #5A5A5A

Soot Highlight

Use #9A9A9A as a light background for focal elements, with #1A1A1A for bold headings and #3A3A3A for body text, creating a strong, modern look.

#9A9A9A · #1A1A1A · #3A3A3A

CSS variables

:root {
  --soot-and-ash-veil-1: #1A1A1A;
  --soot-and-ash-veil-2: #3A3A3A;
  --soot-and-ash-veil-3: #5A5A5A;
  --soot-and-ash-veil-4: #7A7A7A;
  --soot-and-ash-veil-5: #9A9A9A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soot-and-ash-veil": {
        1: "#1A1A1A",
        2: "#3A3A3A",
        3: "#5A5A5A",
        4: "#7A7A7A",
        5: "#9A9A9A",
      }
    }
  }
}

Related searches

monochrome dark paletteblack and grey aestheticminimalist elegant colorssoot inspired color schemecontemporary dark UI

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#3A3A3A
·
Color 3#5A5A5A
·
Color 4#7A7A7A
·
Color 5#9A9A9A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4.1:1AA18
6.2:1AA
2
1.5:1Fail
1.6:1Fail
2.6:1Fail
4:1AA18
3
2.5:1Fail
1.6:1Fail
1.6:1Fail
2.5:1Fail
4
4.1:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.2:1AA
4:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Soot and Ash Veil

View all monochrome