#DCABC0
#BCB5F1
#FFC0BD
#F7ECF9
#FFAFCCCotton Candy
#BDE0FEGlacier
#CDB4DBThistle
#FFFFFFWhite
Bubble Bath is a pastel light, complementary color palette tagged pastel, light, muted. Cotton Candy and Thistle 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 |
|---|---|---|---|---|---|
| Cotton Candy | #FFAFCC | rgb(255, 175, 204) | hsl(338, 100%, 84%) | oklch(83.8% 0.100 356) | |
| Glacier | #BDE0FE | rgb(189, 224, 254) | hsl(208, 97%, 87%) | oklch(89.1% 0.056 244) | |
| Thistle | #CDB4DB | rgb(205, 180, 219) | hsl(278, 35%, 78%) | oklch(80.4% 0.060 313) | |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | oklch(100.0% 0.000 0) |
Why it works and how to use it
With 3 chromatic colors, Cotton Candy takes the lead while the rest support. Lightness runs from 78% to 100%. Well suited to social media templates and gentle interfaces.
- Background: White (#FFFFFF) is the lightest color, so it belongs on large surfaces.
- Text: Thistle (#CDB4DB) on #FFFFFF gives 1.88:1, so pair it with a darker neutral for body copy.
- Primary: Cotton Candy (#FFAFCC) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Glacier (#BDE0FE) 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 Bubble Bath
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
#FFAFCC
#BDE0FE
#CDB4DB
#FFFFFF
Color-blind check: under deuteranopia, Cotton Candy 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 |
|---|---|---|---|
#CDB4DB on #FFFFFF | Aa | 1.88:1 | Fail |
#FFAFCC on #FFFFFF | Aa | 1.71:1 | Fail |
#BDE0FE on #FFFFFF | Aa | 1.38:1 | Fail |
#BDE0FE on #CDB4DB | Aa | 1.37:1 | Fail |
#FFAFCC on #BDE0FE | Aa | 1.24:1 | Fail |
#FFAFCC on #CDB4DB | Aa | 1.1:1 | Fail |
Similar palettes 24 more in this mood
#CDB4DB
#FFC8DD
#FFAFCC
#BDE0FE
#DFB8FA
#B1E7E9
#AEBEE7
#FDFDFD
#F7E9DF
#FFC8D4
#E9AFD8
#C29991
#FF9AC0
#91C4EE
#D2ADE6
#FDFDFD
#E7EAFF
#D8C7FF
#DCACDB
#C3A9B3
#D2C6AC
#FFC6DB
#FFCFAF
#FFE5E2
#D2A9C7
#90C7F5
#D8C5EE
#EDF0FF
#E79EE3
#FFC9CF
#D5D491
#FFF9F2
#CDB4DB
#FFC8DD
#7EE0C8
#BDE0FE
#D9A48F
#EFC8B8
#F7E6DC
#FFFAF6
#FEB88D
#E1D3FB
#E3AFB6
#FDFDFD
#FF9A8B
#FFB4A2
#FFCDB2
#FFF1E6
#A0DCA3
#BDE0FE
#CDB4DB
#FDFDFD
#FFAFCC
#FFC8DD
#BDE0FE
#A2D2FF
#E2A7B5
#BACB92
#C9E7FF
#FFD9E2
#CEBCEE
#94E5DD
#EFDEFF
#FFE1C1
#D0C79B
#74DCD2
#C6CEFF
#FFC9D2
#C8A9B3
#C5B6EC
#FECDFC
#E2EBFF
#C1D7C4
#BBF0F9
#E5F1BF
#F0FBF8
#FBF6F0
#F3DCD4
#E8B4B8
#B8A184
#D0D38F
#FFC6C4
#AFE3E6
#E9E7FF
#FCD1E4
#F4EEE3
#83DEB0
#F5A69F
#E29D91
#E0BBC5
#EFDAC9
#FFD9F8