Sage Green and Terracotta
Why they work: a Mediterranean courtyard — muted green and baked clay.
Combination sets
The classic split
Sage Green and Terracotta with a light tint of sage green, a deep shade of terracotta and white for breathing room.
Dark mode
Both anchors survive on dark: Terracotta as the highlight, Sage Green 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%, sage green ~30% for structure, terracotta ~10% for calls to action.
Gradient bridge
The direct perceptual path from sage green to terracotta — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #9CAF88 | #C96F4A | 1.52:1 | ✗ | ✗ |
| #C96F4A | #9CAF88 | 1.52:1 | ✗ | ✗ |
| #9CAF88 | #FFFFFF | 2.36:1 | ✗ | ✗ |
| #9CAF88 | #000000 | 8.90:1 | ✓ | ✓ |
| #C96F4A | #FFFFFF | 3.59:1 | ✗ | ✗ |
| #C96F4A | #000000 | 5.86:1 | ✓ | ✗ |
| #16161D | #B39553 | 6.29:1 | ✓ | ✗ |
Related combinations
FAQ
Do sage green and terracotta go together?
Yes — a Mediterranean courtyard — muted green and baked clay. Their hues are 72° apart on the color wheel and the direct pair contrast is 1.52:1. The sets on this page show exactly how to balance them (both warm).
What text color works on sage green and terracotta?
On sage green use #000000 text (8.9:1); on terracotta use #000000 (5.86:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Sage Green: #9CAF88 — OKLCH oklch(72.88% 0.059 128.9). Terracotta: #C96F4A — OKLCH oklch(63.6% 0.125 42.5).