Candy Shop color palette
A row of jars on a candy counter: strawberry pink #FF6B9D, peach, butter yellow #FFD166, mint #06D6A0 and a deeper ocean blue, #118AB2. All five are bright and friendly, and the blue gives the set a calm anchor. It's playful without being babyish. Candy stores, kids' apps, birthday parties, ice cream trucks and family events fit it, especially with rounded type.
Candy Shop palette in use
Use white as the background with a dark navy for text. #FF6B9D makes the main button, #118AB2 handles links and headings, and #FFD166 and #06D6A0 work for cards and badges.
This pair measures 14.56:1, so it works for body text too. The button uses #FF6B9D with black text.
ButtonGood for
- Candy store website
- Birthday party invite
- Ice cream truck sign
- Family event flyer
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.
Candy Shop palette as code
CSS variables
:root {
--candy-shop-1: #FF6B9D;
--candy-shop-2: #FF8E72;
--candy-shop-3: #FFD166;
--candy-shop-4: #06D6A0;
--candy-shop-5: #118AB2;
}Tailwind v4
@theme {
--color-candy-shop-1: #FF6B9D;
--color-candy-shop-2: #FF8E72;
--color-candy-shop-3: #FFD166;
--color-candy-shop-4: #06D6A0;
--color-candy-shop-5: #118AB2;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'candy-shop': {
100: '#FF6B9D',
200: '#FF8E72',
300: '#FFD166',
400: '#06D6A0',
500: '#118AB2',
},SCSS
$candy-shop-1: #FF6B9D;
$candy-shop-2: #FF8E72;
$candy-shop-3: #FFD166;
$candy-shop-4: #06D6A0;
$candy-shop-5: #118AB2;JSON
["#FF6B9D","#FF8E72","#FFD166","#06D6A0","#118AB2"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.