Mocha Mousse Color Palette
A whole palette poured from mocha mousse — latte cream, caramel, espresso, grey-brown taupe, and warm cocoa. Soft, edible, and grounding, it's the cozy brown that anchored the recent color-of-the-year wave and still reads rich and modern. For warm minimalist branding, coffee and beauty packaging, and tonal 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 {
--mocha-mousse-1: #EDE2D2;
--mocha-mousse-2: #E1D2BC;
--mocha-mousse-3: #D3C1A6;
--mocha-mousse-4: #C3AE8E;
--mocha-mousse-5: #B29A78;
--mocha-mousse-6: #A08763;
--mocha-mousse-7: #B08A6A;
--mocha-mousse-8: #A37C5D;
--mocha-mousse-9: #966E50;
--mocha-mousse-10: #885F44;
--mocha-mousse-11: #79513A;
--mocha-mousse-12: #6A4430;
--mocha-mousse-13: #5E3D2C;
--mocha-mousse-14: #523428;
--mocha-mousse-15: #472D22;
--mocha-mousse-16: #3C261C;
--mocha-mousse-17: #321F17;
--mocha-mousse-18: #281912;
--mocha-mousse-19: #A99A8A;
--mocha-mousse-20: #998A7B;
--mocha-mousse-21: #897B6D;
--mocha-mousse-22: #796C5F;
--mocha-mousse-23: #695D52;
--mocha-mousse-24: #594E45;
--mocha-mousse-25: #7A5A48;
--mocha-mousse-26: #6C4F3F;
--mocha-mousse-27: #5E4436;
--mocha-mousse-28: #51392D;
--mocha-mousse-29: #442F25;
--mocha-mousse-30: #37251D;
}SCSS
$mocha-mousse-1: #EDE2D2;
$mocha-mousse-2: #E1D2BC;
$mocha-mousse-3: #D3C1A6;
$mocha-mousse-4: #C3AE8E;
$mocha-mousse-5: #B29A78;
$mocha-mousse-6: #A08763;
$mocha-mousse-7: #B08A6A;
$mocha-mousse-8: #A37C5D;
$mocha-mousse-9: #966E50;
$mocha-mousse-10: #885F44;
$mocha-mousse-11: #79513A;
$mocha-mousse-12: #6A4430;
$mocha-mousse-13: #5E3D2C;
$mocha-mousse-14: #523428;
$mocha-mousse-15: #472D22;
$mocha-mousse-16: #3C261C;
$mocha-mousse-17: #321F17;
$mocha-mousse-18: #281912;
$mocha-mousse-19: #A99A8A;
$mocha-mousse-20: #998A7B;
$mocha-mousse-21: #897B6D;
$mocha-mousse-22: #796C5F;
$mocha-mousse-23: #695D52;
$mocha-mousse-24: #594E45;
$mocha-mousse-25: #7A5A48;
$mocha-mousse-26: #6C4F3F;
$mocha-mousse-27: #5E4436;
$mocha-mousse-28: #51392D;
$mocha-mousse-29: #442F25;
$mocha-mousse-30: #37251D;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'mocha-mousse': {
'1': '#EDE2D2',
'2': '#E1D2BC',
'3': '#D3C1A6',
'4': '#C3AE8E',
'5': '#B29A78',
'6': '#A08763',
'7': '#B08A6A',
'8': '#A37C5D',
'9': '#966E50',
'10': '#885F44',
'11': '#79513A',
'12': '#6A4430',
'13': '#5E3D2C',
'14': '#523428',
'15': '#472D22',
'16': '#3C261C',
'17': '#321F17',
'18': '#281912',
'19': '#A99A8A',
'20': '#998A7B',
'21': '#897B6D',
'22': '#796C5F',
'23': '#695D52',
'24': '#594E45',
'25': '#7A5A48',
'26': '#6C4F3F',
'27': '#5E4436',
'28': '#51392D',
'29': '#442F25',
'30': '#37251D',
},
},
},
},
};JSON
{
"name": "Mocha Mousse",
"colors": [
"#EDE2D2",
"#E1D2BC",
"#D3C1A6",
"#C3AE8E",
"#B29A78",
"#A08763",
"#B08A6A",
"#A37C5D",
"#966E50",
"#885F44",
"#79513A",
"#6A4430",
"#5E3D2C",
"#523428",
"#472D22",
"#3C261C",
"#321F17",
"#281912",
"#A99A8A",
"#998A7B",
"#897B6D",
"#796C5F",
"#695D52",
"#594E45",
"#7A5A48",
"#6C4F3F",
"#5E4436",
"#51392D",
"#442F25",
"#37251D"
]
}Hex list
#EDE2D2
#E1D2BC
#D3C1A6
#C3AE8E
#B29A78
#A08763
#B08A6A
#A37C5D
#966E50
#885F44
#79513A
#6A4430
#5E3D2C
#523428
#472D22
#3C261C
#321F17
#281912
#A99A8A
#998A7B
#897B6D
#796C5F
#695D52
#594E45
#7A5A48
#6C4F3F
#5E4436
#51392D
#442F25
#37251D