← Back to Tools
Design grounded, timeless 2026 branding with this chocolate brown palette featuring #4E342E chocolate brown, #6F4E37 mocha, #A67C52 warm caramel, #2A1E16 deep espresso, and #EDE0D4 cream.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--chocolate-brown: #4E342E;
--chocolate-brown-50: #fdf9f8;
--chocolate-brown-100: #f6f1ef;
--chocolate-brown-200: #eae0dd;
--chocolate-brown-300: #dacac6;
--chocolate-brown-400: #c3aea8;
--chocolate-brown-500: #4E342E;
--chocolate-brown-600: #7f6861;
--chocolate-brown-700: #5a4741;
--chocolate-brown-800: #372824;
--chocolate-brown-900: #19100d;
--chocolate-brown-950: #030201;
--mocha: #6F4E37;
--mocha-50: #fefaf7;
--mocha-100: #f9f4ef;
--mocha-200: #f0e7de;
--mocha-300: #e5d5c8;
--mocha-400: #d3beac;
--mocha-500: #6F4E37;
--mocha-600: #957e69;
--mocha-700: #6a5645;
--mocha-800: #423225;
--mocha-900: #1f150d;
--mocha-950: #050301;
--warm-caramel: #A67C52;
--warm-caramel-50: #fffcf8;
--warm-caramel-100: #fdf8f1;
--warm-caramel-200: #f8efe4;
--warm-caramel-300: #f2e3d2;
--warm-caramel-400: #e9d4bb;
--warm-caramel-500: #A67C52;
--warm-caramel-600: #b39b7e;
--warm-caramel-700: #806c54;
--warm-caramel-800: #50412e;
--warm-caramel-900: #271d11;
--warm-caramel-950: #070402;
--deep-espresso: #2A1E16;
--deep-espresso-50: #faf8f6;
--deep-espresso-100: #f2eeeb;
--deep-espresso-200: #e0d9d4;
--deep-espresso-300: #c9bfb7;
--deep-espresso-400: #aa9c91;
--deep-espresso-500: #2A1E16;
--deep-espresso-600: #5f5043;
--deep-espresso-700: #42352b;
--deep-espresso-800: #271d15;
--deep-espresso-900: #100a06;
--deep-espresso-950: #020101;
--cream: #EDE0D4;
--cream-50: #fffefe;
--cream-100: #fffdfc;
--cream-200: #fefcfa;
--cream-300: #fdf9f6;
--cream-400: #fbf6f2;
--cream-500: #EDE0D4;
--cream-600: #d1cbc6;
--cream-700: #948f8b;
--cream-800: #5b5854;
--cream-900: #2d2a28;
--cream-950: #090807;
}
$chocolate-brown: #4E342E; $chocolate-brown-50: #fdf9f8; $chocolate-brown-100: #f6f1ef; $chocolate-brown-200: #eae0dd; $chocolate-brown-300: #dacac6; $chocolate-brown-400: #c3aea8; $chocolate-brown-500: #4E342E; $chocolate-brown-600: #7f6861; $chocolate-brown-700: #5a4741; $chocolate-brown-800: #372824; $chocolate-brown-900: #19100d; $chocolate-brown-950: #030201; $mocha: #6F4E37; $mocha-50: #fefaf7; $mocha-100: #f9f4ef; $mocha-200: #f0e7de; $mocha-300: #e5d5c8; $mocha-400: #d3beac; $mocha-500: #6F4E37; $mocha-600: #957e69; $mocha-700: #6a5645; $mocha-800: #423225; $mocha-900: #1f150d; $mocha-950: #050301; $warm-caramel: #A67C52; $warm-caramel-50: #fffcf8; $warm-caramel-100: #fdf8f1; $warm-caramel-200: #f8efe4; $warm-caramel-300: #f2e3d2; $warm-caramel-400: #e9d4bb; $warm-caramel-500: #A67C52; $warm-caramel-600: #b39b7e; $warm-caramel-700: #806c54; $warm-caramel-800: #50412e; $warm-caramel-900: #271d11; $warm-caramel-950: #070402; $deep-espresso: #2A1E16; $deep-espresso-50: #faf8f6; $deep-espresso-100: #f2eeeb; $deep-espresso-200: #e0d9d4; $deep-espresso-300: #c9bfb7; $deep-espresso-400: #aa9c91; $deep-espresso-500: #2A1E16; $deep-espresso-600: #5f5043; $deep-espresso-700: #42352b; $deep-espresso-800: #271d15; $deep-espresso-900: #100a06; $deep-espresso-950: #020101; $cream: #EDE0D4; $cream-50: #fffefe; $cream-100: #fffdfc; $cream-200: #fefcfa; $cream-300: #fdf9f6; $cream-400: #fbf6f2; $cream-500: #EDE0D4; $cream-600: #d1cbc6; $cream-700: #948f8b; $cream-800: #5b5854; $cream-900: #2d2a28; $cream-950: #090807;
colors: {
'chocolate-brown': {
50: '#fdf9f8',
100: '#f6f1ef',
200: '#eae0dd',
300: '#dacac6',
400: '#c3aea8',
500: '#4E342E',
600: '#7f6861',
700: '#5a4741',
800: '#372824',
900: '#19100d',
950: '#030201',
DEFAULT: '#4E342E',
},
'mocha': {
50: '#fefaf7',
100: '#f9f4ef',
200: '#f0e7de',
300: '#e5d5c8',
400: '#d3beac',
500: '#6F4E37',
600: '#957e69',
700: '#6a5645',
800: '#423225',
900: '#1f150d',
950: '#050301',
DEFAULT: '#6F4E37',
},
'warm-caramel': {
50: '#fffcf8',
100: '#fdf8f1',
200: '#f8efe4',
300: '#f2e3d2',
400: '#e9d4bb',
500: '#A67C52',
600: '#b39b7e',
700: '#806c54',
800: '#50412e',
900: '#271d11',
950: '#070402',
DEFAULT: '#A67C52',
},
'deep-espresso': {
50: '#faf8f6',
100: '#f2eeeb',
200: '#e0d9d4',
300: '#c9bfb7',
400: '#aa9c91',
500: '#2A1E16',
600: '#5f5043',
700: '#42352b',
800: '#271d15',
900: '#100a06',
950: '#020101',
DEFAULT: '#2A1E16',
},
'cream': {
50: '#fffefe',
100: '#fffdfc',
200: '#fefcfa',
300: '#fdf9f6',
400: '#fbf6f2',
500: '#EDE0D4',
600: '#d1cbc6',
700: '#948f8b',
800: '#5b5854',
900: '#2d2a28',
950: '#090807',
DEFAULT: '#EDE0D4',
},
},
[
{
"name": "chocolate-brown",
"harmony": "Palette",
"hex": "#4E342E",
"rgb": {
"r": 78,
"g": 52,
"b": 46
},
"hsl": {
"h": 11,
"s": 26,
"l": 24
},
"value": "#4E342E",
"tonalScale": {
"50": {
"hex": "#fdf9f8",
"rgb": {
"r": 253,
"g": 249,
"b": 248
}
},
"100": {
"hex": "#f6f1ef",
"rgb": {
"r": 246,
"g": 241,
"b": 239
}
},
"200": {
"hex": "#eae0dd",
"rgb": {
"r": 234,
"g": 224,
"b": 221
}
},
"300": {
"hex": "#dacac6",
"rgb": {
"r": 218,
"g": 202,
"b": 198
}
},
"400": {
"hex": "#c3aea8",
"rgb": {
"r": 195,
"g": 174,
"b": 168
}
},
"500": {
"hex": "#4E342E",
"rgb": {
"r": 78,
"g": 52,
"b": 46
}
},
"600": {
"hex": "#7f6861",
"rgb": {
"r": 127,
"g": 104,
"b": 97
}
},
"700": {
"hex": "#5a4741",
"rgb": {
"r": 90,
"g": 71,
"b": 65
}
},
"800": {
"hex": "#372824",
"rgb": {
"r": 55,
"g": 40,
"b": 36
}
},
"900": {
"hex": "#19100d",
"rgb": {
"r": 25,
"g": 16,
"b": 13
}
},
"950": {
"hex": "#030201",
"rgb": {
"r": 3,
"g": 2,
"b": 1
}
}
}
},
{
"name": "mocha",
"harmony": "Palette",
"hex": "#6F4E37",
"rgb": {
"r": 111,
"g": 78,
"b": 55
},
"hsl": {
"h": 25,
"s": 34,
"l": 33
},
"value": "#6F4E37",
"tonalScale": {
"50": {
"hex": "#fefaf7",
"rgb": {
"r": 254,
"g": 250,
"b": 247
}
},
"100": {
"hex": "#f9f4ef",
"rgb": {
"r": 249,
"g": 244,
"b": 239
}
},
"200": {
"hex": "#f0e7de",
"rgb": {
"r": 240,
"g": 231,
"b": 222
}
},
"300": {
"hex": "#e5d5c8",
"rgb": {
"r": 229,
"g": 213,
"b": 200
}
},
"400": {
"hex": "#d3beac",
"rgb": {
"r": 211,
"g": 190,
"b": 172
}
},
"500": {
"hex": "#6F4E37",
"rgb": {
"r": 111,
"g": 78,
"b": 55
}
},
"600": {
"hex": "#957e69",
"rgb": {
"r": 149,
"g": 126,
"b": 105
}
},
"700": {
"hex": "#6a5645",
"rgb": {
"r": 106,
"g": 86,
"b": 69
}
},
"800": {
"hex": "#423225",
"rgb": {
"r": 66,
"g": 50,
"b": 37
}
},
"900": {
"hex": "#1f150d",
"rgb": {
"r": 31,
"g": 21,
"b": 13
}
},
"950": {
"hex": "#050301",
"rgb": {
"r": 5,
"g": 3,
"b": 1
}
}
}
},
{
"name": "warm-caramel",
"harmony": "Palette",
"hex": "#A67C52",
"rgb": {
"r": 166,
"g": 124,
"b": 82
},
"hsl": {
"h": 30,
"s": 34,
"l": 49
},
"value": "#A67C52",
"tonalScale": {
"50": {
"hex": "#fffcf8",
"rgb": {
"r": 255,
"g": 252,
"b": 248
}
},
"100": {
"hex": "#fdf8f1",
"rgb": {
"r": 253,
"g": 248,
"b": 241
}
},
"200": {
"hex": "#f8efe4",
"rgb": {
"r": 248,
"g": 239,
"b": 228
}
},
"300": {
"hex": "#f2e3d2",
"rgb": {
"r": 242,
"g": 227,
"b": 210
}
},
"400": {
"hex": "#e9d4bb",
"rgb": {
"r": 233,
"g": 212,
"b": 187
}
},
"500": {
"hex": "#A67C52",
"rgb": {
"r": 166,
"g": 124,
"b": 82
}
},
"600": {
"hex": "#b39b7e",
"rgb": {
"r": 179,
"g": 155,
"b": 126
}
},
"700": {
"hex": "#806c54",
"rgb": {
"r": 128,
"g": 108,
"b": 84
}
},
"800": {
"hex": "#50412e",
"rgb": {
"r": 80,
"g": 65,
"b": 46
}
},
"900": {
"hex": "#271d11",
"rgb": {
"r": 39,
"g": 29,
"b": 17
}
},
"950": {
"hex": "#070402",
"rgb": {
"r": 7,
"g": 4,
"b": 2
}
}
}
},
{
"name": "deep-espresso",
"harmony": "Palette",
"hex": "#2A1E16",
"rgb": {
"r": 42,
"g": 30,
"b": 22
},
"hsl": {
"h": 24,
"s": 31,
"l": 13
},
"value": "#2A1E16",
"tonalScale": {
"50": {
"hex": "#faf8f6",
"rgb": {
"r": 250,
"g": 248,
"b": 246
}
},
"100": {
"hex": "#f2eeeb",
"rgb": {
"r": 242,
"g": 238,
"b": 235
}
},
"200": {
"hex": "#e0d9d4",
"rgb": {
"r": 224,
"g": 217,
"b": 212
}
},
"300": {
"hex": "#c9bfb7",
"rgb": {
"r": 201,
"g": 191,
"b": 183
}
},
"400": {
"hex": "#aa9c91",
"rgb": {
"r": 170,
"g": 156,
"b": 145
}
},
"500": {
"hex": "#2A1E16",
"rgb": {
"r": 42,
"g": 30,
"b": 22
}
},
"600": {
"hex": "#5f5043",
"rgb": {
"r": 95,
"g": 80,
"b": 67
}
},
"700": {
"hex": "#42352b",
"rgb": {
"r": 66,
"g": 53,
"b": 43
}
},
"800": {
"hex": "#271d15",
"rgb": {
"r": 39,
"g": 29,
"b": 21
}
},
"900": {
"hex": "#100a06",
"rgb": {
"r": 16,
"g": 10,
"b": 6
}
},
"950": {
"hex": "#020101",
"rgb": {
"r": 2,
"g": 1,
"b": 1
}
}
}
},
{
"name": "cream",
"harmony": "Palette",
"hex": "#EDE0D4",
"rgb": {
"r": 237,
"g": 224,
"b": 212
},
"hsl": {
"h": 29,
"s": 41,
"l": 88
},
"value": "#EDE0D4",
"tonalScale": {
"50": {
"hex": "#fffefe",
"rgb": {
"r": 255,
"g": 254,
"b": 254
}
},
"100": {
"hex": "#fffdfc",
"rgb": {
"r": 255,
"g": 253,
"b": 252
}
},
"200": {
"hex": "#fefcfa",
"rgb": {
"r": 254,
"g": 252,
"b": 250
}
},
"300": {
"hex": "#fdf9f6",
"rgb": {
"r": 253,
"g": 249,
"b": 246
}
},
"400": {
"hex": "#fbf6f2",
"rgb": {
"r": 251,
"g": 246,
"b": 242
}
},
"500": {
"hex": "#EDE0D4",
"rgb": {
"r": 237,
"g": 224,
"b": 212
}
},
"600": {
"hex": "#d1cbc6",
"rgb": {
"r": 209,
"g": 203,
"b": 198
}
},
"700": {
"hex": "#948f8b",
"rgb": {
"r": 148,
"g": 143,
"b": 139
}
},
"800": {
"hex": "#5b5854",
"rgb": {
"r": 91,
"g": 88,
"b": 84
}
},
"900": {
"hex": "#2d2a28",
"rgb": {
"r": 45,
"g": 42,
"b": 40
}
},
"950": {
"hex": "#090807",
"rgb": {
"r": 9,
"g": 8,
"b": 7
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 chocolate-brown,Palette,#4E342E,"rgb(78, 52, 46)","hsl(11, 26%, 24%)",#4E342E,#fdf9f8,#f6f1ef,#eae0dd,#dacac6,#c3aea8,#4E342E,#7f6861,#5a4741,#372824,#19100d,#030201 mocha,Palette,#6F4E37,"rgb(111, 78, 55)","hsl(25, 34%, 33%)",#6F4E37,#fefaf7,#f9f4ef,#f0e7de,#e5d5c8,#d3beac,#6F4E37,#957e69,#6a5645,#423225,#1f150d,#050301 warm-caramel,Palette,#A67C52,"rgb(166, 124, 82)","hsl(30, 34%, 49%)",#A67C52,#fffcf8,#fdf8f1,#f8efe4,#f2e3d2,#e9d4bb,#A67C52,#b39b7e,#806c54,#50412e,#271d11,#070402 deep-espresso,Palette,#2A1E16,"rgb(42, 30, 22)","hsl(24, 31%, 13%)",#2A1E16,#faf8f6,#f2eeeb,#e0d9d4,#c9bfb7,#aa9c91,#2A1E16,#5f5043,#42352b,#271d15,#100a06,#020101 cream,Palette,#EDE0D4,"rgb(237, 224, 212)","hsl(29, 41%, 88%)",#EDE0D4,#fffefe,#fffdfc,#fefcfa,#fdf9f6,#fbf6f2,#EDE0D4,#d1cbc6,#948f8b,#5b5854,#2d2a28,#090807
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 78 52 46 chocolate-brown 253 249 248 chocolate-brown-50 246 241 239 chocolate-brown-100 234 224 221 chocolate-brown-200 218 202 198 chocolate-brown-300 195 174 168 chocolate-brown-400 78 52 46 chocolate-brown-500 127 104 97 chocolate-brown-600 90 71 65 chocolate-brown-700 55 40 36 chocolate-brown-800 25 16 13 chocolate-brown-900 3 2 1 chocolate-brown-950 111 78 55 mocha 254 250 247 mocha-50 249 244 239 mocha-100 240 231 222 mocha-200 229 213 200 mocha-300 211 190 172 mocha-400 111 78 55 mocha-500 149 126 105 mocha-600 106 86 69 mocha-700 66 50 37 mocha-800 31 21 13 mocha-900 5 3 1 mocha-950 166 124 82 warm-caramel 255 252 248 warm-caramel-50 253 248 241 warm-caramel-100 248 239 228 warm-caramel-200 242 227 210 warm-caramel-300 233 212 187 warm-caramel-400 166 124 82 warm-caramel-500 179 155 126 warm-caramel-600 128 108 84 warm-caramel-700 80 65 46 warm-caramel-800 39 29 17 warm-caramel-900 7 4 2 warm-caramel-950 42 30 22 deep-espresso 250 248 246 deep-espresso-50 242 238 235 deep-espresso-100 224 217 212 deep-espresso-200 201 191 183 deep-espresso-300 170 156 145 deep-espresso-400 42 30 22 deep-espresso-500 95 80 67 deep-espresso-600 66 53 43 deep-espresso-700 39 29 21 deep-espresso-800 16 10 6 deep-espresso-900 2 1 1 deep-espresso-950 237 224 212 cream 255 254 254 cream-50 255 253 252 cream-100 254 252 250 cream-200 253 249 246 cream-300 251 246 242 cream-400 237 224 212 cream-500 209 203 198 cream-600 148 143 139 cream-700 91 88 84 cream-800 45 42 40 cream-900 9 8 7 cream-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.