Matcha and muted sage can give an interface a botanical visual direction. Their popularity in lifestyle or wellness imagery does not show that software teams have adopted them broadly, and a green palette alone does not reduce fatigue or produce a calming effect. The practical question is where each exact value works in a usable interface.
The original HEX tokens below are screen-design choices, not paint or textile specifications. For more seasonal inspiration, browse the Fall Color Palette; this guide focuses on product UI roles and contrast.
Give the botanical tones distinct roles
- Deep matcha for structure: #284221 can carry headings, text and actions on the tested light surfaces.
- Herbal sage for accents: #9BB88D can add a softer color note, but is too faint to use as text on white.
- Warm near-white canvas: #F6F7F2 supports the botanical direction without asking the green accent to do every job.
A five-color matcha and sage UI palette
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-brand-primary | Deep Matcha Slate | #284221 | 40, 66, 33 | 107°, 33%, 19% | Light-theme text and primary actions |
| --color-accent-highlight | Herbal Sage | #9BB88D | 155, 184, 141 | 100°, 23%, 64% | Decorative light accents; text on tested dark surfaces |
| --color-surface-light | Rice Paper Canvas | #F6F7F2 | 246, 247, 242 | 72°, 24%, 96% | Light canvas and cards |
| --color-border-subtle | Muted Reed | #D9DEC9 | 217, 222, 201 | 74°, 24%, 83% | Decorative dividers; verify essential controls |
| --color-surface-dark | Forest Obsidian | #0F1710 | 15, 23, 16 | 128°, 21%, 7% | Dark canvas |
If you have a product image or visual reference, analyze its actual colors before adopting these tokens.
The light-sage contrast trap
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #284221 / #FFFFFF | 11.10:1 | AAA | AAA | Exceeds 3:1 where required |
| #284221 / #F6F7F2 | 10.31:1 | AAA | AAA | Exceeds 3:1 where required |
| #284221 / #9BB88D | 5.09:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #9BB88D / #0F1710 | 8.38:1 | AAA | AAA | Exceeds 3:1 where required |
| #9BB88D / #FFFFFF | 2.18:1 | Below AA | Below AA | Below 3:1 if essential |
For text, WCAG AA requires 4.5:1 at normal size and 3:1 at large size; AAA requires 7:1 and 4.5:1 respectively. Non-text contrast uses 3:1 for visual information needed to identify active controls and states against adjacent colors. A passing button label does not by itself verify the button boundary, focus indicator or entire interface.
Do not use #9BB88D as normal text on a white card. Use #284221 for the tested light-theme text role, or #9BB88D as text on the tested #0F1710 dark canvas. A light decorative border may also fail as an essential input boundary; test the actual adjacent colors in the Contrast Checker. Keep status and navigation cues understandable without color alone.
Adapt the roles in dark mode
Start with #F6F7F2 and deep matcha text in light mode. When moving to a #0F1710 dark canvas, switch important green text and links to the tested #9BB88D token instead of reusing deep matcha. Check each interactive state and its focus indication separately.
CSS custom properties to start from
--color-canvas: #F6F7F2;and--color-text-main: #0F1710;for the light foundation.--color-brand-primary: #284221;for the tested deep-green light-theme role.--color-dark-canvas: #0F1710;and--color-dark-accent: #9BB88D;for dark-theme starting points.
Frequently asked questions
How can matcha and sage colors work in a wellness interface?
They can provide a botanical visual direction when given clear roles. The colors alone do not establish a calming or therapeutic effect; readable text, clear controls and the wider experience matter.
Can light sage be used as text on white?
Not at the tested value: #9BB88D against white measures only 2.18:1. Use a darker text token such as #284221, which measures 11.10:1 on white.
Does the matcha and sage palette meet WCAG AAA?
Specific pairs do: #284221 on white measures 11.10:1, and #9BB88D on #0F1710 measures 8.38:1. A passing pair does not make an entire interface AAA-compliant; test each text, control and state.
Where can I inspect these color codes?
Use the ColorIndicator HEX to RGB Converter for RGB and HSL values, then use the Contrast Checker for the foreground and background you intend to place together.
Use the HEX to RGB Converter for RGB and HSL, then test your chosen combination in the Contrast Checker.