Purple and Pink
Why they work: analogous energy — two adjacent loud hues that share a modern mood.
Combination sets
The classic split
Purple and Pink with a light tint of purple, a deep shade of pink and white for breathing room.
Dark mode
Both anchors survive on dark: Pink as the highlight, Purple as the accent, and two intermediate surfaces for elevation.
Soft & light
Both anchors reduced to tints for airy sections, with the full-strength colors kept for buttons and links.
60 / 30 / 10 UI set
A practical interface split: neutral ~60%, purple ~30% for structure, pink ~10% for calls to action.
Gradient bridge
The direct perceptual path from purple to pink — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #800080 | #FFC0CB | 6.12:1 | ✓ | ✗ |
| #FFC0CB | #800080 | 6.12:1 | ✓ | ✗ |
| #800080 | #FFFFFF | 9.42:1 | ✓ | ✓ |
| #800080 | #000000 | 2.23:1 | ✗ | ✗ |
| #FFC0CB | #FFFFFF | 1.54:1 | ✗ | ✗ |
| #FFC0CB | #000000 | 13.65:1 | ✓ | ✓ |
| #16161D | #C7699C | 5.08:1 | ✓ | ✗ |
Related combinations
FAQ
Do purple and pink go together?
Yes — analogous energy — two adjacent loud hues that share a modern mood. Their hues are 50° apart on the color wheel and the direct pair contrast is 6.12:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on purple and pink?
On purple use #FFFFFF text (9.42:1); on pink use #000000 (13.65:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Purple: #800080 — OKLCH oklch(42.09% 0.193 328.4). Pink: #FFC0CB — OKLCH oklch(86.77% 0.074 7.1).