Lavender and Sage Green
Why they work: a botanical pairing: soft purple and muted green from the same garden.
Combination sets
The classic split
Lavender and Sage Green with a light tint of lavender, a deep shade of sage green and white for breathing room.
Dark mode
Both anchors survive on dark: Sage Green 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, sage green ~10% for calls to action.
Gradient bridge
The direct perceptual path from lavender to sage green — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #B39DDB | #9CAF88 | 1.02:1 | ✗ | ✗ |
| #9CAF88 | #B39DDB | 1.02:1 | ✗ | ✗ |
| #B39DDB | #FFFFFF | 2.40:1 | ✗ | ✗ |
| #B39DDB | #000000 | 8.76:1 | ✓ | ✓ |
| #9CAF88 | #FFFFFF | 2.36:1 | ✗ | ✗ |
| #9CAF88 | #000000 | 8.90:1 | ✓ | ✓ |
| #16161D | #6FB5C6 | 7.80:1 | ✓ | ✓ |
Related combinations
FAQ
Do lavender and sage green go together?
Yes — a botanical pairing: soft purple and muted green from the same garden. Their hues are 172° apart on the color wheel and the direct pair contrast is 1.02:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on lavender and sage green?
On lavender use #000000 text (8.76:1); on sage green use #000000 (8.9:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Lavender: #B39DDB — OKLCH oklch(73.74% 0.091 300.5). Sage Green: #9CAF88 — OKLCH oklch(72.88% 0.059 128.9).