#B08968
#DDB892
#E6CCB2
#FFF6EA
#6F4F42Coffee
#AE8D77Hazelnut
#C9B8A1Putty
#446253Juniper
Hazelnut & Coffee Tale is a complementary color palette tagged muted, earthy, brown. Near-complementary hues (about 133° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Coffee | #6F4F42 | rgb(111, 79, 66) | hsl(17, 25%, 35%) | oklch(45.8% 0.048 43) | |
| Hazelnut | #AE8D77 | rgb(174, 141, 119) | hsl(24, 25%, 57%) | oklch(66.8% 0.051 55) | |
| Putty | #C9B8A1 | rgb(201, 184, 161) | hsl(35, 27%, 71%) | oklch(79.1% 0.037 75) | |
| Juniper | #446253 | rgb(68, 98, 83) | hsl(150, 18%, 33%) | oklch(46.8% 0.043 162) |
Why it works and how to use it
It works because the lightness steps are gentle (33% to 71%), which keeps the mood consistent from edge to edge. Try it for wellness, organic and outdoor brands.
- Background: Putty (#C9B8A1) is the lightest color, so it belongs on large surfaces.
- Text: Coffee (#6F4F42) on #C9B8A1 gives 3.78:1, enough for large headings only.
- Primary: Hazelnut (#AE8D77) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Juniper (#446253) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Hazelnut & Coffee Tale
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
#6F4F42
#AE8D77
#C9B8A1
#446253
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#6F4F42 on #C9B8A1 | Aa | 3.78:1 | AA large only |
#C9B8A1 on #446253 | Aa | 3.48:1 | AA large only |
#6F4F42 on #AE8D77 | Aa | 2.39:1 | Fail |
#AE8D77 on #446253 | Aa | 2.21:1 | Fail |
#AE8D77 on #C9B8A1 | Aa | 1.58:1 | Fail |
#6F4F42 on #446253 | Aa | 1.09:1 | Fail |
Similar palettes 24 more in this mood
#A68A64
#C2B280
#E6DCC3
#FAF7F0
#8A4A3C
#C98C7A
#E9C7B0
#F6EFE8
#5B3F2E
#8B6A4E
#D9C2A0
#F6EFE3
#C4A484
#E6D3B3
#A98467
#F7F1E8
#8C6A5D
#C6A48E
#E9D8C0
#5C7A6B
#7A5C4A
#B08F73
#E3CDB0
#F8F1E6
#CBAD73
#B59453
#9C7A3E
#80612F
#4A4112
#6D6440
#B3B086
#D1CBAA
#4B2800
#774113
#A3774D
#ECAE7E
#5C302C
#AD9878
#86624B
#F5E7C6
#FFF2D9
#AEA58C
#7B715A
#2E2713
#B9C989
#AC9D68
#75490B
#2C0B00
#593111
#774314
#CDA07D
#FFBD93
#D4DDC2
#A7D9A4
#C5BF9C
#B59A71
#DEB4A2
#BE9696
#7E5726
#4F4206
#BDC27E
#755E32
#5D4637
#31542B
#481800
#8A533C
#CE8E70
#DFAF96
#ECA487
#C6966D
#C07873
#846839
#CAAB80
#B193A4
#A46268
#874A2D
#FDE7D9
#F5D0B8
#E8B598
#C68F6D
#553521
#B08D64
#CBA49A
#FFADB2
#5A4832
#A8823F
#D7AA7A
#FFE9DE
#E7D6BE
#D1BA9D
#B3977A
#8B7159