Palette

Charcoal Sketch Study

A sophisticated grayscale, emulating the subtle texture and depth of a 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 Study 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 Study.

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

Data visualization

#2B2B2B#4F4F4F#7C7C7C#A9A9A9#D3D3D3

Palette guide

How to use Charcoal Sketch Study

Overview

The Charcoal Sketch Study palette is a sophisticated grayscale collection, expertly emulating the subtle texture and depth of a charcoal drawing. It moves gracefully from the profound #2B2B2B through balanced mid-tones like #4F4F4F, #7C7C7C, and #A9A9A9, culminating in the soft luminosity of #D3D3D3. This palette is a designer's and developer's asset for creating elegant, understated, and highly functional interfaces. It provides a robust framework for establishing clear visual hierarchy and a professional aesthetic, perfect for projects that value minimalist sophistication and artistic integrity across digital and print applications.

Best used for

Fine art and photography websites
Luxury brand packaging and digital presence
Architectural visualization and portfolios
High-end product showcases
Editorial design with a classic feel
Professional services and corporate identity

Suggested color roles

primary

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

secondary

Employ #4F4F4F for major content blocks, prominent headers, or to provide subtle differentiation.

accent

Apply #A9A9A9 for delicate interactive elements, borders, or to highlight secondary information.

background

Choose #2B2B2B for a deep, immersive background, or #D3D3D3 for a crisp, clean canvas.

text

For dark backgrounds, use #D3D3D3 or #A9A9A9 for excellent readability. On light backgrounds like #D3D3D3, #2B2B2B is ideal for all text.

Accessibility notes

Ensure #D3D3D3 text on #2B2B2B background meets WCAG contrast standards for body text.
Avoid using #7C7C7C text on #A9A9A9 backgrounds for small text, as contrast may be insufficient.
Use #4F4F4F for headings and important information on #D3D3D3 backgrounds for strong readability.
Test interactive elements with #A9A9A9 against adjacent tones to confirm sufficient visual distinction.

Recommended combinations

Deep Clarity

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

#2B2B2B · #D3D3D3 · #4F4F4F

Subtle Sketch

Create layered depth in UI components, card elements, or subtle background patterns, mimicking charcoal shading.

#4F4F4F · #7C7C7C · #A9A9A9

Elegant Contrast

Use #2B2B2B for strong visual elements on a #D3D3D3 canvas, with #7C7C7C for delicate details or secondary information.

#D3D3D3 · #2B2B2B · #7C7C7C

CSS variables

:root {
  --charcoal-sketch-study-1: #2B2B2B;
  --charcoal-sketch-study-2: #4F4F4F;
  --charcoal-sketch-study-3: #7C7C7C;
  --charcoal-sketch-study-4: #A9A9A9;
  --charcoal-sketch-study-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-sketch-study": {
        1: "#2B2B2B",
        2: "#4F4F4F",
        3: "#7C7C7C",
        4: "#A9A9A9",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#2B2B2B

Color 2#4F4F4F

Color 3#7C7C7C

Color 4#A9A9A9

Color 5#D3D3D3

Accessibility

Contrast checker

1.7:1Fail

3.4:1AA18

6:1AA

9.5:1AAA

1.7:1Fail

2:1Fail

3.5:1AA18

5.5:1AA

3.4:1AA18

2:1Fail

1.8:1Fail

2.8:1Fail

6:1AA

3.5:1AA18

1.8:1Fail

1.6:1Fail

9.5:1AAA

5.5:1AA

2.8:1Fail

1.6:1Fail

Similar palettes

More like Charcoal Sketch Study

Basalt Rock Formation

Charcoal Canvas Hues

Charcoal Graphite Tones