← Back to Tools
Compose spiced cozy neutrals with creamy oat (#FBF0DA), cinnamon tan (#D39A6A), warm caramel (#A4603D), and cocoa brown (#4A2B22) for inviting bakery-style designs.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--creamy-oat: #FBF0DA;
--creamy-oat-50: #fffffd;
--creamy-oat-100: #fffefc;
--creamy-oat-200: #fffdfa;
--creamy-oat-300: #fffcf7;
--creamy-oat-400: #fffbf3;
--creamy-oat-500: #FBF0DA;
--creamy-oat-600: #d6d2c8;
--creamy-oat-700: #98948c;
--creamy-oat-800: #5e5b55;
--creamy-oat-900: #2e2c28;
--creamy-oat-950: #090807;
--pale-orange: #E8CAA6;
--pale-orange-50: #fffefc;
--pale-orange-100: #fffcf8;
--pale-orange-200: #fef9f2;
--pale-orange-300: #fdf5eb;
--pale-orange-400: #fbf0e1;
--pale-orange-500: #E8CAA6;
--pale-orange-600: #cfc2b0;
--pale-orange-700: #94887a;
--pale-orange-800: #5c5348;
--pale-orange-900: #2d2821;
--pale-orange-950: #090705;
--cinnamon-tan: #D39A6A;
--cinnamon-tan-50: #fffdf9;
--cinnamon-tan-100: #fff9f3;
--cinnamon-tan-200: #fef3e8;
--cinnamon-tan-300: #fcebd9;
--cinnamon-tan-400: #f8dfc7;
--cinnamon-tan-500: #D39A6A;
--cinnamon-tan-600: #c7ab8e;
--cinnamon-tan-700: #8f785f;
--cinnamon-tan-800: #5a4835;
--cinnamon-tan-900: #2d2115;
--cinnamon-tan-950: #090502;
--warm-caramel: #A4603D;
--warm-caramel-50: #fffbf7;
--warm-caramel-100: #fff5ee;
--warm-caramel-200: #faeade;
--warm-caramel-300: #f5dbc9;
--warm-caramel-400: #ebc7ae;
--warm-caramel-500: #A4603D;
--warm-caramel-600: #b38a6d;
--warm-caramel-700: #815f47;
--warm-caramel-800: #513725;
--warm-caramel-900: #28180c;
--warm-caramel-950: #070301;
--cocoa-brown: #4A2B22;
--cocoa-brown-50: #fdf8f7;
--cocoa-brown-100: #f7efed;
--cocoa-brown-200: #eaddd9;
--cocoa-brown-300: #dac6bf;
--cocoa-brown-400: #c2a79d;
--cocoa-brown-500: #4A2B22;
--cocoa-brown-600: #7c5f54;
--cocoa-brown-700: #594036;
--cocoa-brown-800: #36231c;
--cocoa-brown-900: #190d09;
--cocoa-brown-950: #030101;
}
$creamy-oat: #FBF0DA; $creamy-oat-50: #fffffd; $creamy-oat-100: #fffefc; $creamy-oat-200: #fffdfa; $creamy-oat-300: #fffcf7; $creamy-oat-400: #fffbf3; $creamy-oat-500: #FBF0DA; $creamy-oat-600: #d6d2c8; $creamy-oat-700: #98948c; $creamy-oat-800: #5e5b55; $creamy-oat-900: #2e2c28; $creamy-oat-950: #090807; $pale-orange: #E8CAA6; $pale-orange-50: #fffefc; $pale-orange-100: #fffcf8; $pale-orange-200: #fef9f2; $pale-orange-300: #fdf5eb; $pale-orange-400: #fbf0e1; $pale-orange-500: #E8CAA6; $pale-orange-600: #cfc2b0; $pale-orange-700: #94887a; $pale-orange-800: #5c5348; $pale-orange-900: #2d2821; $pale-orange-950: #090705; $cinnamon-tan: #D39A6A; $cinnamon-tan-50: #fffdf9; $cinnamon-tan-100: #fff9f3; $cinnamon-tan-200: #fef3e8; $cinnamon-tan-300: #fcebd9; $cinnamon-tan-400: #f8dfc7; $cinnamon-tan-500: #D39A6A; $cinnamon-tan-600: #c7ab8e; $cinnamon-tan-700: #8f785f; $cinnamon-tan-800: #5a4835; $cinnamon-tan-900: #2d2115; $cinnamon-tan-950: #090502; $warm-caramel: #A4603D; $warm-caramel-50: #fffbf7; $warm-caramel-100: #fff5ee; $warm-caramel-200: #faeade; $warm-caramel-300: #f5dbc9; $warm-caramel-400: #ebc7ae; $warm-caramel-500: #A4603D; $warm-caramel-600: #b38a6d; $warm-caramel-700: #815f47; $warm-caramel-800: #513725; $warm-caramel-900: #28180c; $warm-caramel-950: #070301; $cocoa-brown: #4A2B22; $cocoa-brown-50: #fdf8f7; $cocoa-brown-100: #f7efed; $cocoa-brown-200: #eaddd9; $cocoa-brown-300: #dac6bf; $cocoa-brown-400: #c2a79d; $cocoa-brown-500: #4A2B22; $cocoa-brown-600: #7c5f54; $cocoa-brown-700: #594036; $cocoa-brown-800: #36231c; $cocoa-brown-900: #190d09; $cocoa-brown-950: #030101;
colors: {
'creamy-oat': {
50: '#fffffd',
100: '#fffefc',
200: '#fffdfa',
300: '#fffcf7',
400: '#fffbf3',
500: '#FBF0DA',
600: '#d6d2c8',
700: '#98948c',
800: '#5e5b55',
900: '#2e2c28',
950: '#090807',
DEFAULT: '#FBF0DA',
},
'pale-orange': {
50: '#fffefc',
100: '#fffcf8',
200: '#fef9f2',
300: '#fdf5eb',
400: '#fbf0e1',
500: '#E8CAA6',
600: '#cfc2b0',
700: '#94887a',
800: '#5c5348',
900: '#2d2821',
950: '#090705',
DEFAULT: '#E8CAA6',
},
'cinnamon-tan': {
50: '#fffdf9',
100: '#fff9f3',
200: '#fef3e8',
300: '#fcebd9',
400: '#f8dfc7',
500: '#D39A6A',
600: '#c7ab8e',
700: '#8f785f',
800: '#5a4835',
900: '#2d2115',
950: '#090502',
DEFAULT: '#D39A6A',
},
'warm-caramel': {
50: '#fffbf7',
100: '#fff5ee',
200: '#faeade',
300: '#f5dbc9',
400: '#ebc7ae',
500: '#A4603D',
600: '#b38a6d',
700: '#815f47',
800: '#513725',
900: '#28180c',
950: '#070301',
DEFAULT: '#A4603D',
},
'cocoa-brown': {
50: '#fdf8f7',
100: '#f7efed',
200: '#eaddd9',
300: '#dac6bf',
400: '#c2a79d',
500: '#4A2B22',
600: '#7c5f54',
700: '#594036',
800: '#36231c',
900: '#190d09',
950: '#030101',
DEFAULT: '#4A2B22',
},
},
[
{
"name": "creamy-oat",
"harmony": "Palette",
"hex": "#FBF0DA",
"rgb": {
"r": 251,
"g": 240,
"b": 218
},
"hsl": {
"h": 40,
"s": 80,
"l": 92
},
"value": "#FBF0DA",
"tonalScale": {
"50": {
"hex": "#fffffd",
"rgb": {
"r": 255,
"g": 255,
"b": 253
}
},
"100": {
"hex": "#fffefc",
"rgb": {
"r": 255,
"g": 254,
"b": 252
}
},
"200": {
"hex": "#fffdfa",
"rgb": {
"r": 255,
"g": 253,
"b": 250
}
},
"300": {
"hex": "#fffcf7",
"rgb": {
"r": 255,
"g": 252,
"b": 247
}
},
"400": {
"hex": "#fffbf3",
"rgb": {
"r": 255,
"g": 251,
"b": 243
}
},
"500": {
"hex": "#FBF0DA",
"rgb": {
"r": 251,
"g": 240,
"b": 218
}
},
"600": {
"hex": "#d6d2c8",
"rgb": {
"r": 214,
"g": 210,
"b": 200
}
},
"700": {
"hex": "#98948c",
"rgb": {
"r": 152,
"g": 148,
"b": 140
}
},
"800": {
"hex": "#5e5b55",
"rgb": {
"r": 94,
"g": 91,
"b": 85
}
},
"900": {
"hex": "#2e2c28",
"rgb": {
"r": 46,
"g": 44,
"b": 40
}
},
"950": {
"hex": "#090807",
"rgb": {
"r": 9,
"g": 8,
"b": 7
}
}
}
},
{
"name": "pale-orange",
"harmony": "Palette",
"hex": "#E8CAA6",
"rgb": {
"r": 232,
"g": 202,
"b": 166
},
"hsl": {
"h": 33,
"s": 59,
"l": 78
},
"value": "#E8CAA6",
"tonalScale": {
"50": {
"hex": "#fffefc",
"rgb": {
"r": 255,
"g": 254,
"b": 252
}
},
"100": {
"hex": "#fffcf8",
"rgb": {
"r": 255,
"g": 252,
"b": 248
}
},
"200": {
"hex": "#fef9f2",
"rgb": {
"r": 254,
"g": 249,
"b": 242
}
},
"300": {
"hex": "#fdf5eb",
"rgb": {
"r": 253,
"g": 245,
"b": 235
}
},
"400": {
"hex": "#fbf0e1",
"rgb": {
"r": 251,
"g": 240,
"b": 225
}
},
"500": {
"hex": "#E8CAA6",
"rgb": {
"r": 232,
"g": 202,
"b": 166
}
},
"600": {
"hex": "#cfc2b0",
"rgb": {
"r": 207,
"g": 194,
"b": 176
}
},
"700": {
"hex": "#94887a",
"rgb": {
"r": 148,
"g": 136,
"b": 122
}
},
"800": {
"hex": "#5c5348",
"rgb": {
"r": 92,
"g": 83,
"b": 72
}
},
"900": {
"hex": "#2d2821",
"rgb": {
"r": 45,
"g": 40,
"b": 33
}
},
"950": {
"hex": "#090705",
"rgb": {
"r": 9,
"g": 7,
"b": 5
}
}
}
},
{
"name": "cinnamon-tan",
"harmony": "Palette",
"hex": "#D39A6A",
"rgb": {
"r": 211,
"g": 154,
"b": 106
},
"hsl": {
"h": 27,
"s": 54,
"l": 62
},
"value": "#D39A6A",
"tonalScale": {
"50": {
"hex": "#fffdf9",
"rgb": {
"r": 255,
"g": 253,
"b": 249
}
},
"100": {
"hex": "#fff9f3",
"rgb": {
"r": 255,
"g": 249,
"b": 243
}
},
"200": {
"hex": "#fef3e8",
"rgb": {
"r": 254,
"g": 243,
"b": 232
}
},
"300": {
"hex": "#fcebd9",
"rgb": {
"r": 252,
"g": 235,
"b": 217
}
},
"400": {
"hex": "#f8dfc7",
"rgb": {
"r": 248,
"g": 223,
"b": 199
}
},
"500": {
"hex": "#D39A6A",
"rgb": {
"r": 211,
"g": 154,
"b": 106
}
},
"600": {
"hex": "#c7ab8e",
"rgb": {
"r": 199,
"g": 171,
"b": 142
}
},
"700": {
"hex": "#8f785f",
"rgb": {
"r": 143,
"g": 120,
"b": 95
}
},
"800": {
"hex": "#5a4835",
"rgb": {
"r": 90,
"g": 72,
"b": 53
}
},
"900": {
"hex": "#2d2115",
"rgb": {
"r": 45,
"g": 33,
"b": 21
}
},
"950": {
"hex": "#090502",
"rgb": {
"r": 9,
"g": 5,
"b": 2
}
}
}
},
{
"name": "warm-caramel",
"harmony": "Palette",
"hex": "#A4603D",
"rgb": {
"r": 164,
"g": 96,
"b": 61
},
"hsl": {
"h": 20,
"s": 46,
"l": 44
},
"value": "#A4603D",
"tonalScale": {
"50": {
"hex": "#fffbf7",
"rgb": {
"r": 255,
"g": 251,
"b": 247
}
},
"100": {
"hex": "#fff5ee",
"rgb": {
"r": 255,
"g": 245,
"b": 238
}
},
"200": {
"hex": "#faeade",
"rgb": {
"r": 250,
"g": 234,
"b": 222
}
},
"300": {
"hex": "#f5dbc9",
"rgb": {
"r": 245,
"g": 219,
"b": 201
}
},
"400": {
"hex": "#ebc7ae",
"rgb": {
"r": 235,
"g": 199,
"b": 174
}
},
"500": {
"hex": "#A4603D",
"rgb": {
"r": 164,
"g": 96,
"b": 61
}
},
"600": {
"hex": "#b38a6d",
"rgb": {
"r": 179,
"g": 138,
"b": 109
}
},
"700": {
"hex": "#815f47",
"rgb": {
"r": 129,
"g": 95,
"b": 71
}
},
"800": {
"hex": "#513725",
"rgb": {
"r": 81,
"g": 55,
"b": 37
}
},
"900": {
"hex": "#28180c",
"rgb": {
"r": 40,
"g": 24,
"b": 12
}
},
"950": {
"hex": "#070301",
"rgb": {
"r": 7,
"g": 3,
"b": 1
}
}
}
},
{
"name": "cocoa-brown",
"harmony": "Palette",
"hex": "#4A2B22",
"rgb": {
"r": 74,
"g": 43,
"b": 34
},
"hsl": {
"h": 14,
"s": 37,
"l": 21
},
"value": "#4A2B22",
"tonalScale": {
"50": {
"hex": "#fdf8f7",
"rgb": {
"r": 253,
"g": 248,
"b": 247
}
},
"100": {
"hex": "#f7efed",
"rgb": {
"r": 247,
"g": 239,
"b": 237
}
},
"200": {
"hex": "#eaddd9",
"rgb": {
"r": 234,
"g": 221,
"b": 217
}
},
"300": {
"hex": "#dac6bf",
"rgb": {
"r": 218,
"g": 198,
"b": 191
}
},
"400": {
"hex": "#c2a79d",
"rgb": {
"r": 194,
"g": 167,
"b": 157
}
},
"500": {
"hex": "#4A2B22",
"rgb": {
"r": 74,
"g": 43,
"b": 34
}
},
"600": {
"hex": "#7c5f54",
"rgb": {
"r": 124,
"g": 95,
"b": 84
}
},
"700": {
"hex": "#594036",
"rgb": {
"r": 89,
"g": 64,
"b": 54
}
},
"800": {
"hex": "#36231c",
"rgb": {
"r": 54,
"g": 35,
"b": 28
}
},
"900": {
"hex": "#190d09",
"rgb": {
"r": 25,
"g": 13,
"b": 9
}
},
"950": {
"hex": "#030101",
"rgb": {
"r": 3,
"g": 1,
"b": 1
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 creamy-oat,Palette,#FBF0DA,"rgb(251, 240, 218)","hsl(40, 80%, 92%)",#FBF0DA,#fffffd,#fffefc,#fffdfa,#fffcf7,#fffbf3,#FBF0DA,#d6d2c8,#98948c,#5e5b55,#2e2c28,#090807 pale-orange,Palette,#E8CAA6,"rgb(232, 202, 166)","hsl(33, 59%, 78%)",#E8CAA6,#fffefc,#fffcf8,#fef9f2,#fdf5eb,#fbf0e1,#E8CAA6,#cfc2b0,#94887a,#5c5348,#2d2821,#090705 cinnamon-tan,Palette,#D39A6A,"rgb(211, 154, 106)","hsl(27, 54%, 62%)",#D39A6A,#fffdf9,#fff9f3,#fef3e8,#fcebd9,#f8dfc7,#D39A6A,#c7ab8e,#8f785f,#5a4835,#2d2115,#090502 warm-caramel,Palette,#A4603D,"rgb(164, 96, 61)","hsl(20, 46%, 44%)",#A4603D,#fffbf7,#fff5ee,#faeade,#f5dbc9,#ebc7ae,#A4603D,#b38a6d,#815f47,#513725,#28180c,#070301 cocoa-brown,Palette,#4A2B22,"rgb(74, 43, 34)","hsl(14, 37%, 21%)",#4A2B22,#fdf8f7,#f7efed,#eaddd9,#dac6bf,#c2a79d,#4A2B22,#7c5f54,#594036,#36231c,#190d09,#030101
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 251 240 218 creamy-oat 255 255 253 creamy-oat-50 255 254 252 creamy-oat-100 255 253 250 creamy-oat-200 255 252 247 creamy-oat-300 255 251 243 creamy-oat-400 251 240 218 creamy-oat-500 214 210 200 creamy-oat-600 152 148 140 creamy-oat-700 94 91 85 creamy-oat-800 46 44 40 creamy-oat-900 9 8 7 creamy-oat-950 232 202 166 pale-orange 255 254 252 pale-orange-50 255 252 248 pale-orange-100 254 249 242 pale-orange-200 253 245 235 pale-orange-300 251 240 225 pale-orange-400 232 202 166 pale-orange-500 207 194 176 pale-orange-600 148 136 122 pale-orange-700 92 83 72 pale-orange-800 45 40 33 pale-orange-900 9 7 5 pale-orange-950 211 154 106 cinnamon-tan 255 253 249 cinnamon-tan-50 255 249 243 cinnamon-tan-100 254 243 232 cinnamon-tan-200 252 235 217 cinnamon-tan-300 248 223 199 cinnamon-tan-400 211 154 106 cinnamon-tan-500 199 171 142 cinnamon-tan-600 143 120 95 cinnamon-tan-700 90 72 53 cinnamon-tan-800 45 33 21 cinnamon-tan-900 9 5 2 cinnamon-tan-950 164 96 61 warm-caramel 255 251 247 warm-caramel-50 255 245 238 warm-caramel-100 250 234 222 warm-caramel-200 245 219 201 warm-caramel-300 235 199 174 warm-caramel-400 164 96 61 warm-caramel-500 179 138 109 warm-caramel-600 129 95 71 warm-caramel-700 81 55 37 warm-caramel-800 40 24 12 warm-caramel-900 7 3 1 warm-caramel-950 74 43 34 cocoa-brown 253 248 247 cocoa-brown-50 247 239 237 cocoa-brown-100 234 221 217 cocoa-brown-200 218 198 191 cocoa-brown-300 194 167 157 cocoa-brown-400 74 43 34 cocoa-brown-500 124 95 84 cocoa-brown-600 89 64 54 cocoa-brown-700 54 35 28 cocoa-brown-800 25 13 9 cocoa-brown-900 3 1 1 cocoa-brown-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.