The Matcha Latte palette pairs 5 colors selected for visual balance and dependable contrast in real interfaces. It works well as a starting point for branding, marketing pages, dashboards and illustration. The dominant character comes from its Nature and Muted tagging, which influences mood, perceived temperature, and how aggressively the palette draws the eye.
Use the lighter colors as page backgrounds and surface tints, the mid-tones for borders and secondary actions, and the darkest swatch for body text or your primary brand mark. Run every text-on-surface pair through the contrast checker before shipping - WCAG 2.1 AA needs 4.5:1 for body text and 3:1 for large text. To shape variants without picking new colors, mix any two values with CSS color-mix(in oklch, ...) at runtime; for richer scales, drop the brand color into the design system tool to get a 12-step OKLCH ramp ready to paste into your stylesheet.
:root {
--c1: #dad7cd;
--c2: #a3b18a;
--c3: #588157;
--c4: #3a5a40;
--c5: #344e41;
}module.exports = {
theme: {
extend: {
colors: {
c1: '#dad7cd',
c2: '#a3b18a',
c3: '#588157',
c4: '#3a5a40',
c5: '#344e41',
},
},
},
};{
"name": "Matcha Latte",
"colors": [
"#dad7cd",
"#a3b18a",
"#588157",
"#3a5a40",
"#344e41"
],
"tags": [
"nature",
"muted",
"earthy"
]
}The Matcha Latte palette uses 5 colors: #dad7cd, #a3b18a, #588157, #3a5a40, #344e41.
It is tagged nature, muted, earthy, which makes it well-suited for projects matching those moods - typically branding, hero sections, illustration backgrounds and gradient work.
Yes. The palette page includes one-click copy for CSS custom properties, a Tailwind config snippet, and JSON for design-token pipelines (Style Dictionary, W3C DTCG).
Run any pair of colors through the contrast checker to see WCAG and APCA scores. Most curated palettes include at least one high-contrast text/surface pair.