#5E8B86
#A7C4BC
#D9A87E
#F6F0E6
#61684FDove Gray
#9BA082Sage
#C9AD97Khaki
#F5F2EESmoke
Khaki & Sage Path is a muted neutral-based color palette tagged boho, muted, gray. Built almost entirely from neutrals, with Khaki (#C9AD97) as the single point of color. Saturation stays low across the board, giving it a calm, editorial feel. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Dove Gray | #61684F | rgb(97, 104, 79) | hsl(77, 14%, 36%) | oklch(50.4% 0.039 121) | |
| Sage | #9BA082 | rgb(155, 160, 130) | hsl(70, 14%, 57%) | oklch(69.3% 0.043 115) | |
| Khaki | #C9AD97 | rgb(201, 173, 151) | hsl(26, 32%, 69%) | oklch(76.6% 0.045 60) | |
| Smoke | #F5F2EE | rgb(245, 242, 238) | hsl(34, 26%, 95%) | oklch(96.2% 0.006 75) |
Why it works and how to use it
The palette holds together thanks to its neutral backbone and a strong light-to-dark ladder (95% down to 36% lightness). A natural fit for websites, presentations and branding.
- Background: Smoke (#F5F2EE) is the lightest color, so it belongs on large surfaces.
- Text: Dove Gray (#61684F) on #F5F2EE gives 5.23:1, passing WCAG AA.
- Primary: Khaki (#C9AD97) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sage (#9BA082) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Dove Gray on Smoke at 5.23:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Khaki & Sage Path
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
#61684F
#9BA082
#C9AD97
#F5F2EE
Color-blind check: under protanopia and deuteranopia, Sage and Khaki become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#61684F on #F5F2EE | Aa | 5.23:1 | AA |
#61684F on #C9AD97 | Aa | 2.75:1 | Fail |
#9BA082 on #F5F2EE | Aa | 2.43:1 | Fail |
#61684F on #9BA082 | Aa | 2.15:1 | Fail |
#C9AD97 on #F5F2EE | Aa | 1.9:1 | Fail |
#9BA082 on #C9AD97 | Aa | 1.28:1 | Fail |
Similar palettes 24 more in this mood
#353C54
#646E8E
#C6AB8C
#F3EFE9
#C4A484
#E6D3B3
#A98467
#F7F1E8
#574D51
#9EB9B2
#EEEAD2
#DEBC92
#778452
#B9C288
#F1BF95
#FEF9F1
#5C4B51
#8CBEB2
#F2EBBF
#F3B562
#5E3A5B
#9A6B8E
#D9B98C
#F6EFE6
#D98C6B
#EFC1A2
#B5A78F
#F8F2EA
#73A19B
#C4E2DA
#EFBD92
#FFF9F0
#F4A583
#FFD6BB
#D0C2A9
#FFF9F1
#DC8A37
#F8B872
#91654D
#F5EEDF
#E4B141
#FAD981
#9F7E57
#FFFAEE
#3C5148
#7A9B76
#C8D5B9
#F6F5EE
#785375
#AF7EA2
#F1D1A3
#FFF9F2
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#7D6E5D
#B9A990
#E7DFD3
#F9F7F3
#2E3A66
#5C6BA6
#D7A66B
#F5EFE4
#5F6B3A
#9AA36A
#D9A87E
#F7F2EA
#A44A3F
#D4A373
#DCE3A8
#FBE6C2
#EAF7EF
#BFE8D2
#F9E1C4
#4A6B5A
#FFF4F6
#FFC9D6
#FFE7A8
#7A5C6B
#C9971C
#E4C36B
#8A6A44
#F5EEDF
#5CBAA9
#5E99B8
#23737D
#356345
#7F6000
#B8885D
#B3B96E
#AEE699