#FFF4F6
#FFC9D6
#FFE7A8
#7A5C6B
#FFF8FASnow
#FFC1CEBubblegum
#A9D9B9Celadon
#697E71Gray
Lush Bubblegum & Celadon is a light, complementary color palette tagged spring, muted, white. Near-complementary hues (about 153° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Snow | #FFF8FA | rgb(255, 248, 250) | hsl(343, 100%, 99%) | oklch(98.5% 0.008 358) | |
| Bubblegum | #FFC1CE | rgb(255, 193, 206) | hsl(347, 100%, 88%) | oklch(87.0% 0.073 5) | |
| Celadon | #A9D9B9 | rgb(169, 217, 185) | hsl(140, 39%, 76%) | oklch(84.3% 0.067 156) | |
| Gray | #697E71 | rgb(105, 126, 113) | hsl(143, 9%, 45%) | oklch(57.2% 0.032 158) |
Why it works and how to use it
It works because the lightness range is wide (45% to 99%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Snow (#FFF8FA) is the lightest color, so it belongs on large surfaces.
- Text: Gray (#697E71) on #FFF8FA gives 4.16:1, enough for large headings only.
- Primary: Bubblegum (#FFC1CE) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Celadon (#A9D9B9) 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 Lush Bubblegum & Celadon
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
#FFF8FA
#FFC1CE
#A9D9B9
#697E71
Color-blind check: under protanopia and deuteranopia, Bubblegum and Celadon 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 |
|---|---|---|---|
#FFF8FA on #697E71 | Aa | 4.16:1 | AA large only |
#FFC1CE on #697E71 | Aa | 2.86:1 | Fail |
#A9D9B9 on #697E71 | Aa | 2.76:1 | Fail |
#FFF8FA on #A9D9B9 | Aa | 1.51:1 | Fail |
#FFF8FA on #FFC1CE | Aa | 1.46:1 | Fail |
#FFC1CE on #A9D9B9 | Aa | 1.03:1 | Fail |
Similar palettes 24 more in this mood
#F8E1E7
#F4A6B7
#8FBF9F
#4F6457
#DA8996
#EDD5A0
#A6CEA7
#FDFDFD
#FFB9CA
#FFF5F7
#B2CBB1
#4F6053
#3FA6F5
#F7AFC8
#CAE4A4
#FFCCD5
#1D1B1C
#D4C3CD
#AFEC7C
#F5F3F4
#E2A7B5
#BACB92
#C9E7FF
#FFD9E2
#F6FBEF
#CDE7B0
#7FB069
#3B5A3A
#FF6B8B
#FFD166
#8CD790
#FFFFFF
#F6FBEF
#B4ECC6
#55B68B
#285C4B
#437F63
#6CD0A0
#AAEAC7
#F0FFF2
#6B2D5C
#F0386B
#FF5376
#F8C0C8
#FF5D8F
#FF9EBB
#FFC2D4
#FFE0E9
#2D6A4F
#52B788
#95D5B2
#D8F3DC
#C3E8B9
#DEDA5E
#26E3B7
#70D0D9
#D79EAB
#EFD9DE
#A4B1A3
#434C45
#F7777F
#E0926E
#FDB95A
#FFB9D9
#AC9CE8
#EC8CB9
#B4CCFF
#FAD9FF
#F7D8A8
#A5C786
#E5945E
#AEAA73
#AF8AF0
#92AFFF
#ED96B0
#FAC6F5
#B79E6D
#AAE478
#A3E1BA
#ECEA76
#FFDCD3
#FFB8BF
#EA944C
#DA90B3
#48BC75
#6CBFB4
#48D9F7
#CFE9FF
#C1E6AA
#C6C978
#ED9018
#C4A24F