Palette

Graphite Sketchbook

A classic monochromatic range from dark charcoal to soft pencil lines, perfect for artistic expressions.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#3D3D3D#6B6B6B#9B9B9B#D0D0D0

Palette guide

How to use Graphite Sketchbook

Overview

The "Graphite Sketchbook" palette offers a comprehensive monochromatic scale, perfect for designs aiming for classic elegance and clear visual hierarchy. Spanning from the deep, impactful #1A1A1A to the bright, soft #D0D0D0, and featuring balanced mid-tones such as #3D3D3D, #6B6B6B, and #9B9B9B, this collection mimics the full tonal range achievable with graphite pencils. Designers and developers can leverage these hues to create sophisticated branding, fine art portfolios, or clean user interfaces, providing depth and contrast in a refined manner, much like a meticulously rendered drawing.

Best used for

Fine art and photography portfolios
Minimalist product design and e-commerce
Editorial layouts and publishing
Academic and professional presentations
Sophisticated web and mobile applications
Architectural firms' branding

Suggested color roles

primary

Use #1A1A1A for headings, strong branding, or as a powerful dark mode background, ensuring impact.

secondary

Apply #3D3D3D for body text, primary content containers, or navigation elements for readability.

accent

Employ #6B6B6B for subtle UI elements, dividers, or secondary information, offering gentle visual breaks.

background

Utilize #D0D0D0 as a light, clean, and inviting canvas, providing optimal contrast for darker elements.

text

For main text on lighter backgrounds, #1A1A1A ensures ultimate readability. For dark backgrounds, #D0D0D0 is suitable.

Accessibility notes

Excellent contrast between #1A1A1A and #D0D0D0 ensures high readability for primary text.
Be cautious when using #6B6B6B on #9B9B9B for small text or critical information, as contrast might be low.
Always test interactive element states to ensure sufficient contrast and clear distinction for users.
Consider using a slightly bolder font weight for mid-tone text on similar mid-tone backgrounds to improve legibility.

Recommended combinations

High Contrast

Creates a bold, clear layout with strong dark, bright light, and a balanced mid-tone accent.

#1A1A1A · #D0D0D0 · #6B6B6B

Gradual Depth

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

#3D3D3D · #6B6B6B · #9B9B9B

Dark Base

A robust foundation with a slightly lighter content color and a bright accent for highlights.

#1A1A1A · #3D3D3D · #D0D0D0

CSS variables

:root {
  --graphite-sketchbook-1: #1A1A1A;
  --graphite-sketchbook-2: #3D3D3D;
  --graphite-sketchbook-3: #6B6B6B;
  --graphite-sketchbook-4: #9B9B9B;
  --graphite-sketchbook-5: #D0D0D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graphite-sketchbook": {
        1: "#1A1A1A",
        2: "#3D3D3D",
        3: "#6B6B6B",
        4: "#9B9B9B",
        5: "#D0D0D0",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#3D3D3D

Color 3#6B6B6B

Color 4#9B9B9B

Color 5#D0D0D0

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

6.3:1AA

11.3:1AAA

1.6:1Fail

2:1Fail

3.9:1AA18

7:1AAA

3.3:1AA18

2:1Fail

1.9:1Fail

3.5:1AA18

6.3:1AA

3.9:1AA18

1.9:1Fail

1.8:1Fail

11.3:1AAA

7:1AAA

3.5:1AA18

1.8:1Fail

Similar palettes

More like Graphite Sketchbook

View all monochrome

Graphite Sketch Page

Monochrome Graphite Sketch

Charcoal Sketch Grey

Charcoal Sketch Palette

Charcoal Sketchbook Grey

Graphite Sketch Book