Palette

Monochromatic Graphite

A subtle gradient of rich greys, from deep charcoal to pale silver, like sketches from a graphite pencil.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2B2B#5C5C5C#8A8A8A#B3B3B3#DCDCDC

Palette guide

How to use Monochromatic Graphite

Overview

The Monochromatic Graphite palette offers a sophisticated gradient of rich grays, evoking the precision and artistic depth of graphite sketches. Ranging from a deep charcoal #2B2B2B to a very light silver #DCDCDC, with perfectly balanced mid-tones like #5C5C5C, #8A8A8A, and #B3B3B3. This palette is ideal for designs that require a serious, elegant, and focused aesthetic. Designers can use these shades to create powerful visual hierarchies and a sense of understated luxury in digital interfaces, print media, or fine art presentations. Developers will find this palette excellent for creating a clean, professional, and easily maintainable look.

Best used for

Art and design portfolios
Luxury brand websites or apps
Professional consulting services
High-end photography showcases
Editorial layouts and publications
Minimalist software interfaces

Suggested color roles

primary

#2B2B2B, a deep charcoal, serves as a strong, grounding primary color for bold headings, navigation, or critical calls to action.

secondary

#5C5C5C is excellent for subheadings, borders, or darker background panels, offering a subtle yet clear contrast.

accent

#8A8A8A can be used for secondary text, icons, or subtle interactive elements, maintaining the sophisticated gray scale.

background

#DCDCDC or #B3B3B3 creates a clean, bright backdrop, reminiscent of drawing paper, ensuring high readability for darker text.

text

#2B2B2B or #5C5C5C on lighter backgrounds like #DCDCDC or white provides optimal legibility for body text.

Accessibility notes

Ensure sufficient contrast when using #B3B3B3 text on #DCDCDC for small text, as it might not meet WCAG AA standards.
Always use a dark gray like #2B2B2B for primary text on light backgrounds to ensure maximum readability.
Interactive elements should have clear visual cues (e.g., a darker hover state) to indicate their functionality.
Avoid using #DCDCDC text on #B3B3B3 for any essential information due to low contrast.

Recommended combinations

Sketchbook Contrast

Ideal for headers and main content, with #DCDCDC as background, #2B2B2B for titles, and #5C5C5C for supporting details.

#2B2B2B · #DCDCDC · #5C5C5C

Pencil Shading

Creates a harmonious, layered look for UI components or content blocks, offering subtle depth and an artistic feel.

#5C5C5C · #8A8A8A · #B3B3B3

Graphite Detail

Excellent for minimalist web pages, using #DCDCDC as the dominant background, #2B2B2B for primary text, and #8A8A8A for subtle accents.

#DCDCDC · #2B2B2B · #8A8A8A

CSS variables

:root {
  --monochromatic-graphite-1: #2B2B2B;
  --monochromatic-graphite-2: #5C5C5C;
  --monochromatic-graphite-3: #8A8A8A;
  --monochromatic-graphite-4: #B3B3B3;
  --monochromatic-graphite-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochromatic-graphite": {
        1: "#2B2B2B",
        2: "#5C5C5C",
        3: "#8A8A8A",
        4: "#B3B3B3",
        5: "#DCDCDC",
      }
    }
  }
}

Hex values

Color 1#2B2B2B

Color 2#5C5C5C

Color 3#8A8A8A

Color 4#B3B3B3

Color 5#DCDCDC

Accessibility

Contrast checker

2.1:1Fail

4.1:1AA18

6.8:1AA

10.3:1AAA

2.1:1Fail

1.9:1Fail

3.2:1AA18

4.9:1AA

4.1:1AA18

1.9:1Fail

1.6:1Fail

2.5:1Fail

6.8:1AA

3.2:1AA18

1.6:1Fail

1.5:1Fail

10.3:1AAA

4.9:1AA

2.5:1Fail

1.5:1Fail

Similar palettes

More like Monochromatic Graphite

View all monochrome

City Grayscale View

Monochromatic Ink Wash

Monochrome Slate

Shadow Scale Study

Abstract Canvas Swirl

Abstract Ink Flow