#1A1B26
#4B5273
#7AA2F7
#BB9AF7
#B9C5FFPeriwinkle
#C8A2E8Wisteria
#B8E0C8Celadon
#3B2F4AGunmetal
Tangerine Wisteria & Periwinkle is a split color palette tagged cold, blue, purple. A split scheme: Periwinkle plays against Gunmetal across roughly 129° of hue. 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 |
|---|---|---|---|---|---|
| Periwinkle | #B9C5FF | rgb(185, 197, 255) | hsl(230, 100%, 86%) | oklch(83.4% 0.083 275) | |
| Wisteria | #C8A2E8 | rgb(200, 162, 232) | hsl(273, 60%, 77%) | oklch(77.1% 0.106 309) | |
| Celadon | #B8E0C8 | rgb(184, 224, 200) | hsl(144, 39%, 80%) | oklch(87.1% 0.053 159) | |
| Gunmetal | #3B2F4A | rgb(59, 47, 74) | hsl(267, 22%, 24%) | oklch(33.0% 0.049 304) |
Why it works and how to use it
The palette holds together thanks to its split hue relationship and a strong light-to-dark ladder (86% down to 24% lightness). A natural fit for websites, presentations and branding.
- Background: Celadon (#B8E0C8) is the lightest color, so it belongs on large surfaces.
- Text: Gunmetal (#3B2F4A) on #B8E0C8 gives 8.59:1, passing WCAG AAA.
- Primary: Periwinkle (#B9C5FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Wisteria (#C8A2E8) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Celadon on Gunmetal at 8.59:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Tangerine Wisteria & Periwinkle
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
#B9C5FF
#C8A2E8
#B8E0C8
#3B2F4A
Color-blind check: under deuteranopia and tritanopia, Periwinkle and Wisteria 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 |
|---|---|---|---|
#B8E0C8 on #3B2F4A | Aa | 8.59:1 | AAA |
#B9C5FF on #3B2F4A | Aa | 7.39:1 | AAA |
#C8A2E8 on #3B2F4A | Aa | 5.79:1 | AA |
#C8A2E8 on #B8E0C8 | Aa | 1.48:1 | Fail |
#B9C5FF on #C8A2E8 | Aa | 1.28:1 | Fail |
#B9C5FF on #B8E0C8 | Aa | 1.16:1 | Fail |
Similar palettes 24 more in this mood
#692390
#5E6891
#4194F1
#DBD6FF
#68709B
#9271DA
#639EC2
#84B8FF
#160216
#B384FF
#94AAFF
#9BD1FF
#A630C1
#755EF5
#7ABCFF
#80E6FF
#0085AA
#6B819E
#AE8DBC
#B4B0FF
#0ACAF9
#00C5C1
#005BAE
#4C37A8
#3D3B6B
#6D6CA6
#B9B8E3
#F2F1FB
#FEA2FF
#6CC9FF
#9E72F2
#5A85FF
#005EA2
#8049CD
#5B6AC0
#F7B2FF
#ADC0FF
#62AEEE
#AF85FF
#BA71C1
#121016
#54149C
#693B79
#5B9FFF
#96BAFE
#8F7CCD
#00939A
#005D7F
#6F3EAB
#9C38A1
#8B98FF
#7FBCFF
#2FA4FF
#956FF2
#526CFC
#912BAE
#BEB6FF
#5596F8
#0099C7
#774384
#7D3E7F
#4551AA
#006AB0
#DBCAFF
#7A91FF
#CBA6FF
#FF92EE
#87CBFF
#D8BFFF
#B37BF7
#7B31BA
#240042
#0C050C
#B296FF
#EE70FF
#99D6FF
#DBE1FF
#A1D0FC
#EAAFDB
#B9A0D5
#3F71CC
#AE47D1
#B0A5FF
#40C1FF
#386AD0
#6E73E3
#B49DFF
#DEB4FF
#2346A2
#005F8E
#7168AA
#00A9C8