#A630C1
#755EF5
#7ABCFF
#80E6FF
#6F3EABGrape
#9C38A1Plum
#8B98FFCornflower
#7FBCFFBaby Blue
Twilight Plum & Grape is a vivid split color palette tagged gradient, vibrant, cold. A split scheme: Grape plays against Baby Blue across roughly 86° 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 |
|---|---|---|---|---|---|
| Grape | #6F3EAB | rgb(111, 62, 171) | hsl(267, 47%, 46%) | oklch(47.9% 0.168 301) | |
| Plum | #9C38A1 | rgb(156, 56, 161) | hsl(297, 48%, 43%) | oklch(52.3% 0.183 326) | |
| Cornflower | #8B98FF | rgb(139, 152, 255) | hsl(233, 100%, 77%) | oklch(71.4% 0.150 276) | |
| Baby Blue | #7FBCFF | rgb(127, 188, 255) | hsl(211, 100%, 75%) | oklch(78.0% 0.115 252) |
Why it works and how to use it
With 4 chromatic colors, Cornflower takes the lead while the rest support. Lightness runs from 43% to 77%. Well suited to websites, presentations and branding.
- Background: Baby Blue (#7FBCFF) is the lightest color, so it belongs on large surfaces.
- Text: Grape (#6F3EAB) on #7FBCFF gives 3.57:1, enough for large headings only.
- Primary: Cornflower (#8B98FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Plum (#9C38A1) 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 Twilight Plum & Grape
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
#6F3EAB
#9C38A1
#8B98FF
#7FBCFF
Color-blind check: under protanopia and deuteranopia, Grape and Plum 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 |
|---|---|---|---|
#6F3EAB on #7FBCFF | Aa | 3.57:1 | AA large only |
#9C38A1 on #7FBCFF | Aa | 3.02:1 | AA large only |
#6F3EAB on #8B98FF | Aa | 2.72:1 | Fail |
#9C38A1 on #8B98FF | Aa | 2.3:1 | Fail |
#8B98FF on #7FBCFF | Aa | 1.31:1 | Fail |
#6F3EAB on #9C38A1 | Aa | 1.18:1 | Fail |
Similar palettes 24 more in this mood
#2FA4FF
#956FF2
#526CFC
#912BAE
#3F71CC
#AE47D1
#B0A5FF
#40C1FF
#386AD0
#6E73E3
#B49DFF
#DEB4FF
#95489F
#3F9CEF
#C1A3FF
#B6C5FF
#004558
#00588E
#5550EB
#A95CFF
#222897
#5733BB
#9875E4
#F3E5F5
#3C096C
#7B2CBF
#C77DFF
#E0AAFF
#005EA2
#8049CD
#5B6AC0
#F7B2FF
#ADC0FF
#62AEEE
#AF85FF
#BA71C1
#5F31A6
#8F37B7
#DA86E8
#FEF8FF
#4348A9
#9C6DE5
#E565B2
#D789E2
#7D3E7F
#4551AA
#006AB0
#DBCAFF
#8371EC
#6FA6F1
#DC7BFF
#FF73C6
#7767E2
#4C9AE4
#CCA7FC
#B5CAFF
#93D0FF
#849DFF
#A186CC
#853E7E
#BD5BD4
#8EC5FC
#E0C3FC
#FDFDFD
#03256C
#94437D
#4FA3E0
#D4E9F7
#502981
#7C46D4
#A48AFF
#E4E4FF
#46399E
#5F68D3
#8CAAFC
#E3F2FD
#480061
#8E1FAC
#DC75EA
#EFA5EF
#1049BB
#0068B2
#00A4F8
#D4E9F7
#CDB3FF
#BD84FF
#7F32B0
#440F5B
#5B3DF5
#8E6BFF
#FF8FB1
#FFD1DC