What are the hex codes in the Grape Soda palette?

The Grape Soda color palette consists of Indigo #4B0082, Violet #8A2BE2, Orchid #DA70D6, Petal #FFE4F3.

How should I use the Grape Soda palette on a website?

Use Petal #FFE4F3 as the background, Indigo #4B0082 for text, Violet #8A2BE2 for buttons and links, and Orchid #DA70D6 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Indigo on Petal at 10.88:1.

Which colors in Grape Soda have enough contrast for text?

The highest-contrast pair is #4B0082 on #FFE4F3 with a ratio of 10.88:1, which passes WCAG AA for normal text.

#4B0082Indigo

#8A2BE2Violet

#DA70D6Orchid

#FFE4F3Petal

Grape Soda color palette

Kids Vibrant Neon Cold Purple

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Indigo	`#4B0082`	`rgb(75, 0, 130)`	`hsl(275, 100%, 25%)`	`oklch(33.9% 0.179 302)`
Violet	`#8A2BE2`	`rgb(138, 43, 226)`	`hsl(271, 76%, 53%)`	`oklch(53.4% 0.250 301)`
Orchid	`#DA70D6`	`rgb(218, 112, 214)`	`hsl(302, 59%, 65%)`	`oklch(70.2% 0.181 329)`
Petal	`#FFE4F3`	`rgb(255, 228, 243)`	`hsl(327, 100%, 95%)`	`oklch(94.5% 0.035 343)`

Why it works and how to use it

Grape Soda is a vivid analogous color palette tagged kids, vibrant, neon. Analogous neighbors on the wheel (Indigo, Violet, Orchid) give it a natural, low-tension flow. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Violet takes the lead while the rest support. Lightness runs from 25% to 95%. Well suited to children's products and playful apps.

Background: Petal (#FFE4F3) is the lightest color, so it belongs on large surfaces.
Text: Indigo (#4B0082) on #FFE4F3 gives 10.88:1, passing WCAG AAA.
Primary: Violet (#8A2BE2) is the most saturated mid-tone; use it for buttons and links (5.01:1 against the background, fine for UI elements).
Accent: Orchid (#DA70D6) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Indigo on Petal at 10.88:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Grape Soda

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#4B0082

#8A2BE2

#DA70D6

#FFE4F3

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#4B0082` on `#FFE4F3`	Aa	10.88:1	AAA
`#8A2BE2` on `#FFE4F3`	Aa	5.01:1	AA
`#4B0082` on `#DA70D6`	Aa	4.48:1	AA large only
`#DA70D6` on `#FFE4F3`	Aa	2.43:1	Fail
`#4B0082` on `#8A2BE2`	Aa	2.17:1	Fail
`#8A2BE2` on `#DA70D6`	Aa	2.06:1	Fail

Similar palettes 24 more in this mood