Back to palettes

Palette

Charcoal Sketch Palette

A clean and sophisticated grayscale palette, like a charcoal drawing coming to life with subtle depth.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#282828#505050#787878#A0A0A0#D0D0D0

Palette guide

How to use Charcoal Sketch Palette

Overview

The Charcoal Sketch Palette offers a clean and sophisticated grayscale gradient, moving from the deep intensity of #282828 to the soft brightness of #D0D0D0. This range includes balanced mid-tones such as #505050, #787878, and #A0A0A0, providing ample versatility for designers and developers. It's an excellent choice for projects aiming to evoke the refined depth of a charcoal drawing, bringing subtle texture and artistic flair. This palette creates a strong visual hierarchy and a professional atmosphere, making it ideal for interfaces, branding, and content where clarity and understated elegance are paramount.

Best used for

  • Art gallery websites and portfolios
  • Photography and visual arts applications
  • Minimalist e-commerce platforms
  • Professional services and corporate branding
  • UI/UX wireframing and prototyping
  • Editorial design for art and culture magazines

Suggested color roles

primary

Use #282828 as the dominant background or primary branding color for a strong, sophisticated impression.

secondary

Employ #505050 for major content blocks, prominent headers, or as a secondary brand element.

accent

Apply #A0A0A0 for subtle interactive elements, borders, or to highlight secondary information without being intrusive.

background

Choose #282828 for a dark, immersive background, or #D0D0D0 for a clean, light canvas.

text

For dark backgrounds like #282828, use #D0D0D0 or #A0A0A0 for clear readability. On light backgrounds like #D0D0D0, #282828 is ideal for all text.

Accessibility notes

  • Ensure #D0D0D0 text on #282828 background meets WCAG contrast standards for body text.
  • Avoid using #787878 text on #A0A0A0 backgrounds for small text, as contrast may be insufficient.
  • Use #505050 for headings and important information on #D0D0D0 backgrounds for strong readability.
  • Test interactive elements with #A0A0A0 against adjacent tones to ensure sufficient visual distinction.

Recommended combinations

High Contrast Read

Excellent for primary content: dark background with light text and a slightly lighter dark for subheadings.

#282828 · #D0D0D0 · #505050

Grayscale Depth

Ideal for creating subtle layered effects in UI cards, panels, or background patterns.

#505050 · #787878 · #A0A0A0

Artistic Focus

Use #282828 for strong visual elements on a #D0D0D0 canvas, with #787878 for delicate details or lines.

#D0D0D0 · #282828 · #787878

CSS variables

:root {
  --charcoal-sketch-palette-1: #282828;
  --charcoal-sketch-palette-2: #505050;
  --charcoal-sketch-palette-3: #787878;
  --charcoal-sketch-palette-4: #A0A0A0;
  --charcoal-sketch-palette-5: #D0D0D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-sketch-palette": {
        1: "#282828",
        2: "#505050",
        3: "#787878",
        4: "#A0A0A0",
        5: "#D0D0D0",
      }
    }
  }
}

Related searches

monochrome sketch palettegrayscale UI colorsdark to light grey gradientminimalist artistic brandingsophisticated neutral scheme

Palette colors

Hex values

Color 1#282828
·
Color 2#505050
·
Color 3#787878
·
Color 4#A0A0A0
·
Color 5#D0D0D0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.3:1AA18
5.6:1AA
9.6:1AAA
2
1.8:1Fail
1.8:1Fail
3.1:1AA18
5.2:1AA
3
3.3:1AA18
1.8:1Fail
1.7:1Fail
2.9:1Fail
4
5.6:1AA
3.1:1AA18
1.7:1Fail
1.7:1Fail
5
9.6:1AAA
5.2:1AA
2.9:1Fail
1.7:1Fail

Similar palettes

More like Charcoal Sketch Palette

View all monochrome
Charcoal Sketchbook Grey
Charcoal Graphite Tones
Charcoal Whisper Scale
Graphite Sketch Grid
Graphite Sketchbook
Ink Wash Serenity