#472B23Espresso
#705348Coffee
#A6948FPewter
#CECAC8Fog

Worn Espresso & Coffee color palette

EarthyMutedMinimalBrownGray
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Worn Espresso & Coffee is a muted monochromatic color palette tagged earthy, muted, minimal. All four colors sit within 4° of hue, so the scheme reads as one color explored across light and dark. Every color is softened, so it works well as a background system for text-heavy layouts. The overall temperature is warm.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Espresso#472B23rgb(71, 43, 35)hsl(13, 34%, 21%)oklch(32.2% 0.044 37)
Coffee#705348rgb(112, 83, 72)hsl(17, 22%, 36%)oklch(47.0% 0.043 42)
Pewter#A6948Frgb(166, 148, 143)hsl(13, 11%, 61%)oklch(68.1% 0.023 36)
Fog#CECAC8rgb(206, 202, 200)hsl(20, 6%, 80%)oklch(84.2% 0.005 49)

Why it works and how to use it

It works because the lightness range is wide (21% to 80%), which gives clear hierarchy between background, content and accents. Try it for wellness, organic and outdoor brands.

  • Background: Fog (#CECAC8) is the lightest color, so it belongs on large surfaces.
  • Text: Espresso (#472B23) on #CECAC8 gives 7.88:1, passing WCAG AAA.
  • Primary: Coffee (#705348) is the most saturated mid-tone; use it for buttons and links (4.27:1 against the background, fine for UI elements).
  • Accent: Pewter (#A6948F) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Worn Espresso & Coffee

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

#472B23
#705348
#A6948F
#CECAC8

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

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#472B23 on #CECAC8Aa7.88:1AAA
#472B23 on #A6948FAa4.43:1AA large only
#705348 on #CECAC8Aa4.27:1AA large only
#705348 on #A6948FAa2.4:1Fail
#472B23 on #705348Aa1.84:1Fail
#A6948F on #CECAC8Aa1.78:1Fail

Similar palettes 24 more in this mood

More earthy palettes →More muted palettes →More minimal palettes →More brown palettes →More gray palettes →