#386AD0
#6E73E3
#B49DFF
#DEB4FF
#A630C1Neon Purple
#755EF5Slate Blue
#7ABCFFBaby Blue
#80E6FFElectric Blue
Gradient Neon Purple & Slate Blue is a vivid split color palette tagged gradient, modern, vibrant. A split scheme: Neon Purple plays against Electric Blue across roughly 97° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Neon Purple | #A630C1 | rgb(166, 48, 193) | hsl(289, 60%, 47%) | oklch(54.9% 0.224 319) | |
| Slate Blue | #755EF5 | rgb(117, 94, 245) | hsl(249, 88%, 66%) | oklch(58.9% 0.216 285) | |
| Baby Blue | #7ABCFF | rgb(122, 188, 255) | hsl(210, 100%, 74%) | oklch(77.8% 0.118 250) | |
| Electric Blue | #80E6FF | rgb(128, 230, 255) | hsl(192, 100%, 75%) | oklch(87.2% 0.101 216) |
Why it works and how to use it
It works because the lightness steps are gentle (47% to 75%), which keeps the mood consistent from edge to edge. Try it for websites, presentations and branding.
- Background: Electric Blue (#80E6FF) is the lightest color, so it belongs on large surfaces.
- Text: Neon Purple (#A630C1) on #80E6FF gives 3.85:1, enough for large headings only.
- Primary: Baby Blue (#7ABCFF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Slate Blue (#755EF5) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Gradient Neon Purple & Slate Blue
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
#A630C1
#755EF5
#7ABCFF
#80E6FF
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#A630C1 on #80E6FF | Aa | 3.85:1 | AA large only |
#755EF5 on #80E6FF | Aa | 3.14:1 | AA large only |
#A630C1 on #7ABCFF | Aa | 2.74:1 | Fail |
#755EF5 on #7ABCFF | Aa | 2.24:1 | Fail |
#7ABCFF on #80E6FF | Aa | 1.4:1 | Fail |
#A630C1 on #755EF5 | Aa | 1.23:1 | Fail |
Similar palettes 24 more in this mood
#00736B
#20A8BE
#66B6E9
#ABC7FF
#B6CCFF
#62B0FF
#00A0DD
#00657B
#93D0FF
#849DFF
#A186CC
#853E7E
#004558
#00588E
#5550EB
#A95CFF
#00818A
#009D8C
#31CA88
#ACE496
#6F3EAB
#9C38A1
#8B98FF
#7FBCFF
#2FA4FF
#956FF2
#526CFC
#912BAE
#498711
#00AA6D
#00C0AE
#00DDF3
#3F71CC
#AE47D1
#B0A5FF
#40C1FF
#95489F
#3F9CEF
#C1A3FF
#B6C5FF
#006DA4
#4E8DF9
#A3A9FF
#D5C1FF
#222897
#5733BB
#9875E4
#F3E5F5
#5B3DF5
#8E6BFF
#FF8FB1
#FFD1DC
#FFD0C8
#F47EAE
#B368C0
#6C53CF
#3C096C
#7B2CBF
#C77DFF
#E0AAFF
#3A0CA3
#7209B7
#B5179E
#F72585
#005EA2
#8049CD
#5B6AC0
#F7B2FF
#023E8A
#0077B6
#00B4D8
#90E0EF
#D9ED92
#99D98C
#52B69A
#168AAD
#ADC0FF
#62AEEE
#AF85FF
#BA71C1
#5F31A6
#8F37B7
#DA86E8
#FEF8FF
#4348A9
#9C6DE5
#E565B2
#D789E2
#7D3E7F
#4551AA
#006AB0
#DBCAFF