← Back to Tools
Design warm, grounded 2025 branding with this mocha mousse palette featuring #A47864 mocha mousse, #D3BEB6 latte cream, #B89687 cocoa blush, #7C5849 deep mocha, and #523A32 dark espresso.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--mocha-mousse: #A47864;
--mocha-mousse-50: #fffcfa;
--mocha-mousse-100: #fdf7f4;
--mocha-mousse-200: #f8eee9;
--mocha-mousse-300: #f2e2da;
--mocha-mousse-400: #e8d2c6;
--mocha-mousse-500: #A47864;
--mocha-mousse-600: #b2998c;
--mocha-mousse-700: #7f6a5f;
--mocha-mousse-800: #4f3f37;
--mocha-mousse-900: #271d17;
--mocha-mousse-950: #070403;
--latte-cream: #D3BEB6;
--latte-cream-50: #fffefd;
--latte-cream-100: #fefcfb;
--latte-cream-200: #fcf8f6;
--latte-cream-300: #f9f3f0;
--latte-cream-400: #f4ece9;
--latte-cream-500: #D3BEB6;
--latte-cream-600: #c6bdb9;
--latte-cream-700: #8d8581;
--latte-cream-800: #57514e;
--latte-cream-900: #2a2625;
--latte-cream-950: #080706;
--cocoa-blush: #B89687;
--cocoa-blush-50: #fffcfb;
--cocoa-blush-100: #fdf9f7;
--cocoa-blush-200: #faf3ef;
--cocoa-blush-300: #f5eae5;
--cocoa-blush-400: #edded7;
--cocoa-blush-500: #B89687;
--cocoa-blush-600: #bba9a1;
--cocoa-blush-700: #85766f;
--cocoa-blush-800: #524742;
--cocoa-blush-900: #28211e;
--cocoa-blush-950: #070504;
--deep-mocha: #7C5849;
--deep-mocha-50: #fefbf9;
--deep-mocha-100: #faf4f2;
--deep-mocha-200: #f2e8e4;
--deep-mocha-300: #e8d8d1;
--deep-mocha-400: #d9c3b9;
--deep-mocha-500: #7C5849;
--deep-mocha-600: #9d8579;
--deep-mocha-700: #705c52;
--deep-mocha-800: #45362e;
--deep-mocha-900: #211712;
--deep-mocha-950: #050302;
--dark-espresso: #523A32;
--dark-espresso-50: #fcf9f8;
--dark-espresso-100: #f7f1ef;
--dark-espresso-200: #ebe2de;
--dark-espresso-300: #dbcdc8;
--dark-espresso-400: #c5b2ab;
--dark-espresso-500: #523A32;
--dark-espresso-600: #826d65;
--dark-espresso-700: #5c4b44;
--dark-espresso-800: #382b26;
--dark-espresso-900: #1a110e;
--dark-espresso-950: #030201;
}
$mocha-mousse: #A47864; $mocha-mousse-50: #fffcfa; $mocha-mousse-100: #fdf7f4; $mocha-mousse-200: #f8eee9; $mocha-mousse-300: #f2e2da; $mocha-mousse-400: #e8d2c6; $mocha-mousse-500: #A47864; $mocha-mousse-600: #b2998c; $mocha-mousse-700: #7f6a5f; $mocha-mousse-800: #4f3f37; $mocha-mousse-900: #271d17; $mocha-mousse-950: #070403; $latte-cream: #D3BEB6; $latte-cream-50: #fffefd; $latte-cream-100: #fefcfb; $latte-cream-200: #fcf8f6; $latte-cream-300: #f9f3f0; $latte-cream-400: #f4ece9; $latte-cream-500: #D3BEB6; $latte-cream-600: #c6bdb9; $latte-cream-700: #8d8581; $latte-cream-800: #57514e; $latte-cream-900: #2a2625; $latte-cream-950: #080706; $cocoa-blush: #B89687; $cocoa-blush-50: #fffcfb; $cocoa-blush-100: #fdf9f7; $cocoa-blush-200: #faf3ef; $cocoa-blush-300: #f5eae5; $cocoa-blush-400: #edded7; $cocoa-blush-500: #B89687; $cocoa-blush-600: #bba9a1; $cocoa-blush-700: #85766f; $cocoa-blush-800: #524742; $cocoa-blush-900: #28211e; $cocoa-blush-950: #070504; $deep-mocha: #7C5849; $deep-mocha-50: #fefbf9; $deep-mocha-100: #faf4f2; $deep-mocha-200: #f2e8e4; $deep-mocha-300: #e8d8d1; $deep-mocha-400: #d9c3b9; $deep-mocha-500: #7C5849; $deep-mocha-600: #9d8579; $deep-mocha-700: #705c52; $deep-mocha-800: #45362e; $deep-mocha-900: #211712; $deep-mocha-950: #050302; $dark-espresso: #523A32; $dark-espresso-50: #fcf9f8; $dark-espresso-100: #f7f1ef; $dark-espresso-200: #ebe2de; $dark-espresso-300: #dbcdc8; $dark-espresso-400: #c5b2ab; $dark-espresso-500: #523A32; $dark-espresso-600: #826d65; $dark-espresso-700: #5c4b44; $dark-espresso-800: #382b26; $dark-espresso-900: #1a110e; $dark-espresso-950: #030201;
colors: {
'mocha-mousse': {
50: '#fffcfa',
100: '#fdf7f4',
200: '#f8eee9',
300: '#f2e2da',
400: '#e8d2c6',
500: '#A47864',
600: '#b2998c',
700: '#7f6a5f',
800: '#4f3f37',
900: '#271d17',
950: '#070403',
DEFAULT: '#A47864',
},
'latte-cream': {
50: '#fffefd',
100: '#fefcfb',
200: '#fcf8f6',
300: '#f9f3f0',
400: '#f4ece9',
500: '#D3BEB6',
600: '#c6bdb9',
700: '#8d8581',
800: '#57514e',
900: '#2a2625',
950: '#080706',
DEFAULT: '#D3BEB6',
},
'cocoa-blush': {
50: '#fffcfb',
100: '#fdf9f7',
200: '#faf3ef',
300: '#f5eae5',
400: '#edded7',
500: '#B89687',
600: '#bba9a1',
700: '#85766f',
800: '#524742',
900: '#28211e',
950: '#070504',
DEFAULT: '#B89687',
},
'deep-mocha': {
50: '#fefbf9',
100: '#faf4f2',
200: '#f2e8e4',
300: '#e8d8d1',
400: '#d9c3b9',
500: '#7C5849',
600: '#9d8579',
700: '#705c52',
800: '#45362e',
900: '#211712',
950: '#050302',
DEFAULT: '#7C5849',
},
'dark-espresso': {
50: '#fcf9f8',
100: '#f7f1ef',
200: '#ebe2de',
300: '#dbcdc8',
400: '#c5b2ab',
500: '#523A32',
600: '#826d65',
700: '#5c4b44',
800: '#382b26',
900: '#1a110e',
950: '#030201',
DEFAULT: '#523A32',
},
},
[
{
"name": "mocha-mousse",
"harmony": "Palette",
"hex": "#A47864",
"rgb": {
"r": 164,
"g": 120,
"b": 100
},
"hsl": {
"h": 19,
"s": 26,
"l": 52
},
"value": "#A47864",
"tonalScale": {
"50": {
"hex": "#fffcfa",
"rgb": {
"r": 255,
"g": 252,
"b": 250
}
},
"100": {
"hex": "#fdf7f4",
"rgb": {
"r": 253,
"g": 247,
"b": 244
}
},
"200": {
"hex": "#f8eee9",
"rgb": {
"r": 248,
"g": 238,
"b": 233
}
},
"300": {
"hex": "#f2e2da",
"rgb": {
"r": 242,
"g": 226,
"b": 218
}
},
"400": {
"hex": "#e8d2c6",
"rgb": {
"r": 232,
"g": 210,
"b": 198
}
},
"500": {
"hex": "#A47864",
"rgb": {
"r": 164,
"g": 120,
"b": 100
}
},
"600": {
"hex": "#b2998c",
"rgb": {
"r": 178,
"g": 153,
"b": 140
}
},
"700": {
"hex": "#7f6a5f",
"rgb": {
"r": 127,
"g": 106,
"b": 95
}
},
"800": {
"hex": "#4f3f37",
"rgb": {
"r": 79,
"g": 63,
"b": 55
}
},
"900": {
"hex": "#271d17",
"rgb": {
"r": 39,
"g": 29,
"b": 23
}
},
"950": {
"hex": "#070403",
"rgb": {
"r": 7,
"g": 4,
"b": 3
}
}
}
},
{
"name": "latte-cream",
"harmony": "Palette",
"hex": "#D3BEB6",
"rgb": {
"r": 211,
"g": 190,
"b": 182
},
"hsl": {
"h": 17,
"s": 25,
"l": 77
},
"value": "#D3BEB6",
"tonalScale": {
"50": {
"hex": "#fffefd",
"rgb": {
"r": 255,
"g": 254,
"b": 253
}
},
"100": {
"hex": "#fefcfb",
"rgb": {
"r": 254,
"g": 252,
"b": 251
}
},
"200": {
"hex": "#fcf8f6",
"rgb": {
"r": 252,
"g": 248,
"b": 246
}
},
"300": {
"hex": "#f9f3f0",
"rgb": {
"r": 249,
"g": 243,
"b": 240
}
},
"400": {
"hex": "#f4ece9",
"rgb": {
"r": 244,
"g": 236,
"b": 233
}
},
"500": {
"hex": "#D3BEB6",
"rgb": {
"r": 211,
"g": 190,
"b": 182
}
},
"600": {
"hex": "#c6bdb9",
"rgb": {
"r": 198,
"g": 189,
"b": 185
}
},
"700": {
"hex": "#8d8581",
"rgb": {
"r": 141,
"g": 133,
"b": 129
}
},
"800": {
"hex": "#57514e",
"rgb": {
"r": 87,
"g": 81,
"b": 78
}
},
"900": {
"hex": "#2a2625",
"rgb": {
"r": 42,
"g": 38,
"b": 37
}
},
"950": {
"hex": "#080706",
"rgb": {
"r": 8,
"g": 7,
"b": 6
}
}
}
},
{
"name": "cocoa-blush",
"harmony": "Palette",
"hex": "#B89687",
"rgb": {
"r": 184,
"g": 150,
"b": 135
},
"hsl": {
"h": 18,
"s": 26,
"l": 63
},
"value": "#B89687",
"tonalScale": {
"50": {
"hex": "#fffcfb",
"rgb": {
"r": 255,
"g": 252,
"b": 251
}
},
"100": {
"hex": "#fdf9f7",
"rgb": {
"r": 253,
"g": 249,
"b": 247
}
},
"200": {
"hex": "#faf3ef",
"rgb": {
"r": 250,
"g": 243,
"b": 239
}
},
"300": {
"hex": "#f5eae5",
"rgb": {
"r": 245,
"g": 234,
"b": 229
}
},
"400": {
"hex": "#edded7",
"rgb": {
"r": 237,
"g": 222,
"b": 215
}
},
"500": {
"hex": "#B89687",
"rgb": {
"r": 184,
"g": 150,
"b": 135
}
},
"600": {
"hex": "#bba9a1",
"rgb": {
"r": 187,
"g": 169,
"b": 161
}
},
"700": {
"hex": "#85766f",
"rgb": {
"r": 133,
"g": 118,
"b": 111
}
},
"800": {
"hex": "#524742",
"rgb": {
"r": 82,
"g": 71,
"b": 66
}
},
"900": {
"hex": "#28211e",
"rgb": {
"r": 40,
"g": 33,
"b": 30
}
},
"950": {
"hex": "#070504",
"rgb": {
"r": 7,
"g": 5,
"b": 4
}
}
}
},
{
"name": "deep-mocha",
"harmony": "Palette",
"hex": "#7C5849",
"rgb": {
"r": 124,
"g": 88,
"b": 73
},
"hsl": {
"h": 18,
"s": 26,
"l": 39
},
"value": "#7C5849",
"tonalScale": {
"50": {
"hex": "#fefbf9",
"rgb": {
"r": 254,
"g": 251,
"b": 249
}
},
"100": {
"hex": "#faf4f2",
"rgb": {
"r": 250,
"g": 244,
"b": 242
}
},
"200": {
"hex": "#f2e8e4",
"rgb": {
"r": 242,
"g": 232,
"b": 228
}
},
"300": {
"hex": "#e8d8d1",
"rgb": {
"r": 232,
"g": 216,
"b": 209
}
},
"400": {
"hex": "#d9c3b9",
"rgb": {
"r": 217,
"g": 195,
"b": 185
}
},
"500": {
"hex": "#7C5849",
"rgb": {
"r": 124,
"g": 88,
"b": 73
}
},
"600": {
"hex": "#9d8579",
"rgb": {
"r": 157,
"g": 133,
"b": 121
}
},
"700": {
"hex": "#705c52",
"rgb": {
"r": 112,
"g": 92,
"b": 82
}
},
"800": {
"hex": "#45362e",
"rgb": {
"r": 69,
"g": 54,
"b": 46
}
},
"900": {
"hex": "#211712",
"rgb": {
"r": 33,
"g": 23,
"b": 18
}
},
"950": {
"hex": "#050302",
"rgb": {
"r": 5,
"g": 3,
"b": 2
}
}
}
},
{
"name": "dark-espresso",
"harmony": "Palette",
"hex": "#523A32",
"rgb": {
"r": 82,
"g": 58,
"b": 50
},
"hsl": {
"h": 15,
"s": 24,
"l": 26
},
"value": "#523A32",
"tonalScale": {
"50": {
"hex": "#fcf9f8",
"rgb": {
"r": 252,
"g": 249,
"b": 248
}
},
"100": {
"hex": "#f7f1ef",
"rgb": {
"r": 247,
"g": 241,
"b": 239
}
},
"200": {
"hex": "#ebe2de",
"rgb": {
"r": 235,
"g": 226,
"b": 222
}
},
"300": {
"hex": "#dbcdc8",
"rgb": {
"r": 219,
"g": 205,
"b": 200
}
},
"400": {
"hex": "#c5b2ab",
"rgb": {
"r": 197,
"g": 178,
"b": 171
}
},
"500": {
"hex": "#523A32",
"rgb": {
"r": 82,
"g": 58,
"b": 50
}
},
"600": {
"hex": "#826d65",
"rgb": {
"r": 130,
"g": 109,
"b": 101
}
},
"700": {
"hex": "#5c4b44",
"rgb": {
"r": 92,
"g": 75,
"b": 68
}
},
"800": {
"hex": "#382b26",
"rgb": {
"r": 56,
"g": 43,
"b": 38
}
},
"900": {
"hex": "#1a110e",
"rgb": {
"r": 26,
"g": 17,
"b": 14
}
},
"950": {
"hex": "#030201",
"rgb": {
"r": 3,
"g": 2,
"b": 1
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 mocha-mousse,Palette,#A47864,"rgb(164, 120, 100)","hsl(19, 26%, 52%)",#A47864,#fffcfa,#fdf7f4,#f8eee9,#f2e2da,#e8d2c6,#A47864,#b2998c,#7f6a5f,#4f3f37,#271d17,#070403 latte-cream,Palette,#D3BEB6,"rgb(211, 190, 182)","hsl(17, 25%, 77%)",#D3BEB6,#fffefd,#fefcfb,#fcf8f6,#f9f3f0,#f4ece9,#D3BEB6,#c6bdb9,#8d8581,#57514e,#2a2625,#080706 cocoa-blush,Palette,#B89687,"rgb(184, 150, 135)","hsl(18, 26%, 63%)",#B89687,#fffcfb,#fdf9f7,#faf3ef,#f5eae5,#edded7,#B89687,#bba9a1,#85766f,#524742,#28211e,#070504 deep-mocha,Palette,#7C5849,"rgb(124, 88, 73)","hsl(18, 26%, 39%)",#7C5849,#fefbf9,#faf4f2,#f2e8e4,#e8d8d1,#d9c3b9,#7C5849,#9d8579,#705c52,#45362e,#211712,#050302 dark-espresso,Palette,#523A32,"rgb(82, 58, 50)","hsl(15, 24%, 26%)",#523A32,#fcf9f8,#f7f1ef,#ebe2de,#dbcdc8,#c5b2ab,#523A32,#826d65,#5c4b44,#382b26,#1a110e,#030201
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 164 120 100 mocha-mousse 255 252 250 mocha-mousse-50 253 247 244 mocha-mousse-100 248 238 233 mocha-mousse-200 242 226 218 mocha-mousse-300 232 210 198 mocha-mousse-400 164 120 100 mocha-mousse-500 178 153 140 mocha-mousse-600 127 106 95 mocha-mousse-700 79 63 55 mocha-mousse-800 39 29 23 mocha-mousse-900 7 4 3 mocha-mousse-950 211 190 182 latte-cream 255 254 253 latte-cream-50 254 252 251 latte-cream-100 252 248 246 latte-cream-200 249 243 240 latte-cream-300 244 236 233 latte-cream-400 211 190 182 latte-cream-500 198 189 185 latte-cream-600 141 133 129 latte-cream-700 87 81 78 latte-cream-800 42 38 37 latte-cream-900 8 7 6 latte-cream-950 184 150 135 cocoa-blush 255 252 251 cocoa-blush-50 253 249 247 cocoa-blush-100 250 243 239 cocoa-blush-200 245 234 229 cocoa-blush-300 237 222 215 cocoa-blush-400 184 150 135 cocoa-blush-500 187 169 161 cocoa-blush-600 133 118 111 cocoa-blush-700 82 71 66 cocoa-blush-800 40 33 30 cocoa-blush-900 7 5 4 cocoa-blush-950 124 88 73 deep-mocha 254 251 249 deep-mocha-50 250 244 242 deep-mocha-100 242 232 228 deep-mocha-200 232 216 209 deep-mocha-300 217 195 185 deep-mocha-400 124 88 73 deep-mocha-500 157 133 121 deep-mocha-600 112 92 82 deep-mocha-700 69 54 46 deep-mocha-800 33 23 18 deep-mocha-900 5 3 2 deep-mocha-950 82 58 50 dark-espresso 252 249 248 dark-espresso-50 247 241 239 dark-espresso-100 235 226 222 dark-espresso-200 219 205 200 dark-espresso-300 197 178 171 dark-espresso-400 82 58 50 dark-espresso-500 130 109 101 dark-espresso-600 92 75 68 dark-espresso-700 56 43 38 dark-espresso-800 26 17 14 dark-espresso-900 3 2 1 dark-espresso-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.