Palette · pink · playful · pastel
Bubblegum
Bright bubblegum pink and grape purple on a blush base — high-energy and fun, for consumer apps that want to feel joyful.
Copy as
Building with shadcn/ui?
Install Bubblegum as a real theme — light and dark, OKLCH tokens, contrast checked.
Usage system
Everything you need to wire this palette into a real project, not just the colors.
CSS variables
:root {
--color-bg: #FFF0F6;
--color-surface: #FFFFFF;
--color-primary: #EC4899;
--color-accent: #8B5CF6;
--color-text: #4A1D3F;
--color-muted: #9C5F82;
}Tailwind config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
bg: '#FFF0F6',
surface: '#FFFFFF',
primary: '#EC4899',
accent: '#8B5CF6',
text: '#4A1D3F',
muted: '#9C5F82',
},
},
},
}; Font pairing Baloo 2 / heading · Nunito Sans / body
Corner radius 18px
Spacing scale 4px base · 4 / 8 / 16 / 24 / 32
In context
New
Build better, faster
A card, a heading, a button and a hint of text: the palette doing real work.
Found one you like? Pair it with a template, generate a matching background in the gradient generator, or browse all palettes.