Lavender and Gray
Why they work: quiet sophistication — lavender muted by honest gray.
Combination sets
The classic split
Lavender and Gray with a light tint of lavender, a deep shade of gray and white for breathing room.
Dark mode
Both anchors survive on dark: Gray as the highlight, Lavender 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%, lavender ~30% for structure, gray ~10% for calls to action.
Gradient bridge
The direct perceptual path from lavender to gray — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #B39DDB | #808080 | 1.65:1 | ✗ | ✗ |
| #808080 | #B39DDB | 1.65:1 | ✗ | ✗ |
| #B39DDB | #FFFFFF | 2.40:1 | ✗ | ✗ |
| #B39DDB | #000000 | 8.76:1 | ✓ | ✓ |
| #808080 | #FFFFFF | 3.95:1 | ✗ | ✗ |
| #808080 | #000000 | 5.32:1 | ✓ | ✗ |
| #16161D | #A68BA2 | 5.86:1 | ✓ | ✗ |
Related combinations
FAQ
Do lavender and gray go together?
Yes — quiet sophistication — lavender muted by honest gray. Their hues are 99° apart on the color wheel and the direct pair contrast is 1.65:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on lavender and gray?
On lavender use #000000 text (8.76:1); on gray use #000000 (5.32:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Lavender: #B39DDB — OKLCH oklch(73.74% 0.091 300.5). Gray: #808080 — OKLCH oklch(59.99% 0 0).