Palette
A sugary assortment of berry-inspired purples and pinks, as delightful as a summer treat.
Preview
Interface
A quick look at how Sweet Berry Delight reads on buttons, badges, and alerts before you commit.
Marketing banner
A bolder treatment that stretches the primary and secondary colors across a full gradient banner.
Data visualization
Palette guide
The Sweet Berry Delight palette offers a sugary assortment of berry-inspired purples and pinks, as delightful as a summer treat. This pastel collection features enchanting shades like `#9400D3` (dark violet), `#8A2BE2` (blue violet), `#DA70D6` (orchid), `#FFB6C1` (light pink), and `#FFC0CB` (pink). Designers and developers can leverage these soft yet expressive colors to create gentle, feminine, or playfully elegant interfaces and branding that exude warmth and charm.
primary
Use `#8A2BE2` or `#DA70D6` as a dominant, gentle purple for main sections or header elements.
secondary
Employ `#DA70D6` or `#9400D3` to provide a supporting depth or a complementary pastel tone.
accent
Apply `#FFB6C1` or `#FFC0CB` for delicate highlights, subtle calls to action, or decorative elements.
background
The lightest pinks, `#FFB6C1` or `#FFC0CB`, make excellent soft backgrounds, or pair with a very light cream.
text
For readability, use a dark charcoal or a deep purple like `#9400D3` on light backgrounds. White text can work on darker elements like `#9400D3`.
Ideal for a gentle background gradient, subtle UI transitions, or soft graphic elements.
#9400D3 · #DA70D6 · #FFC0CBPerfect for a cheerful call-to-action, children's product features, or playful illustrations.
#8A2BE2 · #FFB6C1 · #DA70D6Excellent for a sophisticated header with light content, or a clean, balanced layout.
#9400D3 · #FFC0CB · #DA70D6:root {
--sweet-berry-delight-1: #9400D3;
--sweet-berry-delight-2: #8A2BE2;
--sweet-berry-delight-3: #DA70D6;
--sweet-berry-delight-4: #FFB6C1;
--sweet-berry-delight-5: #FFC0CB;
}theme: {
extend: {
colors: {
"sweet-berry-delight": {
1: "#9400D3",
2: "#8A2BE2",
3: "#DA70D6",
4: "#FFB6C1",
5: "#FFC0CB",
}
}
}
}Palette colors
Accessibility
Similar palettes