Cotton Candy color palette
Every color here is a light, sugary pastel: pink #FFB3BA, peach, butter yellow #FFFFBA, mint and baby blue. They share the same softness, so any two can sit side by side without clashing. There's no dark shade at all, which means you'll need a charcoal or navy for text. A baby shower invitation or an ice cream parlor menu would look right in it.
Cotton Candy palette in use
Use #FFFFBA or #BAE1FF as page backgrounds and the other pastels for cards, tags and illustration fills, with dark charcoal text. #FFB3BA is the strongest of the five, so give it the button.
This pair measures 20.26:1, so it works for body text too. The button uses #BAFFC9 with black text.
ButtonGood for
- Baby shower invitation
- Kids' learning app
- Ice cream parlor menu
- Pastel stationery line
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Cotton Candy palette as code
CSS variables
:root {
--cotton-candy-1: #FFB3BA;
--cotton-candy-2: #FFDFBA;
--cotton-candy-3: #FFFFBA;
--cotton-candy-4: #BAFFC9;
--cotton-candy-5: #BAE1FF;
}Tailwind v4
@theme {
--color-cotton-candy-1: #FFB3BA;
--color-cotton-candy-2: #FFDFBA;
--color-cotton-candy-3: #FFFFBA;
--color-cotton-candy-4: #BAFFC9;
--color-cotton-candy-5: #BAE1FF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'cotton-candy': {
100: '#FFB3BA',
200: '#FFDFBA',
300: '#FFFFBA',
400: '#BAFFC9',
500: '#BAE1FF',
},SCSS
$cotton-candy-1: #FFB3BA;
$cotton-candy-2: #FFDFBA;
$cotton-candy-3: #FFFFBA;
$cotton-candy-4: #BAFFC9;
$cotton-candy-5: #BAE1FF;JSON
["#FFB3BA","#FFDFBA","#FFFFBA","#BAFFC9","#BAE1FF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.