Berry Smoothie color palette
Blended fruit in a glass: blackberry #4A0030 at the bottom, then plum, raspberry and two pinks that lighten as they rise to #FFB8D0. The hue stays in the magenta range the whole way. It's rich at the dark end and playful at the light end, so it can lean bold or sweet depending on which colors you lead with. A juice bar could build its whole menu board from these five.
Berry Smoothie palette in use
Use #FFB8D0 for light backgrounds and badges with #4A0030 text on top. #C2447A makes a strong button, and #8B1A5C suits headers, footers and hover states.
This pair measures 9.76:1, so it works for body text too. The button uses #C2447A with white text.
ButtonGood for
- Juice bar menu
- Frozen yogurt branding
- Dessert delivery app
- Lip color packaging
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 |
|---|---|---|---|
#4A0030 | #FFB8D0 | 9.76:1 | AAA |
#4A0030 | #E87FA8 | 6.02:1 | AA |
#8B1A5C | #FFB8D0 | 5.42:1 | AA |
#8B1A5C | #E87FA8 | 3.34:1 | AA large |
#4A0030 | #C2447A | 3.30:1 | AA large |
Berry Smoothie palette as code
CSS variables
:root {
--berry-smoothie-1: #4A0030;
--berry-smoothie-2: #8B1A5C;
--berry-smoothie-3: #C2447A;
--berry-smoothie-4: #E87FA8;
--berry-smoothie-5: #FFB8D0;
}Tailwind v4
@theme {
--color-berry-smoothie-1: #4A0030;
--color-berry-smoothie-2: #8B1A5C;
--color-berry-smoothie-3: #C2447A;
--color-berry-smoothie-4: #E87FA8;
--color-berry-smoothie-5: #FFB8D0;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'berry-smoothie': {
100: '#4A0030',
200: '#8B1A5C',
300: '#C2447A',
400: '#E87FA8',
500: '#FFB8D0',
},SCSS
$berry-smoothie-1: #4A0030;
$berry-smoothie-2: #8B1A5C;
$berry-smoothie-3: #C2447A;
$berry-smoothie-4: #E87FA8;
$berry-smoothie-5: #FFB8D0;JSON
["#4A0030","#8B1A5C","#C2447A","#E87FA8","#FFB8D0"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.