Matcha Latte Color Palette
A matcha latte in color: powdery yellow-green matcha over oat and latte cream, deepening to moss. Soft, earthy, and good-enough-to-drink, distinct from a cool sage by its warm, tea-like cast. For café and wellness branding, food illustration, and cozy green layouts.
Get Paintrix free on the App Store.
Download
Hex codes
Color theory
Base
Complement
Analogous −30°
Analogous +30°
Triadic
Use it for
Code formats
CSS
:root {
--matcha-latte-1: #F2EDDB;
--matcha-latte-2: #E9E1C6;
--matcha-latte-3: #DDD3AE;
--matcha-latte-4: #CFC295;
--matcha-latte-5: #BFAF7C;
--matcha-latte-6: #AD9C66;
--matcha-latte-7: #A8B96A;
--matcha-latte-8: #9AAC5C;
--matcha-latte-9: #8B9E4F;
--matcha-latte-10: #7C9043;
--matcha-latte-11: #6D8238;
--matcha-latte-12: #5E742E;
--matcha-latte-13: #556A2A;
--matcha-latte-14: #4B6025;
--matcha-latte-15: #415620;
--matcha-latte-16: #384C1B;
--matcha-latte-17: #2F4216;
--matcha-latte-18: #263812;
--matcha-latte-19: #C8B49A;
--matcha-latte-20: #B8A286;
--matcha-latte-21: #A89074;
--matcha-latte-22: #977E63;
--matcha-latte-23: #866D53;
--matcha-latte-24: #755C44;
--matcha-latte-25: #DDE0C6;
--matcha-latte-26: #CCD1B0;
--matcha-latte-27: #BBC29A;
--matcha-latte-28: #A9B284;
--matcha-latte-29: #97A26F;
--matcha-latte-30: #85925B;
}SCSS
$matcha-latte-1: #F2EDDB;
$matcha-latte-2: #E9E1C6;
$matcha-latte-3: #DDD3AE;
$matcha-latte-4: #CFC295;
$matcha-latte-5: #BFAF7C;
$matcha-latte-6: #AD9C66;
$matcha-latte-7: #A8B96A;
$matcha-latte-8: #9AAC5C;
$matcha-latte-9: #8B9E4F;
$matcha-latte-10: #7C9043;
$matcha-latte-11: #6D8238;
$matcha-latte-12: #5E742E;
$matcha-latte-13: #556A2A;
$matcha-latte-14: #4B6025;
$matcha-latte-15: #415620;
$matcha-latte-16: #384C1B;
$matcha-latte-17: #2F4216;
$matcha-latte-18: #263812;
$matcha-latte-19: #C8B49A;
$matcha-latte-20: #B8A286;
$matcha-latte-21: #A89074;
$matcha-latte-22: #977E63;
$matcha-latte-23: #866D53;
$matcha-latte-24: #755C44;
$matcha-latte-25: #DDE0C6;
$matcha-latte-26: #CCD1B0;
$matcha-latte-27: #BBC29A;
$matcha-latte-28: #A9B284;
$matcha-latte-29: #97A26F;
$matcha-latte-30: #85925B;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'matcha-latte': {
'1': '#F2EDDB',
'2': '#E9E1C6',
'3': '#DDD3AE',
'4': '#CFC295',
'5': '#BFAF7C',
'6': '#AD9C66',
'7': '#A8B96A',
'8': '#9AAC5C',
'9': '#8B9E4F',
'10': '#7C9043',
'11': '#6D8238',
'12': '#5E742E',
'13': '#556A2A',
'14': '#4B6025',
'15': '#415620',
'16': '#384C1B',
'17': '#2F4216',
'18': '#263812',
'19': '#C8B49A',
'20': '#B8A286',
'21': '#A89074',
'22': '#977E63',
'23': '#866D53',
'24': '#755C44',
'25': '#DDE0C6',
'26': '#CCD1B0',
'27': '#BBC29A',
'28': '#A9B284',
'29': '#97A26F',
'30': '#85925B',
},
},
},
},
};JSON
{
"name": "Matcha Latte",
"colors": [
"#F2EDDB",
"#E9E1C6",
"#DDD3AE",
"#CFC295",
"#BFAF7C",
"#AD9C66",
"#A8B96A",
"#9AAC5C",
"#8B9E4F",
"#7C9043",
"#6D8238",
"#5E742E",
"#556A2A",
"#4B6025",
"#415620",
"#384C1B",
"#2F4216",
"#263812",
"#C8B49A",
"#B8A286",
"#A89074",
"#977E63",
"#866D53",
"#755C44",
"#DDE0C6",
"#CCD1B0",
"#BBC29A",
"#A9B284",
"#97A26F",
"#85925B"
]
}Hex list
#F2EDDB
#E9E1C6
#DDD3AE
#CFC295
#BFAF7C
#AD9C66
#A8B96A
#9AAC5C
#8B9E4F
#7C9043
#6D8238
#5E742E
#556A2A
#4B6025
#415620
#384C1B
#2F4216
#263812
#C8B49A
#B8A286
#A89074
#977E63
#866D53
#755C44
#DDE0C6
#CCD1B0
#BBC29A
#A9B284
#97A26F
#85925B