Palette

Charcoal Whisper Scale

A sophisticated grayscale gradient, moving from deep, shadowy charcoal to soft, whispering silver.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Charcoal Whisper Scale 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 Charcoal Whisper Scale.

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

Data visualization

#1A1A1A#333333#666666#999999#CCCCCC

Palette guide

How to use Charcoal Whisper Scale

Overview

The Charcoal Whisper Scale palette is a sophisticated grayscale gradient, gracefully moving from the deep, shadowy #1A1A1A to the soft, whispering #CCCCCC. This collection includes perfectly balanced intermediate tones such as #333333, #666666, and #999999, offering expansive versatility for designers and developers. It is ideal for creating sleek, modern, and highly professional designs that emphasize clarity and understated elegance. This palette excels in establishing clear visual hierarchy and a refined user experience across various digital and print applications, from minimalist websites to sophisticated corporate branding.

Best used for

High-end tech company branding and websites
Modern architectural portfolios
Luxury fashion e-commerce platforms
Professional services marketing materials
Dark mode UI/UX themes with subtle variations
Editorial design for contemporary art publications

Suggested color roles

primary

Utilize #1A1A1A as the foundational color for main backgrounds, navigation, and primary branding elements.

secondary

Employ #333333 for major content blocks, prominent headers, or to provide subtle visual separation.

accent

Apply #999999 for delicate interactive elements, borders, or to highlight secondary information without stark contrast.

background

Choose #1A1A1A for a deep, immersive background, or #CCCCCC for a crisp, clean canvas.

text

For dark backgrounds, use #CCCCCC or #999999 for excellent readability. On light backgrounds like #CCCCCC, #1A1A1A is ideal for all text.

Accessibility notes

Ensure #CCCCCC text on #1A1A1A background meets WCAG contrast standards for body text.
Avoid using #666666 text on #999999 backgrounds for small text, as contrast may be insufficient.
Use #333333 for headings and important information on #CCCCCC backgrounds for strong readability.
Test interactive elements with #999999 against adjacent tones to ensure sufficient visual distinction.

Recommended combinations

Sleek Contrast

Ideal for main content areas: deep background, light text, and a slightly lighter dark for subheadings.

#1A1A1A · #CCCCCC · #333333

Whisper Layers

Create subtle layered effects in UI cards, panels, or background patterns, mimicking gentle shading.

#333333 · #666666 · #999999

Modern Read

Use #1A1A1A for strong visual elements on a #CCCCCC canvas, with #666666 for delicate details or lines.

#CCCCCC · #1A1A1A · #666666

CSS variables

:root {
  --charcoal-whisper-scale-1: #1A1A1A;
  --charcoal-whisper-scale-2: #333333;
  --charcoal-whisper-scale-3: #666666;
  --charcoal-whisper-scale-4: #999999;
  --charcoal-whisper-scale-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-whisper-scale": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#666666",
        4: "#999999",
        5: "#CCCCCC",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#333333

Color 3#666666

Color 4#999999

Color 5#CCCCCC

Accessibility

Contrast checker

1.4:1Fail

3:1AA18

6.1:1AA

10.8:1AAA

1.4:1Fail

2.2:1Fail

4.4:1AA18

7.9:1AAA

3:1AA18

2.2:1Fail

2:1Fail

3.6:1AA18

6.1:1AA

4.4:1AA18

2:1Fail

1.8:1Fail

10.8:1AAA

7.9:1AAA

3.6:1AA18

1.8:1Fail

Similar palettes

More like Charcoal Whisper Scale

View all monochrome

Architectural Grid Hues

Grey Scale Journey

Minimalist Stone Carve

Steel City Sheen

Art Gallery Minimal

Brushed Steel Aura