#C1D7C4
#BBF0F9
#E5F1BF
#F0FBF8
#D98985Salmon
#F3E7AAVanilla
#88C3BEAsh
#F9FEF9White
Salmon & Vanilla Echo is a pastel light, complementary color palette tagged pastel, muted, beige. Salmon and Ash sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. The colors are light and airy, which suits friendly, soft-spoken brands. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Salmon | #D98985 | rgb(217, 137, 133) | hsl(3, 53%, 69%) | oklch(71.2% 0.099 23) | |
| Vanilla | #F3E7AA | rgb(243, 231, 170) | hsl(50, 75%, 81%) | oklch(92.3% 0.079 98) | |
| Ash | #88C3BE | rgb(136, 195, 190) | hsl(175, 33%, 65%) | oklch(77.5% 0.061 189) | |
| White | #F9FEF9 | rgb(249, 254, 249) | hsl(120, 71%, 99%) | oklch(99.2% 0.008 146) |
Why it works and how to use it
It works because the lightness steps are gentle (65% to 99%), which keeps the mood consistent from edge to edge. Try it for social media templates and gentle interfaces.
- Background: White (#F9FEF9) is the lightest color, so it belongs on large surfaces.
- Text: Salmon (#D98985) on #F9FEF9 gives 2.61:1, so pair it with a darker neutral for body copy.
- Primary: Vanilla (#F3E7AA) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Ash (#88C3BE) 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 Salmon & Vanilla Echo
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
#D98985
#F3E7AA
#88C3BE
#F9FEF9
Color-blind check: under tritanopia, Vanilla and White 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 |
|---|---|---|---|
#D98985 on #F9FEF9 | Aa | 2.61:1 | Fail |
#D98985 on #F3E7AA | Aa | 2.14:1 | Fail |
#88C3BE on #F9FEF9 | Aa | 1.94:1 | Fail |
#F3E7AA on #88C3BE | Aa | 1.59:1 | Fail |
#D98985 on #88C3BE | Aa | 1.35:1 | Fail |
#F3E7AA on #F9FEF9 | Aa | 1.22:1 | Fail |
Similar palettes 24 more in this mood
#FBF6F0
#F3DCD4
#E8B4B8
#B8A184
#D198A5
#E0B289
#CDBAC8
#FFEBE6
#EDD693
#DE9F7B
#82C3AF
#FDFDFD
#D9A48F
#EFC8B8
#F7E6DC
#FFFAF6
#79ABA7
#BBEBD9
#F7FCF7
#FFE6C0
#A4A29D
#C2B89B
#D4F4B8
#FFFCFD
#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