#42352D
#7D6452
#DFBF88
#FCF8F2
#3B4A3EGraphite
#728C69Shadow
#D3E0C3Bone
#FCFAF3Snow
Shadow & Bone Haze is a neutral-based color palette tagged muted, minimal, gray. Snow is the only saturated color here, so it does all the talking against a neutral base. Neither washed out nor loud, it adapts to most contexts.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Graphite | #3B4A3E | rgb(59, 74, 62) | hsl(132, 11%, 26%) | oklch(39.2% 0.028 151) | |
| Shadow | #728C69 | rgb(114, 140, 105) | hsl(105, 14%, 48%) | oklch(61.0% 0.060 138) | |
| Bone | #D3E0C3 | rgb(211, 224, 195) | hsl(87, 32%, 82%) | oklch(88.9% 0.041 127) | |
| Snow | #FCFAF3 | rgb(252, 250, 243) | hsl(47, 60%, 97%) | oklch(98.5% 0.009 94) |
Why it works and how to use it
The palette holds together thanks to its neutral backbone and a strong light-to-dark ladder (97% down to 26% lightness). A natural fit for websites, presentations and branding.
- Background: Snow (#FCFAF3) is the lightest color, so it belongs on large surfaces.
- Text: Graphite (#3B4A3E) on #FCFAF3 gives 9:1, passing WCAG AAA.
- Primary: Bone (#D3E0C3) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Shadow (#728C69) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Graphite on Snow at 9:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Shadow & Bone Haze
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
#3B4A3E
#728C69
#D3E0C3
#FCFAF3
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#3B4A3E on #FCFAF3 | Aa | 9:1 | AAA |
#3B4A3E on #D3E0C3 | Aa | 6.81:1 | AA |
#728C69 on #FCFAF3 | Aa | 3.55:1 | AA large only |
#728C69 on #D3E0C3 | Aa | 2.68:1 | Fail |
#3B4A3E on #728C69 | Aa | 2.54:1 | Fail |
#D3E0C3 on #FCFAF3 | Aa | 1.32:1 | Fail |
Similar palettes 24 more in this mood
#4E3B3B
#7E5E5C
#C9A19C
#F6ECEA
#3C5148
#7A9B76
#C8D5B9
#F6F5EE
#FCF8F4
#F0DAC0
#DE9F7B
#2D2E3A
#3E2723
#6D4C41
#A1887F
#EFEBE9
#3F2B2B
#8A5F5C
#F2B8B5
#FBF4F2
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#FFF3EC
#FFD3BF
#FFB39B
#6E5147
#5B3F2E
#8B6A4E
#D9C2A0
#F6EFE3
#452700
#686265
#FFB9A3
#FFEAEC
#FBF7EF
#EAD9B8
#C9A961
#3A3226
#142532
#528494
#DE9D89
#FAF4E9
#F9EDEA
#E8C4B8
#B76E79
#4A3F3C
#1D1900
#B0BEB3
#D5EBBA
#FFF2E0
#586557
#96856F
#E3D0B5
#FFFAEF
#0F3D3E
#1E6F6F
#C8B89A
#F3EFE7
#3E4551
#677287
#EDF3FE
#FFE2A8
#3B2C23
#86624B
#AD9878
#F5E7C6
#624E4E
#9A7977
#E8BFBA
#FFF8F7
#524037
#8E6C5A
#ADF2DF
#FDF9F4
#433D37
#AE9E8D
#FFD0C3
#FFEEE7
#B89F6E
#DAC9A1
#6A6A5A
#F5F3EE
#FFAEA7
#1E1913
#6E5A48
#EEEEEE
#2A1A12
#704E3C
#9C6B48
#E7D4C1