#3E2723
#6D4C41
#A1887F
#EFEBE9
#433323Taupe
#77614DCocoa
#82A4B8Dusty Blue
#D8DADAFog
Desert Dusty Blue & Cocoa is a muted complementary color palette tagged muted, minimal, earthy. Taupe and Dusty Blue sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Every color is softened, so it works well as a background system for text-heavy layouts. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Taupe | #433323 | rgb(67, 51, 35) | hsl(30, 31%, 20%) | oklch(33.4% 0.035 66) | |
| Cocoa | #77614D | rgb(119, 97, 77) | hsl(29, 21%, 38%) | oklch(50.9% 0.042 64) | |
| Dusty Blue | #82A4B8 | rgb(130, 164, 184) | hsl(202, 28%, 62%) | oklch(70.0% 0.048 234) | |
| Fog | #D8DADA | rgb(216, 218, 218) | hsl(180, 3%, 85%) | oklch(88.7% 0.002 197) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (85% down to 20% lightness). A natural fit for wellness, organic and outdoor brands.
- Background: Fog (#D8DADA) is the lightest color, so it belongs on large surfaces.
- Text: Taupe (#433323) on #D8DADA gives 8.62:1, passing WCAG AAA.
- Primary: Dusty Blue (#82A4B8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Cocoa (#77614D) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Fog at 8.62:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Desert Dusty Blue & Cocoa
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
#433323
#77614D
#82A4B8
#D8DADA
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#433323 on #D8DADA | Aa | 8.62:1 | AAA |
#433323 on #82A4B8 | Aa | 4.58:1 | AA |
#77614D on #D8DADA | Aa | 4.15:1 | AA large only |
#77614D on #82A4B8 | Aa | 2.21:1 | Fail |
#433323 on #77614D | Aa | 2.07:1 | Fail |
#82A4B8 on #D8DADA | Aa | 1.88:1 | Fail |
Similar palettes 24 more in this mood
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#3E4A3D
#7A6A55
#C9B79C
#EDE7DB
#1E1410
#5B4235
#A57C5B
#E8DCCF
#2E1F1A
#725548
#A67B5B
#F0E6DA
#3B2C23
#86624B
#AD9878
#F5E7C6
#2A1A12
#704E3C
#9C6B48
#E7D4C1
#472B23
#705348
#A6948F
#CECAC8
#EBDED9
#846C60
#634531
#1B140B
#2B372A
#5E4F3A
#B09E84
#D9D3C7
#42322D
#896B5E
#C39675
#FFF9F2
#FFE5E1
#A98579
#664F47
#302D2C
#1C1310
#5D473C
#8A6A55
#EADFD3
#42352D
#7D6452
#DFBF88
#FCF8F2
#A47864
#C9A58B
#E8D9CB
#F7F3EE
#180A06
#563B2E
#8C6243
#D0C6BB
#DBD7CF
#CCBB9B
#B5954D
#251E12
#36301F
#7F704C
#D1BB86
#FBF6E6
#322825
#786155
#A4836D
#FFF9F3
#302521
#72584A
#C49A78
#FFF9F3
#7F5539
#B08968
#DDB892
#EDE0D4
#5B3F2E
#8B6A4E
#D9C2A0
#F6EFE3
#8C6A5D
#C6A48E
#E9D8C0
#5C7A6B
#3D272C
#9B7981
#AC9498
#E4C8CE