Palette

Charcoal Graphite Tones

A stark, yet sophisticated range of deep grays, capturing the essence of charcoal sketches.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Charcoal Graphite Tones 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 Graphite Tones.

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 Graphite Tones

Overview

The Charcoal Graphite Tones palette offers a stark yet sophisticated gradient of deep greys, capturing the raw essence of charcoal sketches. Ranging from the profound depth of #1A1A1A to the gentle lightness of #CCCCCC, with intermediate shades like #333333, #666666, and #999999, this palette is a masterclass in monochrome. It provides designers and developers with a powerful tool for creating elegant, minimalist, and high-contrast designs. This versatile set is perfect for establishing clear visual hierarchy, evoking a sense of professionalism, and delivering content with understated authority across various digital and print mediums.

Best used for

Minimalist branding and logo design
Corporate websites and professional portfolios
Technical documentation and reports
Photography and art exhibition layouts
Dark mode UI/UX themes
Architectural design presentations

Suggested color roles

primary

Establish #1A1A1A as the dominant background or foundational color for a strong, authoritative presence.

secondary

Use #333333 for major content sections, headers, or as a contrasting element against lighter greys.

accent

Apply #999999 for subtle interactive states, delicate lines, or to provide a soft visual break.

background

Choose #1A1A1A for a dark, immersive canvas, or #CCCCCC for a clean, light backdrop.

text

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

Accessibility notes

Ensure #CCCCCC text on #1A1A1A background meets WCAG contrast standards for all text sizes.
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 to maximize readability.
Always test text color contrast across the entire gradient, especially for interactive elements and form fields.

Recommended combinations

High Contrast

Excellent for primary content: dark background with light text and a slightly lighter dark for secondary elements.

#1A1A1A · #CCCCCC · #333333

Soft Layers

Ideal for creating subtle depth in UI components, card elements, or background patterns.

#666666 · #999999 · #CCCCCC

Text Hierarchy

Use #1A1A1A for main headings on a #CCCCCC background, with #666666 for subheadings or secondary information.

#CCCCCC · #1A1A1A · #666666

CSS variables

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

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-graphite-tones": {
        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 Graphite Tones

View all monochrome

Charcoal River Stone

Charcoal Sketch Palette

Charcoal Sketchbook Grey

Charcoal Whisper Scale

Midnight Tea Ceremony

Monochromatic Ink Wash