Palette

Subtle Charcoal Wash

A classic monochrome foundation of blacks and greys, subtly elevated by a muted cool-toned blue accent.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Subtle Charcoal Wash 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 Subtle Charcoal Wash.

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

Data visualization

#0F0F0F#4A4A4A#7F7F7F#B0B0B0#367688

Palette guide

How to use Subtle Charcoal Wash

Overview

The Subtle Charcoal Wash palette provides a classic monochrome foundation, subtly elevated by a muted cool-toned blue accent. Comprising #0F0F0F (Near Black), #4A4A4A (Dark Grey), #7F7F7F (Medium Grey), #B0B0B0 (Light Grey), and #367688 (Muted Blue), this collection is perfect for designers and developers seeking a minimalist, sophisticated, and professional aesthetic. It offers excellent versatility for creating clean interfaces, elegant branding, and editorial designs where clarity and understated style are paramount. The blue accent adds a hint of personality without disrupting the monochrome harmony.

Best used for

Corporate websites and professional portfolios
Luxury product branding and packaging
Minimalist user interface design
Editorial layouts and digital publications
Architectural and interior design presentations
High-end fashion e-commerce

Suggested color roles

primary

#0F0F0F (Near Black): Use for strong headings, primary calls to action, or as a dominant, sophisticated brand color to convey authority.

secondary

#4A4A4A (Dark Grey): Ideal for body text, secondary headings, or structural UI elements, providing excellent readability and modern appeal.

accent

#367688 (Muted Blue): Perfect for subtle highlights, interactive states, or small graphic elements, offering a cool, refined touch.

background

#B0B0B0 (Light Grey): A clean, neutral background color that provides a soft canvas, allowing text and primary elements to stand out clearly.

text

#7F7F7F (Medium Grey): Suitable for secondary text, metadata, or subtle annotations. For main body text, #0F0F0F or #4A4A4A is highly recommended for optimal readability.

Accessibility notes

Ensure sufficient contrast when using #7F7F7F for text on #B0B0B0 background; it may not meet WCAG AA standards for smaller text.
The darker shades (#0F0F0F, #4A4A4A) provide excellent contrast on #B0B0B0, making them ideal for all critical text.
The accent color #367688 offers good contrast against the grey tones, suitable for interactive elements.
Always verify color contrast for all text and interactive elements to ensure accessibility and readability.

Recommended combinations

Minimalist Core

A fundamental combination for clean, readable layouts, professional branding, and essential UI elements.

#0F0F0F · #4A4A4A · #B0B0B0

Cool Accent

Introduces a subtle touch of color and sophistication, great for highlights, interactive states, or graphic details.

#367688 · #7F7F7F · #0F0F0F

Professional Blend

Offers a balanced and modern look, suitable for supporting content, card backgrounds, or secondary navigation.

#4A4A4A · #B0B0B0 · #367688

CSS variables

:root {
  --subtle-charcoal-wash-1: #0F0F0F;
  --subtle-charcoal-wash-2: #4A4A4A;
  --subtle-charcoal-wash-3: #7F7F7F;
  --subtle-charcoal-wash-4: #B0B0B0;
  --subtle-charcoal-wash-5: #367688;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "subtle-charcoal-wash": {
        1: "#0F0F0F",
        2: "#4A4A4A",
        3: "#7F7F7F",
        4: "#B0B0B0",
        5: "#367688",
      }
    }
  }
}

Hex values

Color 1#0F0F0F

Color 2#4A4A4A

Color 3#7F7F7F

Color 4#B0B0B0

Color 5#367688

Accessibility

Contrast checker

2.2:1Fail

4.8:1AA

8.8:1AAA

3.7:1AA18

2.2:1Fail

4.1:1AA18

1.7:1Fail

4.8:1AA

2.2:1Fail

1.8:1Fail

1.3:1Fail

8.8:1AAA

4.1:1AA18

1.8:1Fail

2.4:1Fail

3.7:1AA18

1.7:1Fail

1.3:1Fail

2.4:1Fail

Similar palettes

More like Subtle Charcoal Wash

Subtle Charcoal Wash

See it in context.

Ready when you are.

Built with Subtle Charcoal Wash.

How to use Subtle Charcoal Wash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Minimalist Core

Cool Accent

Professional Blend

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Subtle Charcoal Wash