#C2C1E5
#FCB9BB
#E7E5B2
#A4F8F9
#C1D7C4Fog
#BBF0F9Glacier
#E5F1BFVanilla
#F0FBF8Smoke
Vanilla & Glacier Path is a pastel light, split color palette tagged light, pastel, muted. A split scheme: Fog plays against Vanilla across roughly 115° of hue. High lightness and gentle saturation put it firmly in pastel territory. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Fog | #C1D7C4 | rgb(193, 215, 196) | hsl(128, 22%, 80%) | oklch(85.7% 0.035 149) | |
| Glacier | #BBF0F9 | rgb(187, 240, 249) | hsl(189, 84%, 85%) | oklch(92.2% 0.055 209) | |
| Vanilla | #E5F1BF | rgb(229, 241, 191) | hsl(74, 64%, 85%) | oklch(93.7% 0.067 119) | |
| Smoke | #F0FBF8 | rgb(240, 251, 248) | hsl(164, 58%, 96%) | oklch(97.9% 0.012 178) |
Why it works and how to use it
It works because the lightness steps are gentle (80% to 96%), which keeps the mood consistent from edge to edge. Try it for social media templates and gentle interfaces.
- Background: Smoke (#F0FBF8) is the lightest color, so it belongs on large surfaces.
- Text: Fog (#C1D7C4) on #F0FBF8 gives 1.44:1, so pair it with a darker neutral for body copy.
- Primary: Glacier (#BBF0F9) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Vanilla (#E5F1BF) 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 Vanilla & Glacier 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
#C1D7C4
#BBF0F9
#E5F1BF
#F0FBF8
Color-blind check: under deuteranopia and tritanopia, Fog and Glacier 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 |
|---|---|---|---|
#C1D7C4 on #F0FBF8 | Aa | 1.44:1 | Fail |
#C1D7C4 on #E5F1BF | Aa | 1.28:1 | Fail |
#C1D7C4 on #BBF0F9 | Aa | 1.23:1 | Fail |
#BBF0F9 on #F0FBF8 | Aa | 1.17:1 | Fail |
#E5F1BF on #F0FBF8 | Aa | 1.12:1 | Fail |
#BBF0F9 on #E5F1BF | Aa | 1.04:1 | Fail |
Similar palettes 24 more in this mood
#EDD693
#DE9F7B
#82C3AF
#FDFDFD
#D9A48F
#EFC8B8
#F7E6DC
#FFFAF6
#FFABA9
#CFCAF3
#E2E69B
#93F9FF
#D2C6AC
#FFC6DB
#FFCFAF
#FFE5E2
#B8B2A4
#A7D39D
#D7E09F
#FFE9D5
#DD9F6E
#EDD693
#9DBE7C
#FDFDFD
#EEAFE0
#FFD1CB
#FFF8F1
#FFEEAC
#E3AD9C
#EED6AB
#AFDBCF
#FDF9F6
#FF9A8B
#FFB4A2
#FFCDB2
#FFF1E6
#FFBE98
#F9A98D
#F8D5C2
#FFF4EC
#FFA891
#F7C6B5
#FBEDE7
#F0BC7A
#E8DC00
#FFEBAB
#FFFDFB
#B8B8B8
#FFD6EB
#C2DCFF
#EDD0A7
#A3D0BC
#DFB8FA
#B1E7E9
#AEBEE7
#FDFDFD
#DCABC0
#BCB5F1
#FFC0BD
#F7ECF9
#FFAFCC
#BDE0FE
#CDB4DB
#FFFFFF
#FFE0F1
#FFE1BB
#B0D4FD
#96D9B8
#A3CCF3
#F4B0E0
#FFDFBF
#CFF5DD
#F6B078
#F0CBAA
#FBEDE7
#DAC777
#FFDAD8
#CFD39A
#97D3D7
#C4BCF6
#CEBCEE
#94E5DD
#EFDEFF
#FFE1C1
#D0C79B
#74DCD2
#C6CEFF
#FFC9D2
#E7EAFF
#D8C7FF
#DCACDB
#C3A9B3