Candy Stripe color palette
A peppermint stick wrapped in pink. Deep pink #FF1493 and hot pink #FF69B4 do the striping, light pink and blush white #FFF0F5 fill the gaps, and pure red #FF0000 adds a hard edge. Everything is saturated and sugary. On its own it's very pink, so bring in a dark plum or black for text. It's built for Valentine's Day promotions and candy shops.
Candy Stripe palette in use
Use #FFF0F5 as the background and #FF1493 for buttons and large headings. #FF0000 marks sale prices and alerts, #FFB6C1 fills cards, and body text needs a dark plum or black.
This pair measures 19.03:1, so it works for body text too. The button uses #FF1493 with black text.
ButtonGood for
- Valentine's Day promo
- Candy shop website
- Bakery box design
- Sale price tags
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#FF0000 | #FFF0F5 | 3.62:1 | AA large |
#FF1493 | #FFF0F5 | 3.29:1 | AA large |
Candy Stripe palette as code
CSS variables
:root {
--candy-stripe-1: #FF1493;
--candy-stripe-2: #FF69B4;
--candy-stripe-3: #FFB6C1;
--candy-stripe-4: #FFF0F5;
--candy-stripe-5: #FF0000;
}Tailwind v4
@theme {
--color-candy-stripe-1: #FF1493;
--color-candy-stripe-2: #FF69B4;
--color-candy-stripe-3: #FFB6C1;
--color-candy-stripe-4: #FFF0F5;
--color-candy-stripe-5: #FF0000;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'candy-stripe': {
100: '#FF1493',
200: '#FF69B4',
300: '#FFB6C1',
400: '#FFF0F5',
500: '#FF0000',
},SCSS
$candy-stripe-1: #FF1493;
$candy-stripe-2: #FF69B4;
$candy-stripe-3: #FFB6C1;
$candy-stripe-4: #FFF0F5;
$candy-stripe-5: #FF0000;JSON
["#FF1493","#FF69B4","#FFB6C1","#FFF0F5","#FF0000"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.