#C1D7C4
#BBF0F9
#E5F1BF
#F0FBF8
#A4A29DDust
#C2B89BKhaki
#D4F4B8Vanilla
#FFFCFDSnow
Verdant Vanilla & Khaki is a pastel light, analogous color palette tagged pastel, muted, gray. Analogous neighbors on the wheel (Khaki, Vanilla) give it a natural, low-tension flow. High lightness and gentle saturation put it firmly in pastel territory. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Dust | #A4A29D | rgb(164, 162, 157) | hsl(43, 4%, 63%) | oklch(71.2% 0.008 89) | |
| Khaki | #C2B89B | rgb(194, 184, 155) | hsl(45, 24%, 68%) | oklch(78.3% 0.041 91) | |
| Vanilla | #D4F4B8 | rgb(212, 244, 184) | hsl(92, 73%, 84%) | oklch(92.9% 0.086 131) | |
| Snow | #FFFCFD | rgb(255, 252, 253) | hsl(340, 100%, 99%) | oklch(99.4% 0.003 355) |
Why it works and how to use it
Two of the four colors are near-neutral, which leaves room for Vanilla to lead. Lightness runs from 63% to 99%. Well suited to social media templates and gentle interfaces.
- Background: Snow (#FFFCFD) is the lightest color, so it belongs on large surfaces.
- Text: Dust (#A4A29D) on #FFFCFD gives 2.5:1, so pair it with a darker neutral for body copy.
- Primary: Vanilla (#D4F4B8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Khaki (#C2B89B) 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 Verdant Vanilla & Khaki
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
#A4A29D
#C2B89B
#D4F4B8
#FFFCFD
Color-blind check: under tritanopia, Vanilla and Snow 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 |
|---|---|---|---|
#A4A29D on #FFFCFD | Aa | 2.5:1 | Fail |
#A4A29D on #D4F4B8 | Aa | 2.12:1 | Fail |
#C2B89B on #FFFCFD | Aa | 1.94:1 | Fail |
#C2B89B on #D4F4B8 | Aa | 1.64:1 | Fail |
#A4A29D on #C2B89B | Aa | 1.29:1 | Fail |
#D4F4B8 on #FFFCFD | Aa | 1.18:1 | Fail |
Similar palettes 24 more in this mood
#FBF6F0
#F3DCD4
#E8B4B8
#B8A184
#D198A5
#E0B289
#CDBAC8
#FFEBE6
#D98985
#F3E7AA
#88C3BE
#F9FEF9
#EDD693
#DE9F7B
#82C3AF
#FDFDFD
#D9A48F
#EFC8B8
#F7E6DC
#FFFAF6
#79ABA7
#BBEBD9
#F7FCF7
#FFE6C0
#C9A66B
#E4C590
#F1E3C8
#F9F5EC
#B8AA6D
#96C6AC
#CBD89D
#DDF5D8
#C2C1E5
#FCB9BB
#E7E5B2
#A4F8F9
#ADB09D
#DDAB7F
#ACCBA5
#E2D3AE
#D2C6AC
#FFC6DB
#FFCFAF
#FFE5E2
#B8B2A4
#A7D39D
#D7E09F
#FFE9D5
#7CB38A
#B1C3BF
#DFCD8A
#DFF3BB
#C2A167
#D292A5
#D9B2AD
#FFEDE2
#BE9D76
#86B09B
#CCC596
#D9E2D3
#C09B81
#B7C385
#CEB6B3
#EBD299
#FFF8F7
#FFD6CD
#FAB9AB
#CD8A7D
#D69F74
#C5D9A6
#E5DCCD
#F8F1AF
#9E9B8A
#C39F63
#ADE0C7
#FFEBE6
#DD9F6E
#EDD693
#9DBE7C
#FDFDFD
#EEAFE0
#FFD1CB
#FFF8F1
#FFEEAC
#E3AD9C
#EED6AB
#AFDBCF
#FDF9F6
#FF9A8B
#FFB4A2
#FFCDB2
#FFF1E6