← Back to Tools
Layer spiced fall tones with dark cocoa (#4B2A25), cinnamon brown (#8A4B3A), warm rust (#C77953), apricot gold (#F0A972), and steamed cream (#FFE0B4) for cozy autumn designs.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--dark-cocoa: #4B2A25;
--dark-cocoa-50: #fdf8f7;
--dark-cocoa-100: #f7efed;
--dark-cocoa-200: #ebddda;
--dark-cocoa-300: #dbc5c1;
--dark-cocoa-400: #c3a6a0;
--dark-cocoa-500: #4B2A25;
--dark-cocoa-600: #7d5d57;
--dark-cocoa-700: #593f3a;
--dark-cocoa-800: #37231f;
--dark-cocoa-900: #190c0a;
--dark-cocoa-950: #030101;
--cinnamon-brown: #8A4B3A;
--cinnamon-brown-50: #fffaf7;
--cinnamon-brown-100: #fdf3ef;
--cinnamon-brown-200: #f7e5df;
--cinnamon-brown-300: #efd3ca;
--cinnamon-brown-400: #e2bbae;
--cinnamon-brown-500: #8A4B3A;
--cinnamon-brown-600: #a67b6c;
--cinnamon-brown-700: #775447;
--cinnamon-brown-800: #4b3026;
--cinnamon-brown-900: #25140e;
--cinnamon-brown-950: #060201;
--warm-rust: #C77953;
--warm-rust-50: #fffbf8;
--warm-rust-100: #fff7f1;
--warm-rust-200: #ffeee3;
--warm-rust-300: #fce2d2;
--warm-rust-400: #f6d2bb;
--warm-rust-500: #C77953;
--warm-rust-600: #c3997f;
--warm-rust-700: #8d6a54;
--warm-rust-800: #593e2d;
--warm-rust-900: #2d1c11;
--warm-rust-950: #090402;
--apricot-gold: #F0A972;
--apricot-gold-50: #fffdf9;
--apricot-gold-100: #fffaf3;
--apricot-gold-200: #fff5e9;
--apricot-gold-300: #ffeedb;
--apricot-gold-400: #ffe4c9;
--apricot-gold-500: #F0A972;
--apricot-gold-600: #d3b393;
--apricot-gold-700: #987d62;
--apricot-gold-800: #604b37;
--apricot-gold-900: #302316;
--apricot-gold-950: #0a0602;
--steamed-cream: #FFE0B4;
--steamed-cream-50: #fffefc;
--steamed-cream-100: #fffdf9;
--steamed-cream-200: #fffcf4;
--steamed-cream-300: #fff9ed;
--steamed-cream-400: #fff6e5;
--steamed-cream-500: #FFE0B4;
--steamed-cream-600: #d8cbb7;
--steamed-cream-700: #9a8f7e;
--steamed-cream-800: #60574a;
--steamed-cream-900: #2f2a22;
--steamed-cream-950: #0a0805;
}
$dark-cocoa: #4B2A25; $dark-cocoa-50: #fdf8f7; $dark-cocoa-100: #f7efed; $dark-cocoa-200: #ebddda; $dark-cocoa-300: #dbc5c1; $dark-cocoa-400: #c3a6a0; $dark-cocoa-500: #4B2A25; $dark-cocoa-600: #7d5d57; $dark-cocoa-700: #593f3a; $dark-cocoa-800: #37231f; $dark-cocoa-900: #190c0a; $dark-cocoa-950: #030101; $cinnamon-brown: #8A4B3A; $cinnamon-brown-50: #fffaf7; $cinnamon-brown-100: #fdf3ef; $cinnamon-brown-200: #f7e5df; $cinnamon-brown-300: #efd3ca; $cinnamon-brown-400: #e2bbae; $cinnamon-brown-500: #8A4B3A; $cinnamon-brown-600: #a67b6c; $cinnamon-brown-700: #775447; $cinnamon-brown-800: #4b3026; $cinnamon-brown-900: #25140e; $cinnamon-brown-950: #060201; $warm-rust: #C77953; $warm-rust-50: #fffbf8; $warm-rust-100: #fff7f1; $warm-rust-200: #ffeee3; $warm-rust-300: #fce2d2; $warm-rust-400: #f6d2bb; $warm-rust-500: #C77953; $warm-rust-600: #c3997f; $warm-rust-700: #8d6a54; $warm-rust-800: #593e2d; $warm-rust-900: #2d1c11; $warm-rust-950: #090402; $apricot-gold: #F0A972; $apricot-gold-50: #fffdf9; $apricot-gold-100: #fffaf3; $apricot-gold-200: #fff5e9; $apricot-gold-300: #ffeedb; $apricot-gold-400: #ffe4c9; $apricot-gold-500: #F0A972; $apricot-gold-600: #d3b393; $apricot-gold-700: #987d62; $apricot-gold-800: #604b37; $apricot-gold-900: #302316; $apricot-gold-950: #0a0602; $steamed-cream: #FFE0B4; $steamed-cream-50: #fffefc; $steamed-cream-100: #fffdf9; $steamed-cream-200: #fffcf4; $steamed-cream-300: #fff9ed; $steamed-cream-400: #fff6e5; $steamed-cream-500: #FFE0B4; $steamed-cream-600: #d8cbb7; $steamed-cream-700: #9a8f7e; $steamed-cream-800: #60574a; $steamed-cream-900: #2f2a22; $steamed-cream-950: #0a0805;
colors: {
'dark-cocoa': {
50: '#fdf8f7',
100: '#f7efed',
200: '#ebddda',
300: '#dbc5c1',
400: '#c3a6a0',
500: '#4B2A25',
600: '#7d5d57',
700: '#593f3a',
800: '#37231f',
900: '#190c0a',
950: '#030101',
DEFAULT: '#4B2A25',
},
'cinnamon-brown': {
50: '#fffaf7',
100: '#fdf3ef',
200: '#f7e5df',
300: '#efd3ca',
400: '#e2bbae',
500: '#8A4B3A',
600: '#a67b6c',
700: '#775447',
800: '#4b3026',
900: '#25140e',
950: '#060201',
DEFAULT: '#8A4B3A',
},
'warm-rust': {
50: '#fffbf8',
100: '#fff7f1',
200: '#ffeee3',
300: '#fce2d2',
400: '#f6d2bb',
500: '#C77953',
600: '#c3997f',
700: '#8d6a54',
800: '#593e2d',
900: '#2d1c11',
950: '#090402',
DEFAULT: '#C77953',
},
'apricot-gold': {
50: '#fffdf9',
100: '#fffaf3',
200: '#fff5e9',
300: '#ffeedb',
400: '#ffe4c9',
500: '#F0A972',
600: '#d3b393',
700: '#987d62',
800: '#604b37',
900: '#302316',
950: '#0a0602',
DEFAULT: '#F0A972',
},
'steamed-cream': {
50: '#fffefc',
100: '#fffdf9',
200: '#fffcf4',
300: '#fff9ed',
400: '#fff6e5',
500: '#FFE0B4',
600: '#d8cbb7',
700: '#9a8f7e',
800: '#60574a',
900: '#2f2a22',
950: '#0a0805',
DEFAULT: '#FFE0B4',
},
},
[
{
"name": "dark-cocoa",
"harmony": "Palette",
"hex": "#4B2A25",
"rgb": {
"r": 75,
"g": 42,
"b": 37
},
"hsl": {
"h": 8,
"s": 34,
"l": 22
},
"value": "#4B2A25",
"tonalScale": {
"50": {
"hex": "#fdf8f7",
"rgb": {
"r": 253,
"g": 248,
"b": 247
}
},
"100": {
"hex": "#f7efed",
"rgb": {
"r": 247,
"g": 239,
"b": 237
}
},
"200": {
"hex": "#ebddda",
"rgb": {
"r": 235,
"g": 221,
"b": 218
}
},
"300": {
"hex": "#dbc5c1",
"rgb": {
"r": 219,
"g": 197,
"b": 193
}
},
"400": {
"hex": "#c3a6a0",
"rgb": {
"r": 195,
"g": 166,
"b": 160
}
},
"500": {
"hex": "#4B2A25",
"rgb": {
"r": 75,
"g": 42,
"b": 37
}
},
"600": {
"hex": "#7d5d57",
"rgb": {
"r": 125,
"g": 93,
"b": 87
}
},
"700": {
"hex": "#593f3a",
"rgb": {
"r": 89,
"g": 63,
"b": 58
}
},
"800": {
"hex": "#37231f",
"rgb": {
"r": 55,
"g": 35,
"b": 31
}
},
"900": {
"hex": "#190c0a",
"rgb": {
"r": 25,
"g": 12,
"b": 10
}
},
"950": {
"hex": "#030101",
"rgb": {
"r": 3,
"g": 1,
"b": 1
}
}
}
},
{
"name": "cinnamon-brown",
"harmony": "Palette",
"hex": "#8A4B3A",
"rgb": {
"r": 138,
"g": 75,
"b": 58
},
"hsl": {
"h": 13,
"s": 41,
"l": 38
},
"value": "#8A4B3A",
"tonalScale": {
"50": {
"hex": "#fffaf7",
"rgb": {
"r": 255,
"g": 250,
"b": 247
}
},
"100": {
"hex": "#fdf3ef",
"rgb": {
"r": 253,
"g": 243,
"b": 239
}
},
"200": {
"hex": "#f7e5df",
"rgb": {
"r": 247,
"g": 229,
"b": 223
}
},
"300": {
"hex": "#efd3ca",
"rgb": {
"r": 239,
"g": 211,
"b": 202
}
},
"400": {
"hex": "#e2bbae",
"rgb": {
"r": 226,
"g": 187,
"b": 174
}
},
"500": {
"hex": "#8A4B3A",
"rgb": {
"r": 138,
"g": 75,
"b": 58
}
},
"600": {
"hex": "#a67b6c",
"rgb": {
"r": 166,
"g": 123,
"b": 108
}
},
"700": {
"hex": "#775447",
"rgb": {
"r": 119,
"g": 84,
"b": 71
}
},
"800": {
"hex": "#4b3026",
"rgb": {
"r": 75,
"g": 48,
"b": 38
}
},
"900": {
"hex": "#25140e",
"rgb": {
"r": 37,
"g": 20,
"b": 14
}
},
"950": {
"hex": "#060201",
"rgb": {
"r": 6,
"g": 2,
"b": 1
}
}
}
},
{
"name": "warm-rust",
"harmony": "Palette",
"hex": "#C77953",
"rgb": {
"r": 199,
"g": 121,
"b": 83
},
"hsl": {
"h": 20,
"s": 51,
"l": 55
},
"value": "#C77953",
"tonalScale": {
"50": {
"hex": "#fffbf8",
"rgb": {
"r": 255,
"g": 251,
"b": 248
}
},
"100": {
"hex": "#fff7f1",
"rgb": {
"r": 255,
"g": 247,
"b": 241
}
},
"200": {
"hex": "#ffeee3",
"rgb": {
"r": 255,
"g": 238,
"b": 227
}
},
"300": {
"hex": "#fce2d2",
"rgb": {
"r": 252,
"g": 226,
"b": 210
}
},
"400": {
"hex": "#f6d2bb",
"rgb": {
"r": 246,
"g": 210,
"b": 187
}
},
"500": {
"hex": "#C77953",
"rgb": {
"r": 199,
"g": 121,
"b": 83
}
},
"600": {
"hex": "#c3997f",
"rgb": {
"r": 195,
"g": 153,
"b": 127
}
},
"700": {
"hex": "#8d6a54",
"rgb": {
"r": 141,
"g": 106,
"b": 84
}
},
"800": {
"hex": "#593e2d",
"rgb": {
"r": 89,
"g": 62,
"b": 45
}
},
"900": {
"hex": "#2d1c11",
"rgb": {
"r": 45,
"g": 28,
"b": 17
}
},
"950": {
"hex": "#090402",
"rgb": {
"r": 9,
"g": 4,
"b": 2
}
}
}
},
{
"name": "apricot-gold",
"harmony": "Palette",
"hex": "#F0A972",
"rgb": {
"r": 240,
"g": 169,
"b": 114
},
"hsl": {
"h": 26,
"s": 81,
"l": 69
},
"value": "#F0A972",
"tonalScale": {
"50": {
"hex": "#fffdf9",
"rgb": {
"r": 255,
"g": 253,
"b": 249
}
},
"100": {
"hex": "#fffaf3",
"rgb": {
"r": 255,
"g": 250,
"b": 243
}
},
"200": {
"hex": "#fff5e9",
"rgb": {
"r": 255,
"g": 245,
"b": 233
}
},
"300": {
"hex": "#ffeedb",
"rgb": {
"r": 255,
"g": 238,
"b": 219
}
},
"400": {
"hex": "#ffe4c9",
"rgb": {
"r": 255,
"g": 228,
"b": 201
}
},
"500": {
"hex": "#F0A972",
"rgb": {
"r": 240,
"g": 169,
"b": 114
}
},
"600": {
"hex": "#d3b393",
"rgb": {
"r": 211,
"g": 179,
"b": 147
}
},
"700": {
"hex": "#987d62",
"rgb": {
"r": 152,
"g": 125,
"b": 98
}
},
"800": {
"hex": "#604b37",
"rgb": {
"r": 96,
"g": 75,
"b": 55
}
},
"900": {
"hex": "#302316",
"rgb": {
"r": 48,
"g": 35,
"b": 22
}
},
"950": {
"hex": "#0a0602",
"rgb": {
"r": 10,
"g": 6,
"b": 2
}
}
}
},
{
"name": "steamed-cream",
"harmony": "Palette",
"hex": "#FFE0B4",
"rgb": {
"r": 255,
"g": 224,
"b": 180
},
"hsl": {
"h": 35,
"s": 100,
"l": 85
},
"value": "#FFE0B4",
"tonalScale": {
"50": {
"hex": "#fffefc",
"rgb": {
"r": 255,
"g": 254,
"b": 252
}
},
"100": {
"hex": "#fffdf9",
"rgb": {
"r": 255,
"g": 253,
"b": 249
}
},
"200": {
"hex": "#fffcf4",
"rgb": {
"r": 255,
"g": 252,
"b": 244
}
},
"300": {
"hex": "#fff9ed",
"rgb": {
"r": 255,
"g": 249,
"b": 237
}
},
"400": {
"hex": "#fff6e5",
"rgb": {
"r": 255,
"g": 246,
"b": 229
}
},
"500": {
"hex": "#FFE0B4",
"rgb": {
"r": 255,
"g": 224,
"b": 180
}
},
"600": {
"hex": "#d8cbb7",
"rgb": {
"r": 216,
"g": 203,
"b": 183
}
},
"700": {
"hex": "#9a8f7e",
"rgb": {
"r": 154,
"g": 143,
"b": 126
}
},
"800": {
"hex": "#60574a",
"rgb": {
"r": 96,
"g": 87,
"b": 74
}
},
"900": {
"hex": "#2f2a22",
"rgb": {
"r": 47,
"g": 42,
"b": 34
}
},
"950": {
"hex": "#0a0805",
"rgb": {
"r": 10,
"g": 8,
"b": 5
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 dark-cocoa,Palette,#4B2A25,"rgb(75, 42, 37)","hsl(8, 34%, 22%)",#4B2A25,#fdf8f7,#f7efed,#ebddda,#dbc5c1,#c3a6a0,#4B2A25,#7d5d57,#593f3a,#37231f,#190c0a,#030101 cinnamon-brown,Palette,#8A4B3A,"rgb(138, 75, 58)","hsl(13, 41%, 38%)",#8A4B3A,#fffaf7,#fdf3ef,#f7e5df,#efd3ca,#e2bbae,#8A4B3A,#a67b6c,#775447,#4b3026,#25140e,#060201 warm-rust,Palette,#C77953,"rgb(199, 121, 83)","hsl(20, 51%, 55%)",#C77953,#fffbf8,#fff7f1,#ffeee3,#fce2d2,#f6d2bb,#C77953,#c3997f,#8d6a54,#593e2d,#2d1c11,#090402 apricot-gold,Palette,#F0A972,"rgb(240, 169, 114)","hsl(26, 81%, 69%)",#F0A972,#fffdf9,#fffaf3,#fff5e9,#ffeedb,#ffe4c9,#F0A972,#d3b393,#987d62,#604b37,#302316,#0a0602 steamed-cream,Palette,#FFE0B4,"rgb(255, 224, 180)","hsl(35, 100%, 85%)",#FFE0B4,#fffefc,#fffdf9,#fffcf4,#fff9ed,#fff6e5,#FFE0B4,#d8cbb7,#9a8f7e,#60574a,#2f2a22,#0a0805
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 75 42 37 dark-cocoa 253 248 247 dark-cocoa-50 247 239 237 dark-cocoa-100 235 221 218 dark-cocoa-200 219 197 193 dark-cocoa-300 195 166 160 dark-cocoa-400 75 42 37 dark-cocoa-500 125 93 87 dark-cocoa-600 89 63 58 dark-cocoa-700 55 35 31 dark-cocoa-800 25 12 10 dark-cocoa-900 3 1 1 dark-cocoa-950 138 75 58 cinnamon-brown 255 250 247 cinnamon-brown-50 253 243 239 cinnamon-brown-100 247 229 223 cinnamon-brown-200 239 211 202 cinnamon-brown-300 226 187 174 cinnamon-brown-400 138 75 58 cinnamon-brown-500 166 123 108 cinnamon-brown-600 119 84 71 cinnamon-brown-700 75 48 38 cinnamon-brown-800 37 20 14 cinnamon-brown-900 6 2 1 cinnamon-brown-950 199 121 83 warm-rust 255 251 248 warm-rust-50 255 247 241 warm-rust-100 255 238 227 warm-rust-200 252 226 210 warm-rust-300 246 210 187 warm-rust-400 199 121 83 warm-rust-500 195 153 127 warm-rust-600 141 106 84 warm-rust-700 89 62 45 warm-rust-800 45 28 17 warm-rust-900 9 4 2 warm-rust-950 240 169 114 apricot-gold 255 253 249 apricot-gold-50 255 250 243 apricot-gold-100 255 245 233 apricot-gold-200 255 238 219 apricot-gold-300 255 228 201 apricot-gold-400 240 169 114 apricot-gold-500 211 179 147 apricot-gold-600 152 125 98 apricot-gold-700 96 75 55 apricot-gold-800 48 35 22 apricot-gold-900 10 6 2 apricot-gold-950 255 224 180 steamed-cream 255 254 252 steamed-cream-50 255 253 249 steamed-cream-100 255 252 244 steamed-cream-200 255 249 237 steamed-cream-300 255 246 229 steamed-cream-400 255 224 180 steamed-cream-500 216 203 183 steamed-cream-600 154 143 126 steamed-cream-700 96 87 74 steamed-cream-800 47 42 34 steamed-cream-900 10 8 5 steamed-cream-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.