#B2DFD2
#859577
#776A4C
#41271C
#3D272CEspresso
#9B7981Mocha
#AC9498Pewter
#E4C8CEBaby Pink
Mocha & Espresso Hour is a muted monochromatic color palette tagged minimal, modern, muted. All four colors sit within 1° 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
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Espresso | #3D272C | rgb(61, 39, 44) | hsl(346, 22%, 20%) | oklch(30.2% 0.034 4) | |
| Mocha | #9B7981 | rgb(155, 121, 129) | hsl(346, 15%, 54%) | oklch(61.1% 0.044 3) | |
| Pewter | #AC9498 | rgb(172, 148, 152) | hsl(350, 13%, 63%) | oklch(68.9% 0.029 7) | |
| Baby Pink | #E4C8CE | rgb(228, 200, 206) | hsl(347, 34%, 84%) | oklch(85.8% 0.032 3) |
Why it works and how to use it
Two of the four colors are near-neutral, which leaves room for Mocha to lead. Lightness runs from 20% to 84%. Well suited to websites, presentations and branding.
- Background: Baby Pink (#E4C8CE) is the lightest color, so it belongs on large surfaces.
- Text: Espresso (#3D272C) on #E4C8CE gives 8.82:1, passing WCAG AAA.
- Primary: Mocha (#9B7981) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Pewter (#AC9498) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Baby Pink at 8.82:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Mocha & Espresso Hour
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#3D272C
#9B7981
#AC9498
#E4C8CE
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#3D272C on #E4C8CE | Aa | 8.82:1 | AAA |
#3D272C on #AC9498 | Aa | 4.88:1 | AA |
#3D272C on #9B7981 | Aa | 3.57:1 | AA large only |
#9B7981 on #E4C8CE | Aa | 2.47:1 | Fail |
#AC9498 on #E4C8CE | Aa | 1.81:1 | Fail |
#9B7981 on #AC9498 | Aa | 1.37:1 | Fail |
Similar palettes 24 more in this mood
#ECDCF8
#9B91A4
#78708B
#382F45
#524037
#8E6C5A
#ADF2DF
#FDF9F4
#24150D
#654635
#7ABDAA
#D7D3CE
#2C3424
#62694E
#C9A886
#FCF9EB
#FCF8F4
#F0DAC0
#DE9F7B
#2D2E3A
#3E2723
#6D4C41
#A1887F
#EFEBE9
#3B2A22
#7A5A48
#8FD3C0
#F5F1EC
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#0A1A1E
#648691
#EED200
#D8E2E5
#DDDEE2
#00C463
#676C7C
#17191F
#3E4A3D
#7A6A55
#C9B79C
#EDE7DB
#E5E6E6
#F61061
#4E5756
#0E0F0F
#1C2F2E
#4F7F7B
#FFC582
#D6E2E1
#ECF1F7
#FF2A6C
#4E6074
#222A32
#09130F
#647970
#704FEE
#E4EBE7
#142532
#528494
#DE9D89
#FAF4E9
#E8EEEE
#DD5600
#596564
#050D0D
#1E1410
#5B4235
#A57C5B
#E8DCCF
#2B2D42
#8D99AE
#EDF2F4
#A97B00
#CFFAFF
#7FD9DA
#538582
#52514C
#0F3D3E
#1E6F6F
#C8B89A
#F3EFE7
#2E1F1A
#725548
#A67B5B
#F0E6DA
#2B1919
#704744
#DAA29F
#E1DAD8