Grape Soda color palette
Five purples poured from the same can: a near-black grape #2D0057, royal #5A189A, a bright amethyst #9D4EDD and two candy lilacs, #C77DFF and #E0AAFF. Even the softest color at the light end has some fizz to it. The range is wide enough to work in light or dark layouts. Try it on a soda can label or a mobile game's menu screen.
Grape Soda palette in use
For dark mode, use #2D0057 as the background with #E0AAFF text and #C77DFF buttons. In light layouts, use #E0AAFF panels with #2D0057 text and #9D4EDD buttons.
This pair measures 9.09:1, so it works for body text too. The button uses #9D4EDD with white text.
ButtonGood for
- Soda can label
- Mobile game interface
- Party planning app
- Kids' birthday invite
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 |
|---|---|---|---|
#2D0057 | #E0AAFF | 9.09:1 | AAA |
#2D0057 | #C77DFF | 6.24:1 | AA |
#5A189A | #E0AAFF | 5.59:1 | AA |
#5A189A | #C77DFF | 3.84:1 | AA large |
#2D0057 | #9D4EDD | 3.65:1 | AA large |
Grape Soda palette as code
CSS variables
:root {
--grape-soda-1: #2D0057;
--grape-soda-2: #5A189A;
--grape-soda-3: #9D4EDD;
--grape-soda-4: #C77DFF;
--grape-soda-5: #E0AAFF;
}Tailwind v4
@theme {
--color-grape-soda-1: #2D0057;
--color-grape-soda-2: #5A189A;
--color-grape-soda-3: #9D4EDD;
--color-grape-soda-4: #C77DFF;
--color-grape-soda-5: #E0AAFF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'grape-soda': {
100: '#2D0057',
200: '#5A189A',
300: '#9D4EDD',
400: '#C77DFF',
500: '#E0AAFF',
},SCSS
$grape-soda-1: #2D0057;
$grape-soda-2: #5A189A;
$grape-soda-3: #9D4EDD;
$grape-soda-4: #C77DFF;
$grape-soda-5: #E0AAFF;JSON
["#2D0057","#5A189A","#9D4EDD","#C77DFF","#E0AAFF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.