#2A1A12
#704E3C
#9C6B48
#E7D4C1
#2A1A12Raisin
#6D4B5EEggplant
#9C647CMocha
#ECCFD5Ballet
Desert Mocha & Eggplant is a analogous color palette tagged gradient, dark, muted. Analogous neighbors on the wheel (Raisin, Eggplant, Mocha) 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 |
|---|---|---|---|---|---|
| Raisin | #2A1A12 | rgb(42, 26, 18) | hsl(20, 40%, 12%) | oklch(23.6% 0.030 47) | |
| Eggplant | #6D4B5E | rgb(109, 75, 94) | hsl(326, 18%, 36%) | oklch(45.7% 0.054 345) | |
| Mocha | #9C647C | rgb(156, 100, 124) | hsl(334, 22%, 50%) | oklch(57.1% 0.079 353) | |
| Ballet | #ECCFD5 | rgb(236, 207, 213) | hsl(348, 43%, 87%) | oklch(88.0% 0.033 4) |
Why it works and how to use it
With 4 chromatic colors, Mocha takes the lead while the rest support. Lightness runs from 12% to 87%. Well suited to websites, presentations and branding.
- Background: Ballet (#ECCFD5) is the lightest color, so it belongs on large surfaces.
- Text: Raisin (#2A1A12) on #ECCFD5 gives 11.52:1, passing WCAG AAA.
- Primary: Mocha (#9C647C) is the most saturated mid-tone; use it for buttons and links (3.19:1 against the background, fine for UI elements).
- Accent: Eggplant (#6D4B5E) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Ballet at 11.52:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Desert Mocha & Eggplant
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
#2A1A12
#6D4B5E
#9C647C
#ECCFD5
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#2A1A12 on #ECCFD5 | Aa | 11.52:1 | AAA |
#6D4B5E on #ECCFD5 | Aa | 5.13:1 | AA |
#2A1A12 on #9C647C | Aa | 3.61:1 | AA large only |
#9C647C on #ECCFD5 | Aa | 3.19:1 | AA large only |
#2A1A12 on #6D4B5E | Aa | 2.25:1 | Fail |
#6D4B5E on #9C647C | Aa | 1.61:1 | Fail |
Similar palettes 24 more in this mood
#3A2920
#8E6A57
#B2805C
#FFEDDB
#30110D
#7B4139
#AE6755
#DAAD88
#2A1A12
#545B38
#6C804B
#CEDDC8
#370617
#9D0208
#E85D04
#FAA307
#34032D
#832B74
#BE499C
#FE92AA
#3D0000
#95261C
#D04A28
#F4A259
#340723
#9A003B
#EC534E
#FF9D59
#311200
#704800
#B08900
#B3C52A
#3C000D
#942338
#D1454D
#FC9B6B
#855A8A
#A8688F
#D893A5
#FFBEBB
#470A00
#A32E12
#CA4300
#FC9063
#826251
#C88E73
#FFC19D
#FFEAD9
#615132
#B89F66
#EDD693
#F9F3D9
#21393A
#446F71
#70ACAF
#D5ECEC
#EB9599
#C24754
#B00024
#4B0004
#492121
#7F3F42
#B36667
#EFDEE0
#4C3224
#8B5B43
#C28967
#F2DDCB
#351E00
#835000
#A16A00
#E3A331
#200009
#800004
#BA4900
#D28800
#4A0010
#A3293B
#D62839
#FF8A80
#501C00
#8F3400
#D05300
#F9DBD4
#FFB9A5
#FFA8DC
#FF7A93
#A76100
#981A69
#AD1F03
#FF6A89
#FC83FF