Dusty Pink and Gray
Why they work: softness plus discipline — dusty pink stays gentle when gray carries the structure.
Combination sets
The classic split
Dusty Pink and Gray with a light tint of dusty pink, a deep shade of gray and white for breathing room.
Dark mode
Both anchors survive on dark: Gray as the highlight, Dusty Pink 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%, dusty pink ~30% for structure, gray ~10% for calls to action.
Gradient bridge
The direct perceptual path from dusty pink to gray — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #D8A7B1 | #808080 | 1.90:1 | ✗ | ✗ |
| #808080 | #D8A7B1 | 1.90:1 | ✗ | ✗ |
| #D8A7B1 | #FFFFFF | 2.08:1 | ✗ | ✗ |
| #D8A7B1 | #000000 | 10.08:1 | ✓ | ✓ |
| #808080 | #FFFFFF | 3.95:1 | ✗ | ✗ |
| #808080 | #000000 | 5.32:1 | ✓ | ✗ |
| #16161D | #AB9499 | 6.37:1 | ✓ | ✗ |
Related combinations
FAQ
Do dusty pink and gray go together?
Yes — softness plus discipline — dusty pink stays gentle when gray carries the structure. Their hues are 12° apart on the color wheel and the direct pair contrast is 1.9:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on dusty pink and gray?
On dusty pink use #000000 text (10.08:1); on gray use #000000 (5.32:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Dusty Pink: #D8A7B1 — OKLCH oklch(77.61% 0.059 4.9). Gray: #808080 — OKLCH oklch(59.99% 0 0).