Matcha Latte color palette
Cream #F5F0E8 is the milk, and four greens from soft pistachio to a deep olive, #4A7020, are the tea. The greens lean yellow, closer to a fresh leaf than to a cool emerald. It feels gentle and a bit earthy, and the cream base keeps the page from turning too green. A tea house menu or a yoga studio's class schedule would sit nicely in it.
Matcha Latte palette in use
#F5F0E8 is the background and #4A7020 the text color. #78A83D works as the button color, with #D4E8C2 for cards and #A8C97F for icons and tags.
This pair measures 5.10:1, so it works for body text too. The button uses #78A83D with black text.
ButtonGood for
- Tea house menu
- Plant-based cafe website
- Yoga studio branding
- Health food packaging
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#4A7020 | #F5F0E8 | 5.10:1 | AA |
#4A7020 | #D4E8C2 | 4.44:1 | AA large |
#4A7020 | #A8C97F | 3.12:1 | AA large |
Matcha Latte palette as code
CSS variables
:root {
--matcha-latte-1: #F5F0E8;
--matcha-latte-2: #D4E8C2;
--matcha-latte-3: #A8C97F;
--matcha-latte-4: #78A83D;
--matcha-latte-5: #4A7020;
}Tailwind v4
@theme {
--color-matcha-latte-1: #F5F0E8;
--color-matcha-latte-2: #D4E8C2;
--color-matcha-latte-3: #A8C97F;
--color-matcha-latte-4: #78A83D;
--color-matcha-latte-5: #4A7020;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'matcha-latte': {
100: '#F5F0E8',
200: '#D4E8C2',
300: '#A8C97F',
400: '#78A83D',
500: '#4A7020',
},SCSS
$matcha-latte-1: #F5F0E8;
$matcha-latte-2: #D4E8C2;
$matcha-latte-3: #A8C97F;
$matcha-latte-4: #78A83D;
$matcha-latte-5: #4A7020;JSON
["#F5F0E8","#D4E8C2","#A8C97F","#78A83D","#4A7020"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.