What are the hex codes in the Matcha Latte palette?

The Matcha Latte color palette consists of Graphite #40513B, Basil #609966, Pistachio #9DC08B, Beige #EDF1D6.

How should I use the Matcha Latte palette on a website?

Use Beige #EDF1D6 as the background, Graphite #40513B for text, Pistachio #9DC08B for buttons and links, and Basil #609966 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Graphite on Beige at 7.39:1.

Which colors in Matcha Latte have enough contrast for text?

The highest-contrast pair is #40513B on #EDF1D6 with a ratio of 7.39:1, which passes WCAG AA for normal text.

#40513BGraphite

#609966Basil

#9DC08BPistachio

#EDF1D6Beige

Matcha Latte color palette

Nature Muted Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Graphite	`#40513B`	`rgb(64, 81, 59)`	`hsl(106, 16%, 27%)`	`oklch(41.4% 0.042 139)`
Basil	`#609966`	`rgb(96, 153, 102)`	`hsl(126, 23%, 49%)`	`oklch(63.0% 0.097 147)`
Pistachio	`#9DC08B`	`rgb(157, 192, 139)`	`hsl(100, 30%, 65%)`	`oklch(76.8% 0.082 135)`
Beige	`#EDF1D6`	`rgb(237, 241, 214)`	`hsl(69, 49%, 89%)`	`oklch(94.8% 0.036 114)`

Why it works and how to use it

Matcha Latte is an analogous color palette tagged nature, muted, green. Analogous neighbors on the wheel (Basil, Pistachio, Beige) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print.

The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (89% down to 27% lightness). A natural fit for wellness, organic and outdoor brands.

Background: Beige (#EDF1D6) is the lightest color, so it belongs on large surfaces.
Text: Graphite (#40513B) on #EDF1D6 gives 7.39:1, passing WCAG AAA.
Primary: Pistachio (#9DC08B) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Basil (#609966) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Graphite on Beige at 7.39:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Matcha Latte

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#40513B

#609966

#9DC08B

#EDF1D6

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#40513B` on `#EDF1D6`	Aa	7.39:1	AAA
`#40513B` on `#9DC08B`	Aa	4.21:1	AA large only
`#609966` on `#EDF1D6`	Aa	2.91:1	Fail
`#40513B` on `#609966`	Aa	2.54:1	Fail
`#9DC08B` on `#EDF1D6`	Aa	1.75:1	Fail
`#609966` on `#9DC08B`	Aa	1.66:1	Fail

Similar palettes 30 more in this mood