Palette

Graphite Sketch Page

A sleek, minimalist palette of varying grays, mimicking the subtle shades and lines of a graphite sketch on paper.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F2F2F#5F5F5F#8F8F8F#BFBFBF#EFEFEF

Palette guide

How to use Graphite Sketch Page

Overview

The "Graphite Sketch Page" palette delivers a sleek, minimalist range of greys, mimicking the subtle shades and lines of a graphite sketch on paper. From the deep charcoal #2F2F2F to the soft, near-white #EFEFEF, this collection, including versatile mid-tones like #5F5F5F, #8F8F8F, and #BFBFBF, is perfect for designs demanding sophistication and clarity. Designers and developers can leverage these tones to create clean visual hierarchies, understated branding, and elegant user interfaces, providing a timeless aesthetic with a focus on form and structure, much like a meticulous artistic drawing.

Best used for

Digital art and photography portfolios
Minimalist branding and identity
Architectural renderings and presentations
Clean user interface design
Luxury product showcases
Editorial layouts

Suggested color roles

primary

Use #2F2F2F for strong headings, key branding elements, or as a dark, impactful background.

secondary

Apply #5F5F5F for main content areas, navigation, or as a contrasting panel.

accent

Employ #8F8F8F for subtle interactive elements, dividers, or secondary information, offering gentle emphasis.

background

Utilize #EFEFEF as a bright, crisp canvas, providing excellent contrast for darker text.

text

For primary text, #2F2F2F ensures optimal readability on lighter backgrounds like #EFEFEF or #BFBFBF.

Accessibility notes

Ensure strong contrast for text; #2F2F2F on #EFEFEF provides excellent legibility.
Be cautious when using #8F8F8F on #BFBFBF for small text, as the contrast may not meet accessibility standards.
Always test readability of text on backgrounds, especially for interactive elements.
Consider using a slightly darker grey for text than the background it sits on, even if both are from the palette, for better distinction.

Recommended combinations

Classic Contrast

Ideal for a clean, high-contrast layout with dark text on a light background and a subtle mid-tone accent.

#2F2F2F · #EFEFEF · #8F8F8F

Soft Transition

Creates a gentle visual flow, perfect for layered elements or background textures.

#5F5F5F · #8F8F8F · #BFBFBF

Strong Base

Provides a robust foundation with lighter content areas and a complementary mid-tone.

#2F2F2F · #BFBFBF · #5F5F5F

CSS variables

:root {
  --graphite-sketch-page-1: #2F2F2F;
  --graphite-sketch-page-2: #5F5F5F;
  --graphite-sketch-page-3: #8F8F8F;
  --graphite-sketch-page-4: #BFBFBF;
  --graphite-sketch-page-5: #EFEFEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graphite-sketch-page": {
        1: "#2F2F2F",
        2: "#5F5F5F",
        3: "#8F8F8F",
        4: "#BFBFBF",
        5: "#EFEFEF",
      }
    }
  }
}

Hex values

Color 1#2F2F2F

Color 2#5F5F5F

Color 3#8F8F8F

Color 4#BFBFBF

Color 5#EFEFEF

Accessibility

Contrast checker

2.1:1Fail

4.1:1AA18

7.3:1AAA

11.6:1AAA

2.1:1Fail

2:1Fail

3.5:1AA18

5.6:1AA

4.1:1AA18

2:1Fail

1.8:1Fail

2.8:1Fail

7.3:1AAA

3.5:1AA18

1.8:1Fail

1.6:1Fail

11.6:1AAA

5.6:1AA

2.8:1Fail

1.6:1Fail

Similar palettes

More like Graphite Sketch Page

Monochrome Graphite Sketch

Basalt Stream Pebble

Charcoal Canvas Hues