#3B2C23
#86624B
#AD9878
#F5E7C6
#42252EEspresso
#794B4FCoffee
#BD9474Camel
#F0E8DDEggshell
Maple Camel & Coffee is a analogous color palette tagged autumn, muted, warm. Analogous neighbors on the wheel (Espresso, Coffee, Camel) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Espresso | #42252E | rgb(66, 37, 46) | hsl(341, 28%, 20%) | oklch(30.5% 0.046 0) | |
| Coffee | #794B4F | rgb(121, 75, 79) | hsl(355, 23%, 38%) | oklch(46.7% 0.063 14) | |
| Camel | #BD9474 | rgb(189, 148, 116) | hsl(26, 36%, 60%) | oklch(69.7% 0.067 59) | |
| Eggshell | #F0E8DD | rgb(240, 232, 221) | hsl(35, 39%, 90%) | oklch(93.4% 0.017 76) |
Why it works and how to use it
The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (90% down to 20% lightness). A natural fit for websites, presentations and branding.
- Background: Eggshell (#F0E8DD) is the lightest color, so it belongs on large surfaces.
- Text: Espresso (#42252E) on #F0E8DD gives 11.26:1, passing WCAG AAA.
- Primary: Camel (#BD9474) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Coffee (#794B4F) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Eggshell at 11.26:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Maple Camel & Coffee
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
#42252E
#794B4F
#BD9474
#F0E8DD
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#42252E on #F0E8DD | Aa | 11.26:1 | AAA |
#794B4F on #F0E8DD | Aa | 5.9:1 | AA |
#42252E on #BD9474 | Aa | 4.98:1 | AA |
#794B4F on #BD9474 | Aa | 2.61:1 | Fail |
#BD9474 on #F0E8DD | Aa | 2.26:1 | Fail |
#42252E on #794B4F | Aa | 1.91:1 | Fail |
Similar palettes 24 more in this mood
#6C5142
#9B745C
#D3B096
#F1E6DB
#826251
#C88E73
#FFC19D
#FFEAD9
#875543
#B7876F
#E9DECF
#F9F6F2
#4A232F
#834642
#C3A88F
#F1ECE4
#77545E
#B47E81
#FBCCA8
#F6EDE1
#4C3224
#8B5B43
#C28967
#F2DDCB
#9A3B3B
#C08261
#E2C799
#F2ECBE
#432818
#99582A
#BB9457
#FFE6A7
#7A4A2E
#B06A3B
#E7A977
#F9E4D0
#94691E
#B26B7A
#F67664
#FF8725
#644400
#C5701B
#B69A00
#C6CF8F
#A0431F
#D07A4C
#F1DCC2
#FBF6EF
#8D061D
#6D3D00
#755705
#9A5A3F
#694600
#972A3B
#A44500
#F497CA
#FF9F67
#DE97A1
#CF8300
#A94134
#3E2723
#8D5524
#E3A857
#FFF3D6
#664910
#A25500
#9B8D00
#FF9075
#5A0F2D
#9E2A2B
#D4A373
#F5EBDD
#5D2521
#A74242
#E76E5F
#FFD7C9
#C39B00
#D86A0F
#D4432B
#955F00
#562523
#B55E4C
#D59C6C
#E7C280
#713F21
#BB5F2F
#FF954F
#FFF9F4
#4E1A2E
#8E3B46
#D48A4B
#F6E7D3