#3C096C
#7B2CBF
#C77DFF
#E0AAFF
#381F94Indigo
#6A2AB1Grape
#AA6ED8Amethyst
#F3E5F5Lavender
Grape & Indigo Vibe is a analogous color palette tagged gradient, vibrant, cold. Analogous neighbors on the wheel (Indigo, Grape, Amethyst) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Indigo | #381F94 | rgb(56, 31, 148) | hsl(253, 65%, 35%) | oklch(36.0% 0.176 283) | |
| Grape | #6A2AB1 | rgb(106, 42, 177) | hsl(268, 62%, 43%) | oklch(45.3% 0.198 300) | |
| Amethyst | #AA6ED8 | rgb(170, 110, 216) | hsl(274, 58%, 64%) | oklch(64.5% 0.163 309) | |
| Lavender | #F3E5F5 | rgb(243, 229, 245) | hsl(292, 44%, 93%) | oklch(93.8% 0.026 322) |
Why it works and how to use it
It works because the lightness range is wide (35% to 93%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Lavender (#F3E5F5) is the lightest color, so it belongs on large surfaces.
- Text: Indigo (#381F94) on #F3E5F5 gives 9.68:1, passing WCAG AAA.
- Primary: Grape (#6A2AB1) is the most saturated mid-tone; use it for buttons and links (6.72:1 against the background, fine for UI elements).
- Accent: Amethyst (#AA6ED8) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Indigo on Lavender at 9.68:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Grape & Indigo Vibe
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#381F94
#6A2AB1
#AA6ED8
#F3E5F5
Color-blind check: under protanopia, Indigo and Grape become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#381F94 on #F3E5F5 | Aa | 9.68:1 | AAA |
#6A2AB1 on #F3E5F5 | Aa | 6.72:1 | AA |
#381F94 on #AA6ED8 | Aa | 3.31:1 | AA large only |
#AA6ED8 on #F3E5F5 | Aa | 2.92:1 | Fail |
#6A2AB1 on #AA6ED8 | Aa | 2.3:1 | Fail |
#381F94 on #6A2AB1 | Aa | 1.44:1 | Fail |
Similar palettes 24 more in this mood
#A630C1
#755EF5
#7ABCFF
#80E6FF
#5F31A6
#8F37B7
#DA86E8
#FEF8FF
#6F3EAB
#9C38A1
#8B98FF
#7FBCFF
#2FA4FF
#956FF2
#526CFC
#912BAE
#3F71CC
#AE47D1
#B0A5FF
#40C1FF
#386AD0
#6E73E3
#B49DFF
#DEB4FF
#95489F
#3F9CEF
#C1A3FF
#B6C5FF
#004558
#00588E
#5550EB
#A95CFF
#502981
#7C46D4
#A48AFF
#E4E4FF
#480061
#8E1FAC
#DC75EA
#EFA5EF
#222897
#5733BB
#9875E4
#F3E5F5
#CDB3FF
#BD84FF
#7F32B0
#440F5B
#5B3DF5
#8E6BFF
#FF8FB1
#FFD1DC
#2D1374
#6438CD
#AC8DFF
#CCB4FF
#542A89
#984EE0
#D7A6FF
#EBC9FF
#4A148C
#7B1FA2
#BA68C8
#F3E5F5
#9FA9FF
#C8AEFF
#F0BFEF
#FFE3EE
#3A0CA3
#7209B7
#B5179E
#F72585
#981A69
#AD1F03
#FF6A89
#FC83FF
#7C4EB5
#EC483E
#FF85B0
#F590EC
#635DEA
#CE74AD
#4DACFF
#DAA2FF
#005EA2
#8049CD
#5B6AC0
#F7B2FF
#ADC0FF
#62AEEE
#AF85FF
#BA71C1