#3E2723
#6D4C41
#A1887F
#EFEBE9
#5C4A3AWalnut
#8C7561Shadow
#9EC1D6Sky Blue
#F4F6F7Smoke
Umber & Sky is a complementary color palette tagged muted, minimal, earthy. Near-complementary hues (about 175° 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 |
|---|---|---|---|---|---|
| Walnut | #5C4A3A | rgb(92, 74, 58) | hsl(28, 23%, 29%) | oklch(42.3% 0.035 63) | |
| Shadow | #8C7561 | rgb(140, 117, 97) | hsl(28, 18%, 46%) | oklch(57.9% 0.041 63) | |
| Sky Blue | #9EC1D6 | rgb(158, 193, 214) | hsl(203, 41%, 73%) | oklch(79.2% 0.048 235) | |
| Smoke | #F4F6F7 | rgb(244, 246, 247) | hsl(200, 16%, 96%) | oklch(97.2% 0.003 229) |
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 (96% down to 29% lightness). A natural fit for wellness, organic and outdoor brands.
- Background: Smoke (#F4F6F7) is the lightest color, so it belongs on large surfaces.
- Text: Walnut (#5C4A3A) on #F4F6F7 gives 7.76:1, passing WCAG AAA.
- Primary: Sky Blue (#9EC1D6) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Shadow (#8C7561) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Walnut on Smoke at 7.76:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Umber & Sky
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
#5C4A3A
#8C7561
#9EC1D6
#F4F6F7
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#5C4A3A on #F4F6F7 | Aa | 7.76:1 | AAA |
#5C4A3A on #9EC1D6 | Aa | 4.43:1 | AA large only |
#8C7561 on #F4F6F7 | Aa | 4.01:1 | AA large only |
#8C7561 on #9EC1D6 | Aa | 2.29:1 | Fail |
#5C4A3A on #8C7561 | Aa | 1.94:1 | Fail |
#9EC1D6 on #F4F6F7 | Aa | 1.75:1 | Fail |
Similar palettes 24 more in this mood
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#5B3F2E
#8B6A4E
#D9C2A0
#F6EFE3
#42322D
#896B5E
#C39675
#FFF9F2
#573E3A
#89665B
#B99F96
#FDF9F7
#FFE5E1
#A98579
#664F47
#302D2C
#715342
#9E7C5F
#F7E0BD
#FFF9F0
#42352D
#7D6452
#DFBF88
#FCF8F2
#5B3A2A
#95664A
#D6B99C
#FBF6F0
#A47864
#C9A58B
#E8D9CB
#F7F3EE
#6E4F3A
#A98466
#DFC9B3
#FAF5EF
#FBF5EE
#F0D7C0
#E1AC85
#5D4535
#36301F
#7F704C
#D1BB86
#FBF6E6
#322825
#786155
#A4836D
#FFF9F3
#302521
#72584A
#C49A78
#FFF9F3
#B08968
#DDB892
#E6CCB2
#FFF6EA
#A68A64
#C2B280
#E6DCC3
#FAF7F0
#FFF3EC
#FFD3BF
#FFB39B
#6E5147
#8A4A3C
#C98C7A
#E9C7B0
#F6EFE8
#C4A484
#E6D3B3
#A98467
#F7F1E8
#7A5C4A
#B08F73
#E3CDB0
#F8F1E6
#5C302C
#AD9878
#86624B
#F5E7C6
#FFF2D9
#AEA58C
#7B715A
#2E2713
#3E4A3D
#7A6A55
#C9B79C
#EDE7DB