#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#FDEFF4Smoke
#F7C8D8Bubblegum
#CDE7F0Glacier
#5B6C8FDove Gray
Marshmallow Sky is a pastel light, complementary color palette tagged muted, white. Near-complementary hues (about 145° apart) make this a high-contrast, attention-grabbing combination. High lightness and gentle saturation put it firmly in pastel territory. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Smoke | #FDEFF4 | rgb(253, 239, 244) | hsl(339, 78%, 96%) | oklch(96.5% 0.016 354) | |
| Bubblegum | #F7C8D8 | rgb(247, 200, 216) | hsl(340, 75%, 88%) | oklch(87.8% 0.057 356) | |
| Glacier | #CDE7F0 | rgb(205, 231, 240) | hsl(195, 54%, 87%) | oklch(91.2% 0.030 221) | |
| Dove Gray | #5B6C8F | rgb(91, 108, 143) | hsl(220, 22%, 46%) | oklch(53.1% 0.059 264) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (96% down to 46% lightness). A natural fit for social media templates and gentle interfaces.
- Background: Smoke (#FDEFF4) is the lightest color, so it belongs on large surfaces.
- Text: Dove Gray (#5B6C8F) on #FDEFF4 gives 4.72:1, passing WCAG AA.
- Primary: Bubblegum (#F7C8D8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Glacier (#CDE7F0) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Dove Gray at 4.72:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Marshmallow Sky
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
#FDEFF4
#F7C8D8
#CDE7F0
#5B6C8F
Color-blind check: under protanopia and deuteranopia, Bubblegum 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 |
|---|---|---|---|
#FDEFF4 on #5B6C8F | Aa | 4.72:1 | AA |
#CDE7F0 on #5B6C8F | Aa | 4.08:1 | AA large only |
#F7C8D8 on #5B6C8F | Aa | 3.56:1 | AA large only |
#FDEFF4 on #F7C8D8 | Aa | 1.33:1 | Fail |
#FDEFF4 on #CDE7F0 | Aa | 1.16:1 | Fail |
#F7C8D8 on #CDE7F0 | Aa | 1.15:1 | Fail |
Similar palettes 24 more in this mood
#A47864
#C9A58B
#E8D9CB
#F7F3EE
#D9A48F
#EFC8B8
#F7E6DC
#FFFAF6
#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#3C5148
#7A9B76
#C8D5B9
#F6F5EE
#1A4D2E
#4F6F52
#E8DFCA
#F5EFE6
#B08968
#DDB892
#E6CCB2
#FFF6EA
#3E2723
#6D4C41
#A1887F
#EFEBE9
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#3D405B
#81B29A
#F2CC8F
#F4F1DE
#7D6E5D
#B9A990
#E7DFD3
#F9F7F3
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#A8DADC
#457B9D
#1D3557
#F1FAEE
#1B4965
#5FA8D3
#A8E0DE
#E4F1FF
#4B3832
#854442
#BE9B7B
#FFF4E6
#B76E79
#E8A0A6
#F4C8C8
#FDF2F0
#1B4332
#2D6A4F
#B7B7A4
#F0EFEB
#A68A64
#C2B280
#E6DCC3
#FAF7F0
#C9A66B
#E4C590
#F1E3C8
#F9F5EC
#5B7B6C
#8AA399
#C4D3CC
#EEF3F0
#1C2541
#465D79
#5BC0BE
#FFFFFF
#EAF7EF
#BFE8D2
#F9E1C4
#4A6B5A
#F3ECFA
#D9C6F2
#FFD9C2
#5E4B7A
#FFF4F6
#FFC9D6
#FFE7A8
#7A5C6B