Back to palettes

Palette

Graphite Sketch Grid

A precise and elegant exploration of grey tones, reminiscent of a detailed, structured 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 Grid 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 Grid.

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

Data visualization

#2D2D2D#575757#8A8A8A#BEBEBE#EEEEEE

Palette guide

How to use Graphite Sketch Grid

Overview

The "Graphite Sketch Grid" palette offers a precise and elegant exploration of grey tones, perfect for structured, modern designs. Ranging from the deep charcoal #2D2D2D to the very light #EEEEEE, this monochromatic collection, including versatile mid-tones like #575757 and #8A8A8A, provides excellent versatility for creating depth and clear visual hierarchy. Designers and developers will find this palette ideal for projects requiring a clean, technical, or minimalist aesthetic, evoking the precision of detailed graphite drawings and modern UI dashboards. The shade #BEBEBE offers a crisp intermediate tone.

Best used for

  • Technical documentation and manuals
  • Architectural firm websites
  • Minimalist user interface design
  • Digital art portfolio platforms
  • Modern corporate branding
  • Structured data visualization

Suggested color roles

primary

Use #2D2D2D for strong headings, primary calls to action, or dark mode backgrounds, providing robust presence.

secondary

Apply #575757 for main content blocks, navigation elements, or subtle section dividers.

accent

Employ #8A8A8A for subtle highlights, active states, or less critical information, offering gentle emphasis.

background

Utilize #EEEEEE as a clean, bright canvas, providing optimal contrast for darker text.

text

For primary text, #2D2D2D ensures excellent readability on lighter backgrounds like #EEEEEE or #BEBEBE.

Accessibility notes

  • Ensure high contrast for text; #2D2D2D on #EEEEEE is an excellent combination for readability.
  • Be cautious when using #8A8A8A on #BEBEBE for small text, as contrast might be insufficient.
  • Always test text legibility across different screen types and lighting conditions.
  • For interactive elements, ensure the contrast between states (e.g., hover) is distinct enough for users with low vision.

Recommended combinations

High Contrast

Creates a bold, clear layout with strong text and a clean background, softened by a mid-tone.

#2D2D2D · #EEEEEE · #575757

Mid-tone Harmony

Ideal for layered interfaces or subtle gradients, providing depth without starkness.

#575757 · #8A8A8A · #BEBEBE

Structured Accent

A robust base with a light background and a precise accent for key information or borders.

#2D2D2D · #BEBEBE · #8A8A8A

CSS variables

:root {
  --graphite-sketch-grid-1: #2D2D2D;
  --graphite-sketch-grid-2: #575757;
  --graphite-sketch-grid-3: #8A8A8A;
  --graphite-sketch-grid-4: #BEBEBE;
  --graphite-sketch-grid-5: #EEEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graphite-sketch-grid": {
        1: "#2D2D2D",
        2: "#575757",
        3: "#8A8A8A",
        4: "#BEBEBE",
        5: "#EEEEEE",
      }
    }
  }
}

Related searches

modern grey color paletteprecise monochrome schemeui grey tonesstructured design colorslight and dark grey palette

Palette colors

Hex values

Color 1#2D2D2D
·
Color 2#575757
·
Color 3#8A8A8A
·
Color 4#BEBEBE
·
Color 5#EEEEEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
4:1AA18
7.4:1AAA
11.9:1AAA
2
1.9:1Fail
2.1:1Fail
3.9:1AA18
6.2:1AA
3
4:1AA18
2.1:1Fail
1.9:1Fail
3:1Fail
4
7.4:1AAA
3.9:1AA18
1.9:1Fail
1.6:1Fail
5
11.9:1AAA
6.2:1AA
3:1Fail
1.6:1Fail

Similar palettes

More like Graphite Sketch Grid

View all monochrome
Grey Scale Journey
Industrial Loft Hues
Monochrome Graphite
Monochrome Paper Cuts
Architectural Grid Hues
Basalt Stream Pebble