#8C6A5D
#C6A48E
#E9D8C0
#5C7A6B
#797453Shadow
#ABB08BSage
#D0E1C8Bone
#577883Slate
Worn Sage & Shadow is a muted complementary color palette tagged muted, brown, beige. Shadow and Slate 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 |
|---|---|---|---|---|---|
| Shadow | #797453 | rgb(121, 116, 83) | hsl(52, 19%, 40%) | oklch(55.5% 0.048 101) | |
| Sage | #ABB08B | rgb(171, 176, 139) | hsl(68, 19%, 62%) | oklch(74.3% 0.051 114) | |
| Bone | #D0E1C8 | rgb(208, 225, 200) | hsl(101, 29%, 83%) | oklch(89.0% 0.038 136) | |
| Slate | #577883 | rgb(87, 120, 131) | hsl(195, 20%, 43%) | oklch(55.2% 0.041 220) |
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 (83% down to 40% lightness). A natural fit for websites, presentations and branding.
- Background: Bone (#D0E1C8) is the lightest color, so it belongs on large surfaces.
- Text: Slate (#577883) on #D0E1C8 gives 3.46:1, enough for large headings only.
- Primary: Shadow (#797453) is the most saturated mid-tone; use it for buttons and links (3.45:1 against the background, fine for UI elements).
- Accent: Sage (#ABB08B) 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 Worn Sage & 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
#797453
#ABB08B
#D0E1C8
#577883
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#D0E1C8 on #577883 | Aa | 3.46:1 | AA large only |
#797453 on #D0E1C8 | Aa | 3.45:1 | AA large only |
#ABB08B on #577883 | Aa | 2.11:1 | Fail |
#797453 on #ABB08B | Aa | 2.1:1 | Fail |
#ABB08B on #D0E1C8 | Aa | 1.64:1 | Fail |
#797453 on #577883 | Aa | 1:1 | Fail |
Similar palettes 24 more in this mood
#5A5934
#776D5C
#BE957B
#DFACA6
#916653
#D2C2B0
#E9D393
#2B201A
#DFCEAD
#BFA797
#96978E
#6A8667
#94875B
#C4C0BF
#FAD0AB
#FFDEE6
#452700
#686265
#FFB9A3
#FFEAEC
#515531
#7F8058
#C1B798
#D4CFC3
#CAAB80
#B193A4
#A46268
#874A2D
#586557
#96856F
#E3D0B5
#FFFAEF
#BE9D76
#86B09B
#CCC596
#D9E2D3
#8C8558
#D7DFC9
#C5FAC9
#3E322B
#D69F74
#C5D9A6
#E5DCCD
#F8F1AF
#DB937D
#E6BC97
#EFD8A5
#94997A
#A47864
#E9D8C6
#FFE9A8
#3E322B
#3B2C23
#86624B
#AD9878
#F5E7C6
#3B4A3E
#728C69
#D3E0C3
#FCFAF3
#8A784C
#A3897C
#BFA58B
#C1C1B5
#81775C
#999997
#B5E4CC
#E5FDDE
#FFE4D5
#D09B7B
#705300
#3A3328
#75837A
#A6885E
#ABACAA
#EEEABE
#B89F6E
#DAC9A1
#6A6A5A
#F5F3EE
#2A1A12
#704E3C
#9C6B48
#E7D4C1
#2B372A
#5E4F3A
#B09E84
#D9D3C7
#BBA77C
#CFC2A5
#898A78
#F0EEE6