#B08968
#DDB892
#E6CCB2
#FFF6EA
#F2D3A8Apricot
#E0B67FTan
#8E97D7Blue Gray
#9A6B3DShadow
Desert Blue Gray & Shadow is a complementary color palette tagged muted, beige, brown. Near-complementary hues (about 162° 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 |
|---|---|---|---|---|---|
| Apricot | #F2D3A8 | rgb(242, 211, 168) | hsl(35, 74%, 80%) | oklch(88.2% 0.066 76) | |
| Tan | #E0B67F | rgb(224, 182, 127) | hsl(34, 61%, 69%) | oklch(80.1% 0.086 74) | |
| Blue Gray | #8E97D7 | rgb(142, 151, 215) | hsl(233, 48%, 70%) | oklch(69.4% 0.095 277) | |
| Shadow | #9A6B3D | rgb(154, 107, 61) | hsl(30, 43%, 42%) | oklch(56.7% 0.086 64) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a soft light-to-dark ladder (80% down to 42% lightness). A natural fit for websites, presentations and branding.
- Background: Apricot (#F2D3A8) is the lightest color, so it belongs on large surfaces.
- Text: Shadow (#9A6B3D) on #F2D3A8 gives 3.23:1, enough for large headings only.
- Primary: Tan (#E0B67F) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Blue Gray (#8E97D7) 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 Desert Blue Gray & Shadow
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
#F2D3A8
#E0B67F
#8E97D7
#9A6B3D
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F2D3A8 on #9A6B3D | Aa | 3.23:1 | AA large only |
#E0B67F on #9A6B3D | Aa | 2.46:1 | Fail |
#F2D3A8 on #8E97D7 | Aa | 1.94:1 | Fail |
#8E97D7 on #9A6B3D | Aa | 1.66:1 | Fail |
#E0B67F on #8E97D7 | Aa | 1.48:1 | Fail |
#F2D3A8 on #E0B67F | Aa | 1.31:1 | Fail |
Similar palettes 24 more in this mood
#A68A64
#C2B280
#E6DCC3
#FAF7F0
#C9A66B
#E4C590
#F1E3C8
#F9F5EC
#FFF3EC
#FFD3BF
#FFB39B
#6E5147
#8A4A3C
#C98C7A
#E9C7B0
#F6EFE8
#5B3F2E
#8B6A4E
#D9C2A0
#F6EFE3
#C4A484
#E6D3B3
#A98467
#F7F1E8
#8C6A5D
#C6A48E
#E9D8C0
#5C7A6B
#7A5C4A
#B08F73
#E3CDB0
#F8F1E6
#CBAD73
#B59453
#9C7A3E
#80612F
#5A5934
#776D5C
#BE957B
#DFACA6
#916653
#D2C2B0
#E9D393
#2B201A
#4A4112
#6D6440
#B3B086
#D1CBAA
#4B2800
#774113
#A3774D
#ECAE7E
#5C302C
#AD9878
#86624B
#F5E7C6
#FFF2D9
#AEA58C
#7B715A
#2E2713
#DFCEAD
#BFA797
#96978E
#6A8667
#B9C989
#AC9D68
#75490B
#2C0B00
#F1C9A5
#E0A97F
#4AAAB5
#9E6A48
#94875B
#C4C0BF
#FAD0AB
#FFDEE6
#593111
#774314
#CDA07D
#FFBD93
#452700
#686265
#FFB9A3
#FFEAEC
#D4DDC2
#A7D9A4
#C5BF9C
#B59A71
#DEB4A2
#BE9696
#7E5726
#4F4206