#F7F7EC
#D6E4B8
#A9C48A
#3F5233
#40513BGraphite
#609966Basil
#9DC08BPistachio
#EDF1D6Beige
Matcha Latte is a 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.
Color codes click any value to copy
| Swatch | 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
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 SecondaryCard title
Card title
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.
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 24 more in this mood
#2F5D3A
#5E8F5E
#A9C99A
#EEF4E8
#AECC9F
#E2F9B8
#F4EEDF
#DE9390
#213C04
#356344
#1C8888
#6F9C8F
#647B40
#2D6A65
#025934
#3E3300
#2D6A4F
#40916C
#B7E4C7
#FFFDF7
#82AC82
#6F7A56
#006D51
#003F3C
#3F5A36
#7A9B5C
#C9D8A8
#F9F8F1
#56724D
#96B878
#E4F3C2
#FBFAF3
#506B57
#7AAA84
#B9F1BC
#E3F4E6
#467450
#79AB79
#C7E8B8
#F7FDF1
#667A56
#A2B389
#DAC799
#9D697A
#525F34
#869656
#BECC85
#FCFBEF
#3E4A1F
#6B7A3A
#A3B06A
#F3F2E6
#F4A259
#F4E285
#8CB369
#5B8E7D
#554910
#A76704
#A5BC85
#FFC5B2
#6A994E
#A7C957
#F2E8CF
#BC4749
#005313
#186F08
#4F8F45
#8FCD85
#8AA944
#00967D
#007D82
#285A34
#727B00
#D2A682
#87D07C
#F9CF62
#684200
#688928
#1FA15B
#D6C03B
#00480D
#005748
#007E8C
#5A96BD
#78A89A
#55849E
#005756
#003741
#293515
#447F4A
#209E77
#ACAB82