Palette

Monochrome Graphite

A sophisticated grayscale gradient, like a detailed pencil sketch, clean and precise.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#333333#666666#999999#CCCCCC#EAEAEA

Palette guide

How to use Monochrome Graphite

Overview

The Monochrome Graphite palette offers a sophisticated grayscale gradient, akin to a detailed pencil sketch – clean and precise. Ranging from the deep #333333 to the soft #EAEAEA, with versatile mid-tones like #666666, #999999, and #CCCCCC, this collection provides an elegant foundation for modern, minimalist designs. Designers can leverage these shades to create professional, subtle, yet impactful interfaces. Developers will find them excellent for constructing clear hierarchies, soft background variations, or any application where a refined, understated, and timeless aesthetic is desired, promoting focus and a sense of quiet professionalism.

Best used for

Elegant corporate websites and branding
Minimalist portfolio sites for designers/artists
Clean, professional application interfaces
High-end product showcases and e-commerce
Editorial layouts for luxury publications
Architectural firm presentations and documents

Suggested color roles

primary

Use #333333 as a strong anchor for headers or footers, providing depth and professional gravitas.

secondary

Employ #666666 for subheadings, secondary information, or subtle dividers, maintaining a cohesive grey scale.

accent

Leverage #CCCCCC for subtle interactive elements, borders, or as a lighter accent against darker tones.

background

Utilize #EAEAEA as a light, airy background for main content areas, promoting readability and a clean aesthetic.

text

For light backgrounds like #EAEAEA or #CCCCCC, use #333333 or #666666 for optimal text readability. For dark backgrounds, use white.

Accessibility notes

Ensure sufficient contrast between text and background; #333333 on #EAEAEA provides excellent readability.
Avoid using #999999 for small text on #CCCCCC backgrounds, as contrast may be insufficient for WCAG AA.
The darkest color, #333333, should be used for critical text elements on lighter backgrounds to ensure legibility.
Always test contrast ratios carefully, especially with the closer shades in this palette to maintain accessibility.

Recommended combinations

Graphite Depth

Ideal for header sections, prominent call-to-actions, or feature blocks that require clear hierarchy and strong impact.

#333333 · #EAEAEA · #666666

Sketch Layers

Excellent for creating subtle depth in UI components, card backgrounds, or layered information displays.

#666666 · #999999 · #CCCCCC

Clean Presentation

Apply for main content areas with a light background, ensuring dark, readable text and clear secondary elements.

#EAEAEA · #333333 · #999999

CSS variables

:root {
  --monochrome-graphite-1: #333333;
  --monochrome-graphite-2: #666666;
  --monochrome-graphite-3: #999999;
  --monochrome-graphite-4: #CCCCCC;
  --monochrome-graphite-5: #EAEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-graphite": {
        1: "#333333",
        2: "#666666",
        3: "#999999",
        4: "#CCCCCC",
        5: "#EAEAEA",
      }
    }
  }
}

Hex values

Color 1#333333

Color 2#666666

Color 3#999999

Color 4#CCCCCC

Color 5#EAEAEA

Accessibility

Contrast checker

2.2:1Fail

4.4:1AA18

7.9:1AAA

10.5:1AAA

2.2:1Fail

2:1Fail

3.6:1AA18

4.8:1AA

4.4:1AA18

2:1Fail

1.8:1Fail

2.4:1Fail

7.9:1AAA

3.6:1AA18

1.8:1Fail

1.3:1Fail

10.5:1AAA

4.8:1AA

2.4:1Fail

1.3:1Fail

Similar palettes

More like Monochrome Graphite

Minimalist Stone Carve

Monochrome Paper Cuts

Subtle Charcoal Wash