Palette

Graphite Sketch Subtle

A refined scale of greys, like the delicate tonal variations of a graphite drawing.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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 Graphite Sketch Subtle

Overview

The "Graphite Sketch Subtle" palette offers a refined spectrum of greys, perfect for designs that require understated elegance and precise tonal variations. From the deep, impactful #1A1A1A to the gentle, soft #CCCCCC, this monochromatic collection, including versatile shades like #333333, #666666, and #999999, mimics the delicate nuances of a fine art graphite drawing. Designers and developers can leverage this palette to create sophisticated branding, high-end product showcases, or minimalist user interfaces, focusing on subtle depth and a professional, serene aesthetic. It avoids harsh contrasts, promoting visual harmony.

Best used for

High-end product and luxury branding
Corporate and professional websites
Architectural and interior design portfolios
Minimalist user interface development
Editorial design for sophisticated content
Fine art exhibition promotions

Suggested color roles

primary

Use #1A1A1A for strong headings, key brand elements, or as a powerful, grounding background in dark mode.

secondary

Apply #333333 for primary content, body text, or navigation elements, providing solid readability.

accent

Employ #666666 for subtle interactive states, dividers, or secondary graphical elements, adding gentle emphasis.

background

Utilize #CCCCCC as a soft, unobtrusive backdrop, providing a clean and inviting canvas.

text

For optimal readability on lighter backgrounds, #1A1A1A or #333333 are ideal, while #CCCCCC can work on very dark backgrounds.

Accessibility notes

Ensure sufficient contrast for text; #1A1A1A on #CCCCCC provides excellent legibility.
Be cautious when using #666666 on #999999 for small text, as the contrast might be insufficient for accessibility.
Always test interactive elements to ensure their states (e.g., hover, active) are clearly distinguishable.
For important information, avoid using mid-tone greys on similar mid-tone backgrounds to prevent visual strain.

Recommended combinations

Deep & Light

Creates a classic, high-contrast look with a strong dark, a bright light, and a balanced mid-tone.

#1A1A1A · #CCCCCC · #666666

Mid-tone Progression

Ideal for layered interfaces or subtle visual hierarchy, offering smooth transitions.

#333333 · #666666 · #999999

Understated Contrast

A deep base with a soft background and a gentle accent for a refined, subtle design.

#1A1A1A · #999999 · #CCCCCC

CSS variables

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

Tailwind config

theme: {
  extend: {
    colors: {
      "graphite-sketch-subtle": {
        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 Graphite Sketch Subtle

View all monochrome

Monochrome Graphite Sketch