#0C0C0CObsidian
#454545Graphite
#777777Gray
#D5D5D5Fog

Calm Obsidian & Graphite color palette

MonochromeDarkMinimalBlackGray
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Calm Obsidian & Graphite is a muted neutral-based color palette tagged monochrome, dark, minimal. Obsidian is the only saturated color here, so it does all the talking against a neutral base. Every color is softened, so it works well as a background system for text-heavy layouts.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Obsidian#0C0C0Crgb(12, 12, 12)hsl(0, 0%, 5%)oklch(15.4% 0.000 0)
Graphite#454545rgb(69, 69, 69)hsl(0, 0%, 27%)oklch(39.0% 0.000 0)
Gray#777777rgb(119, 119, 119)hsl(0, 0%, 47%)oklch(56.9% 0.000 0)
Fog#D5D5D5rgb(213, 213, 213)hsl(0, 0%, 84%)oklch(87.3% 0.000 0)

Why it works and how to use it

The palette holds together thanks to its neutral backbone and a strong light-to-dark ladder (84% down to 5% lightness). A natural fit for websites, presentations and branding.

  • Background: Fog (#D5D5D5) is the lightest color, so it belongs on large surfaces.
  • Text: Obsidian (#0C0C0C) on #D5D5D5 gives 13.33:1, passing WCAG AAA.
  • Primary: Graphite (#454545) is the most saturated mid-tone; use it for buttons and links (6.53:1 against the background, fine for UI elements).
  • Accent: Gray (#777777) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Fog at 13.33:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Calm Obsidian & Graphite

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary
Card title
Card title
Card title
Roles are assigned by lightness.

Color blindness simulation

#0C0C0C
#454545
#777777
#D5D5D5

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#0C0C0C on #D5D5D5Aa13.33:1AAA
#454545 on #D5D5D5Aa6.53:1AA
#0C0C0C on #777777Aa4.37:1AA large only
#777777 on #D5D5D5Aa3.05:1AA large only
#454545 on #777777Aa2.14:1Fail
#0C0C0C on #454545Aa2.04:1Fail

Similar palettes 24 more in this mood

More monochrome palettes →More dark palettes →More minimal palettes →More black palettes →More gray palettes →