#A630C1
#755EF5
#7ABCFF
#80E6FF
#7D3E7FPlum
#4551AASapphire
#006AB0Denim
#DBCAFFPeriwinkle
Sapphire & Denim Tale is a vivid split color palette tagged gradient, cold, purple. A split scheme: Plum plays against Periwinkle across roughly 94° 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 |
|---|---|---|---|---|---|
| Plum | #7D3E7F | rgb(125, 62, 127) | hsl(298, 34%, 37%) | oklch(46.9% 0.124 326) | |
| Sapphire | #4551AA | rgb(69, 81, 170) | hsl(233, 42%, 47%) | oklch(47.4% 0.142 274) | |
| Denim | #006AB0 | rgb(0, 106, 176) | hsl(204, 100%, 35%) | oklch(51.1% 0.137 248) | |
| Periwinkle | #DBCAFF | rgb(219, 202, 255) | hsl(259, 100%, 90%) | oklch(87.0% 0.074 300) |
Why it works and how to use it
With 4 chromatic colors, Denim takes the lead while the rest support. Lightness runs from 35% to 90%. Well suited to websites, presentations and branding.
- Background: Periwinkle (#DBCAFF) is the lightest color, so it belongs on large surfaces.
- Text: Plum (#7D3E7F) on #DBCAFF gives 4.85:1, passing WCAG AA.
- Primary: Denim (#006AB0) is the most saturated mid-tone; use it for buttons and links (3.77:1 against the background, fine for UI elements).
- Accent: Sapphire (#4551AA) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Plum on Periwinkle at 4.85:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Sapphire & Denim Tale
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
#7D3E7F
#4551AA
#006AB0
#DBCAFF
Color-blind check: under protanopia, Plum and Sapphire 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 |
|---|---|---|---|
#7D3E7F on #DBCAFF | Aa | 4.85:1 | AA |
#4551AA on #DBCAFF | Aa | 4.62:1 | AA |
#006AB0 on #DBCAFF | Aa | 3.77:1 | AA large only |
#7D3E7F on #006AB0 | Aa | 1.29:1 | Fail |
#4551AA on #006AB0 | Aa | 1.23:1 | Fail |
#7D3E7F on #4551AA | Aa | 1.05:1 | Fail |
Similar palettes 24 more in this mood
#005EA2
#8049CD
#5B6AC0
#F7B2FF
#ADC0FF
#62AEEE
#AF85FF
#BA71C1
#6F3EAB
#9C38A1
#8B98FF
#7FBCFF
#2FA4FF
#956FF2
#526CFC
#912BAE
#3F71CC
#AE47D1
#B0A5FF
#40C1FF
#386AD0
#6E73E3
#B49DFF
#DEB4FF
#95489F
#3F9CEF
#C1A3FF
#B6C5FF
#7767E2
#4C9AE4
#CCA7FC
#B5CAFF
#93D0FF
#849DFF
#A186CC
#853E7E
#BD5BD4
#8EC5FC
#E0C3FC
#FDFDFD
#03256C
#94437D
#4FA3E0
#D4E9F7
#004558
#00588E
#5550EB
#A95CFF
#222897
#5733BB
#9875E4
#F3E5F5
#1A68DE
#73A9DF
#CAAEE6
#E4E4E4
#3C096C
#7B2CBF
#C77DFF
#E0AAFF
#9FA9FF
#C8AEFF
#F0BFEF
#FFE3EE
#3A86FF
#8EC5FC
#E0C3FC
#FFFFFF
#023E8A
#0077B6
#00B4D8
#90E0EF
#D9ED92
#99D98C
#52B69A
#168AAD
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#5F31A6
#8F37B7
#DA86E8
#FEF8FF
#4348A9
#9C6DE5
#E565B2
#D789E2
#00736B
#20A8BE
#66B6E9
#ABC7FF