Palette

Charcoal Sketch Grey

A range of grays from light to dark, perfect for evoking a minimalist charcoal drawing.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F8F8F8#D8D8D8#A6A6A6#737373#404040

Palette guide

How to use Charcoal Sketch Grey

Overview

The Charcoal Sketch Grey palette provides a versatile spectrum of greys, ranging from a near-white #F8F8F8 to a deep charcoal #404040, ideal for evoking a minimalist, artistic feel. This collection includes gentle light greys like #D8D8D8, subtle mid-tones such as #A6A6A6, and a robust darker grey #737373. For designers and developers, this palette offers exceptional flexibility for creating clean, elegant, and highly readable interfaces. It's perfect for projects that aim for a sophisticated, understated aesthetic, reminiscent of a refined charcoal drawing, allowing content to take center stage with ample visual breathing room.

Best used for

Art and design portfolios
Minimalist blog or editorial websites
E-commerce for artisanal products
Educational platforms focusing on clarity
Wireframing and prototyping UI/UX
Print design for brochures and stationery

Suggested color roles

primary

Designate #404040 as the primary color for important headings, navigation, or strong brand elements.

secondary

Use #737373 for secondary text, subheadings, or as a background for subtle content sections.

accent

Apply #A6A6A6 for delicate interactive elements, borders, or to provide a soft visual anchor.

background

Employ #F8F8F8 for a clean, expansive main background, or #D8D8D8 for slightly differentiated sections.

text

For optimal readability on light backgrounds like #F8F8F8, use #404040. For dark backgrounds, #F8F8F8 or #D8D8D8 ensures clarity.

Accessibility notes

Ensure #404040 text on #F8F8F8 background meets WCAG contrast standards for all text sizes.
Avoid using #A6A6A6 text on #D8D8D8 backgrounds for small text, as contrast may be too low.
Use #737373 for body text on #F8F8F8 or #D8D8D8 backgrounds for good readability.
Test interactive elements with #A6A6A6 to ensure they are visually distinct against adjacent lighter tones.

Recommended combinations

Clean Read

Ideal for content-heavy pages: light background, dark main text, and a mid-grey for secondary information.

#F8F8F8 · #404040 · #737373

Soft Depth

Create layered UI elements or subtle visual breaks without harsh contrasts.

#D8D8D8 · #A6A6A6 · #737373

Sketch Outline

Use #404040 for strong outlines or borders on a #F8F8F8 canvas, with #A6A6A6 for subtle shading or details.

#404040 · #F8F8F8 · #A6A6A6

CSS variables

:root {
  --charcoal-sketch-grey-1: #F8F8F8;
  --charcoal-sketch-grey-2: #D8D8D8;
  --charcoal-sketch-grey-3: #A6A6A6;
  --charcoal-sketch-grey-4: #737373;
  --charcoal-sketch-grey-5: #404040;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-sketch-grey": {
        1: "#F8F8F8",
        2: "#D8D8D8",
        3: "#A6A6A6",
        4: "#737373",
        5: "#404040",
      }
    }
  }
}

Hex values

Color 1#F8F8F8

Color 2#D8D8D8

Color 3#A6A6A6

Color 4#737373

Color 5#404040

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

4.5:1AA18

9.8:1AAA

1.3:1Fail

1.7:1Fail

3.3:1AA18

7.3:1AAA

2.3:1Fail

1.7:1Fail

1.9:1Fail

4.3:1AA18

4.5:1AA18

3.3:1AA18

1.9:1Fail

2.2:1Fail

9.8:1AAA

7.3:1AAA

4.3:1AA18

2.2:1Fail

Similar palettes

More like Charcoal Sketch Grey

View all monochrome

Charcoal Canvas Hues

Charcoal Sketchbook Grey

Graphite Sketchbook

Monochrome Graphite Sketch

Stone Wall Whisper

Ancient Stone Rubble