Green and Brown
Why they work: the oldest natural pairing — foliage and bark.
Combination sets
The classic split
Green and Brown with a light tint of green, a deep shade of brown and white for breathing room.
Dark mode
Both anchors survive on dark: Brown as the highlight, 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%, green ~30% for structure, brown ~10% for calls to action.
Gradient bridge
The direct perceptual path from green to brown — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #008000 | #A52A2A | 1.38:1 | ✗ | ✗ |
| #A52A2A | #008000 | 1.38:1 | ✗ | ✗ |
| #008000 | #FFFFFF | 5.14:1 | ✓ | ✗ |
| #008000 | #000000 | 4.09:1 | ✗ | ✗ |
| #A52A2A | #FFFFFF | 7.08:1 | ✓ | ✓ |
| #A52A2A | #000000 | 2.96:1 | ✗ | ✗ |
| #16161D | #7F5D00 | 2.97:1 | ✗ | ✗ |
Related combinations
FAQ
Do green and brown go together?
Yes — the oldest natural pairing — foliage and bark. Their hues are 120° apart on the color wheel and the direct pair contrast is 1.38:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on green and brown?
On green use #FFFFFF text (5.14:1); on brown use #FFFFFF (7.08:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Green: #008000 — OKLCH oklch(51.98% 0.177 142.5). Brown: #A52A2A — OKLCH oklch(48.06% 0.16 25.6).