#C4D7C5Fog
#8F9784Stone
#5C5A44Umber
#21190CLicorice

Umber & Fog Mist color palette

CoffeeDarkMonochromeMinimalGrayBrownBlack
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Umber & Fog Mist is a split color palette tagged coffee, dark, monochrome. The hues span about 86°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Fog#C4D7C5rgb(196, 215, 197)hsl(123, 19%, 81%)oklch(86.0% 0.032 147)
Stone#8F9784rgb(143, 151, 132)hsl(85, 8%, 55%)oklch(66.4% 0.029 126)
Umber#5C5A44rgb(92, 90, 68)hsl(55, 15%, 31%)oklch(46.3% 0.034 103)
Licorice#21190Crgb(33, 25, 12)hsl(37, 47%, 9%)oklch(21.9% 0.026 79)

Why it works and how to use it

The palette holds together thanks to its split hue relationship and a strong light-to-dark ladder (81% down to 9% lightness). A natural fit for websites, presentations and branding.

  • Background: Fog (#C4D7C5) is the lightest color, so it belongs on large surfaces.
  • Text: Licorice (#21190C) on #C4D7C5 gives 11.47:1, passing WCAG AAA.
  • Primary: Umber (#5C5A44) is the most saturated mid-tone; use it for buttons and links (4.62:1 against the background, fine for UI elements).
  • Accent: Stone (#8F9784) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Fog on Licorice at 11.47:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Umber & Fog Mist

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

#C4D7C5
#8F9784
#5C5A44
#21190C

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

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#C4D7C5 on #21190CAa11.47:1AAA
#8F9784 on #21190CAa5.73:1AA
#C4D7C5 on #5C5A44Aa4.62:1AA
#5C5A44 on #21190CAa2.48:1Fail
#8F9784 on #5C5A44Aa2.31:1Fail
#C4D7C5 on #8F9784Aa2:1Fail

Similar palettes 24 more in this mood

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