Palette

Charcoal Sketchbook Grey

A muted yet rich palette mirroring the subtle tonal shifts of a charcoal drawing on fine paper.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#4A4A4A#696969#808080#D3D3D3

Palette guide

How to use Charcoal Sketchbook Grey

Overview

The Charcoal Sketchbook Grey palette offers a muted yet rich collection, mirroring the subtle tonal shifts of a charcoal drawing on fine paper. It features a deep charcoal #36454F and #4A4A4A, transitioning through balanced mid-greys like #696969 and #808080, and culminating in a soft, bright #D3D3D3. This palette is an exceptional choice for designers and developers seeking to create a sophisticated, minimalist, and inviting aesthetic. Its harmonious range allows for clear visual hierarchy and a refined user experience, ideal for projects that value understated elegance and a connection to traditional artistry in a modern context.

Best used for

Artist portfolios and online galleries
Creative agency websites and branding
Educational platforms for art and design
Stationery and print design with a handcrafted feel
Minimalist lifestyle blogs and e-commerce
UI/UX design for creative tools

Suggested color roles

primary

Utilize #36454F as the foundational color for main backgrounds, navigation, and primary branding elements.

secondary

Employ #4A4A4A for major content blocks, prominent headers, or to provide subtle visual separation.

accent

Apply #808080 for delicate interactive elements, borders, or to highlight secondary information without stark contrast.

background

Choose #D3D3D3 for a clean, spacious main background, or #36454F for a deep, immersive canvas.

text

For dark backgrounds, use #D3D3D3 for excellent readability. On light backgrounds like #D3D3D3, #36454F is ideal for all text.

Accessibility notes

Ensure #D3D3D3 text on #36454F background meets WCAG contrast standards for body text.
Avoid using #696969 text on #808080 backgrounds for small text, as contrast may be insufficient.
Use #4A4A4A for headings and important information on #D3D3D3 backgrounds for strong readability.
Test interactive elements with #808080 against adjacent tones to ensure sufficient visual distinction.

Recommended combinations

Sketchbook Contrast

Ideal for main content areas: deep background, light text, and a slightly lighter dark for subheadings.

#36454F · #D3D3D3 · #4A4A4A

Tonal Layers

Create subtle layered effects in UI cards, panels, or background patterns, mimicking charcoal shading.

#4A4A4A · #696969 · #808080

Paper & Pencil

Use #36454F for strong visual elements on a #D3D3D3 canvas, with #696969 for delicate details or lines.

#D3D3D3 · #36454F · #696969

CSS variables

:root {
  --charcoal-sketchbook-grey-1: #36454F;
  --charcoal-sketchbook-grey-2: #4A4A4A;
  --charcoal-sketchbook-grey-3: #696969;
  --charcoal-sketchbook-grey-4: #808080;
  --charcoal-sketchbook-grey-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-sketchbook-grey": {
        1: "#36454F",
        2: "#4A4A4A",
        3: "#696969",
        4: "#808080",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#4A4A4A

Color 3#696969

Color 4#808080

Color 5#D3D3D3

Accessibility

Contrast checker

1.1:1Fail

1.8:1Fail

2.5:1Fail

6.6:1AA

1.1:1Fail

1.6:1Fail

2.2:1Fail

5.9:1AA

1.8:1Fail

1.6:1Fail

1.4:1Fail

3.7:1AA18

2.5:1Fail

2.2:1Fail

1.4:1Fail

2.6:1Fail

6.6:1AA

5.9:1AA

3.7:1AA18

2.6:1Fail

Similar palettes

More like Charcoal Sketchbook Grey

View all monochrome

Charcoal Sketch Palette

Charcoal Graphite Tones

Charcoal Sketch Grey

Charcoal Whisper Scale

Ghostly Fog Hues

Graphite Sketch