← Back to Tools
Design sunlit kitchen-garden colors with butter yellow (#F2E2A0), golden honey (#D9B84A), sage green (#9CAF88), warm terracotta (#C36F4E), and creamy ivory (#FBF3E0) for handmade branding.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--butter-yellow: #F2E2A0;
--butter-yellow-50: #fffffb;
--butter-yellow-100: #fffef7;
--butter-yellow-200: #fffcf0;
--butter-yellow-300: #fefae7;
--butter-yellow-400: #fdf7dd;
--butter-yellow-500: #F2E2A0;
--butter-yellow-600: #d3ccac;
--butter-yellow-700: #969075;
--butter-yellow-800: #5d5844;
--butter-yellow-900: #2e2b1e;
--butter-yellow-950: #090804;
--golden-honey: #D9B84A;
--golden-honey-50: #fffef5;
--golden-honey-100: #fffcee;
--golden-honey-200: #fdf8df;
--golden-honey-300: #fbf3cb;
--golden-honey-400: #f8ebb2;
--golden-honey-500: #D9B84A;
--golden-honey-600: #caba75;
--golden-honey-700: #908347;
--golden-honey-800: #5a5021;
--golden-honey-900: #2d2607;
--golden-honey-950: #090600;
--sage-green: #9CAF88;
--sage-green-50: #fcfefb;
--sage-green-100: #f9fcf7;
--sage-green-200: #f3f7ef;
--sage-green-300: #ebf1e4;
--sage-green-400: #e0e8d6;
--sage-green-500: #9CAF88;
--sage-green-600: #acb6a1;
--sage-green-700: #78816f;
--sage-green-800: #484f41;
--sage-green-900: #22261d;
--sage-green-950: #050604;
--warm-terracotta: #C36F4E;
--warm-terracotta-50: #fffbf8;
--warm-terracotta-100: #fff6f0;
--warm-terracotta-200: #ffece2;
--warm-terracotta-300: #fcdfd0;
--warm-terracotta-400: #f6cdb8;
--warm-terracotta-500: #C36F4E;
--warm-terracotta-600: #c1937b;
--warm-terracotta-700: #8c6551;
--warm-terracotta-800: #583b2c;
--warm-terracotta-900: #2c1a10;
--warm-terracotta-950: #090302;
--creamy-ivory: #FBF3E0;
--creamy-ivory-50: #fffffe;
--creamy-ivory-100: #fffefd;
--creamy-ivory-200: #fffefb;
--creamy-ivory-300: #fffdf8;
--creamy-ivory-400: #fffcf5;
--creamy-ivory-500: #FBF3E0;
--creamy-ivory-600: #d6d3cb;
--creamy-ivory-700: #98958e;
--creamy-ivory-800: #5d5b56;
--creamy-ivory-900: #2e2c29;
--creamy-ivory-950: #090907;
}
$butter-yellow: #F2E2A0; $butter-yellow-50: #fffffb; $butter-yellow-100: #fffef7; $butter-yellow-200: #fffcf0; $butter-yellow-300: #fefae7; $butter-yellow-400: #fdf7dd; $butter-yellow-500: #F2E2A0; $butter-yellow-600: #d3ccac; $butter-yellow-700: #969075; $butter-yellow-800: #5d5844; $butter-yellow-900: #2e2b1e; $butter-yellow-950: #090804; $golden-honey: #D9B84A; $golden-honey-50: #fffef5; $golden-honey-100: #fffcee; $golden-honey-200: #fdf8df; $golden-honey-300: #fbf3cb; $golden-honey-400: #f8ebb2; $golden-honey-500: #D9B84A; $golden-honey-600: #caba75; $golden-honey-700: #908347; $golden-honey-800: #5a5021; $golden-honey-900: #2d2607; $golden-honey-950: #090600; $sage-green: #9CAF88; $sage-green-50: #fcfefb; $sage-green-100: #f9fcf7; $sage-green-200: #f3f7ef; $sage-green-300: #ebf1e4; $sage-green-400: #e0e8d6; $sage-green-500: #9CAF88; $sage-green-600: #acb6a1; $sage-green-700: #78816f; $sage-green-800: #484f41; $sage-green-900: #22261d; $sage-green-950: #050604; $warm-terracotta: #C36F4E; $warm-terracotta-50: #fffbf8; $warm-terracotta-100: #fff6f0; $warm-terracotta-200: #ffece2; $warm-terracotta-300: #fcdfd0; $warm-terracotta-400: #f6cdb8; $warm-terracotta-500: #C36F4E; $warm-terracotta-600: #c1937b; $warm-terracotta-700: #8c6551; $warm-terracotta-800: #583b2c; $warm-terracotta-900: #2c1a10; $warm-terracotta-950: #090302; $creamy-ivory: #FBF3E0; $creamy-ivory-50: #fffffe; $creamy-ivory-100: #fffefd; $creamy-ivory-200: #fffefb; $creamy-ivory-300: #fffdf8; $creamy-ivory-400: #fffcf5; $creamy-ivory-500: #FBF3E0; $creamy-ivory-600: #d6d3cb; $creamy-ivory-700: #98958e; $creamy-ivory-800: #5d5b56; $creamy-ivory-900: #2e2c29; $creamy-ivory-950: #090907;
colors: {
'butter-yellow': {
50: '#fffffb',
100: '#fffef7',
200: '#fffcf0',
300: '#fefae7',
400: '#fdf7dd',
500: '#F2E2A0',
600: '#d3ccac',
700: '#969075',
800: '#5d5844',
900: '#2e2b1e',
950: '#090804',
DEFAULT: '#F2E2A0',
},
'golden-honey': {
50: '#fffef5',
100: '#fffcee',
200: '#fdf8df',
300: '#fbf3cb',
400: '#f8ebb2',
500: '#D9B84A',
600: '#caba75',
700: '#908347',
800: '#5a5021',
900: '#2d2607',
950: '#090600',
DEFAULT: '#D9B84A',
},
'sage-green': {
50: '#fcfefb',
100: '#f9fcf7',
200: '#f3f7ef',
300: '#ebf1e4',
400: '#e0e8d6',
500: '#9CAF88',
600: '#acb6a1',
700: '#78816f',
800: '#484f41',
900: '#22261d',
950: '#050604',
DEFAULT: '#9CAF88',
},
'warm-terracotta': {
50: '#fffbf8',
100: '#fff6f0',
200: '#ffece2',
300: '#fcdfd0',
400: '#f6cdb8',
500: '#C36F4E',
600: '#c1937b',
700: '#8c6551',
800: '#583b2c',
900: '#2c1a10',
950: '#090302',
DEFAULT: '#C36F4E',
},
'creamy-ivory': {
50: '#fffffe',
100: '#fffefd',
200: '#fffefb',
300: '#fffdf8',
400: '#fffcf5',
500: '#FBF3E0',
600: '#d6d3cb',
700: '#98958e',
800: '#5d5b56',
900: '#2e2c29',
950: '#090907',
DEFAULT: '#FBF3E0',
},
},
[
{
"name": "butter-yellow",
"harmony": "Palette",
"hex": "#F2E2A0",
"rgb": {
"r": 242,
"g": 226,
"b": 160
},
"hsl": {
"h": 48,
"s": 76,
"l": 79
},
"value": "#F2E2A0",
"tonalScale": {
"50": {
"hex": "#fffffb",
"rgb": {
"r": 255,
"g": 255,
"b": 251
}
},
"100": {
"hex": "#fffef7",
"rgb": {
"r": 255,
"g": 254,
"b": 247
}
},
"200": {
"hex": "#fffcf0",
"rgb": {
"r": 255,
"g": 252,
"b": 240
}
},
"300": {
"hex": "#fefae7",
"rgb": {
"r": 254,
"g": 250,
"b": 231
}
},
"400": {
"hex": "#fdf7dd",
"rgb": {
"r": 253,
"g": 247,
"b": 221
}
},
"500": {
"hex": "#F2E2A0",
"rgb": {
"r": 242,
"g": 226,
"b": 160
}
},
"600": {
"hex": "#d3ccac",
"rgb": {
"r": 211,
"g": 204,
"b": 172
}
},
"700": {
"hex": "#969075",
"rgb": {
"r": 150,
"g": 144,
"b": 117
}
},
"800": {
"hex": "#5d5844",
"rgb": {
"r": 93,
"g": 88,
"b": 68
}
},
"900": {
"hex": "#2e2b1e",
"rgb": {
"r": 46,
"g": 43,
"b": 30
}
},
"950": {
"hex": "#090804",
"rgb": {
"r": 9,
"g": 8,
"b": 4
}
}
}
},
{
"name": "golden-honey",
"harmony": "Palette",
"hex": "#D9B84A",
"rgb": {
"r": 217,
"g": 184,
"b": 74
},
"hsl": {
"h": 46,
"s": 65,
"l": 57
},
"value": "#D9B84A",
"tonalScale": {
"50": {
"hex": "#fffef5",
"rgb": {
"r": 255,
"g": 254,
"b": 245
}
},
"100": {
"hex": "#fffcee",
"rgb": {
"r": 255,
"g": 252,
"b": 238
}
},
"200": {
"hex": "#fdf8df",
"rgb": {
"r": 253,
"g": 248,
"b": 223
}
},
"300": {
"hex": "#fbf3cb",
"rgb": {
"r": 251,
"g": 243,
"b": 203
}
},
"400": {
"hex": "#f8ebb2",
"rgb": {
"r": 248,
"g": 235,
"b": 178
}
},
"500": {
"hex": "#D9B84A",
"rgb": {
"r": 217,
"g": 184,
"b": 74
}
},
"600": {
"hex": "#caba75",
"rgb": {
"r": 202,
"g": 186,
"b": 117
}
},
"700": {
"hex": "#908347",
"rgb": {
"r": 144,
"g": 131,
"b": 71
}
},
"800": {
"hex": "#5a5021",
"rgb": {
"r": 90,
"g": 80,
"b": 33
}
},
"900": {
"hex": "#2d2607",
"rgb": {
"r": 45,
"g": 38,
"b": 7
}
},
"950": {
"hex": "#090600",
"rgb": {
"r": 9,
"g": 6,
"b": 0
}
}
}
},
{
"name": "sage-green",
"harmony": "Palette",
"hex": "#9CAF88",
"rgb": {
"r": 156,
"g": 175,
"b": 136
},
"hsl": {
"h": 89,
"s": 20,
"l": 61
},
"value": "#9CAF88",
"tonalScale": {
"50": {
"hex": "#fcfefb",
"rgb": {
"r": 252,
"g": 254,
"b": 251
}
},
"100": {
"hex": "#f9fcf7",
"rgb": {
"r": 249,
"g": 252,
"b": 247
}
},
"200": {
"hex": "#f3f7ef",
"rgb": {
"r": 243,
"g": 247,
"b": 239
}
},
"300": {
"hex": "#ebf1e4",
"rgb": {
"r": 235,
"g": 241,
"b": 228
}
},
"400": {
"hex": "#e0e8d6",
"rgb": {
"r": 224,
"g": 232,
"b": 214
}
},
"500": {
"hex": "#9CAF88",
"rgb": {
"r": 156,
"g": 175,
"b": 136
}
},
"600": {
"hex": "#acb6a1",
"rgb": {
"r": 172,
"g": 182,
"b": 161
}
},
"700": {
"hex": "#78816f",
"rgb": {
"r": 120,
"g": 129,
"b": 111
}
},
"800": {
"hex": "#484f41",
"rgb": {
"r": 72,
"g": 79,
"b": 65
}
},
"900": {
"hex": "#22261d",
"rgb": {
"r": 34,
"g": 38,
"b": 29
}
},
"950": {
"hex": "#050604",
"rgb": {
"r": 5,
"g": 6,
"b": 4
}
}
}
},
{
"name": "warm-terracotta",
"harmony": "Palette",
"hex": "#C36F4E",
"rgb": {
"r": 195,
"g": 111,
"b": 78
},
"hsl": {
"h": 17,
"s": 49,
"l": 54
},
"value": "#C36F4E",
"tonalScale": {
"50": {
"hex": "#fffbf8",
"rgb": {
"r": 255,
"g": 251,
"b": 248
}
},
"100": {
"hex": "#fff6f0",
"rgb": {
"r": 255,
"g": 246,
"b": 240
}
},
"200": {
"hex": "#ffece2",
"rgb": {
"r": 255,
"g": 236,
"b": 226
}
},
"300": {
"hex": "#fcdfd0",
"rgb": {
"r": 252,
"g": 223,
"b": 208
}
},
"400": {
"hex": "#f6cdb8",
"rgb": {
"r": 246,
"g": 205,
"b": 184
}
},
"500": {
"hex": "#C36F4E",
"rgb": {
"r": 195,
"g": 111,
"b": 78
}
},
"600": {
"hex": "#c1937b",
"rgb": {
"r": 193,
"g": 147,
"b": 123
}
},
"700": {
"hex": "#8c6551",
"rgb": {
"r": 140,
"g": 101,
"b": 81
}
},
"800": {
"hex": "#583b2c",
"rgb": {
"r": 88,
"g": 59,
"b": 44
}
},
"900": {
"hex": "#2c1a10",
"rgb": {
"r": 44,
"g": 26,
"b": 16
}
},
"950": {
"hex": "#090302",
"rgb": {
"r": 9,
"g": 3,
"b": 2
}
}
}
},
{
"name": "creamy-ivory",
"harmony": "Palette",
"hex": "#FBF3E0",
"rgb": {
"r": 251,
"g": 243,
"b": 224
},
"hsl": {
"h": 42,
"s": 77,
"l": 93
},
"value": "#FBF3E0",
"tonalScale": {
"50": {
"hex": "#fffffe",
"rgb": {
"r": 255,
"g": 255,
"b": 254
}
},
"100": {
"hex": "#fffefd",
"rgb": {
"r": 255,
"g": 254,
"b": 253
}
},
"200": {
"hex": "#fffefb",
"rgb": {
"r": 255,
"g": 254,
"b": 251
}
},
"300": {
"hex": "#fffdf8",
"rgb": {
"r": 255,
"g": 253,
"b": 248
}
},
"400": {
"hex": "#fffcf5",
"rgb": {
"r": 255,
"g": 252,
"b": 245
}
},
"500": {
"hex": "#FBF3E0",
"rgb": {
"r": 251,
"g": 243,
"b": 224
}
},
"600": {
"hex": "#d6d3cb",
"rgb": {
"r": 214,
"g": 211,
"b": 203
}
},
"700": {
"hex": "#98958e",
"rgb": {
"r": 152,
"g": 149,
"b": 142
}
},
"800": {
"hex": "#5d5b56",
"rgb": {
"r": 93,
"g": 91,
"b": 86
}
},
"900": {
"hex": "#2e2c29",
"rgb": {
"r": 46,
"g": 44,
"b": 41
}
},
"950": {
"hex": "#090907",
"rgb": {
"r": 9,
"g": 9,
"b": 7
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 butter-yellow,Palette,#F2E2A0,"rgb(242, 226, 160)","hsl(48, 76%, 79%)",#F2E2A0,#fffffb,#fffef7,#fffcf0,#fefae7,#fdf7dd,#F2E2A0,#d3ccac,#969075,#5d5844,#2e2b1e,#090804 golden-honey,Palette,#D9B84A,"rgb(217, 184, 74)","hsl(46, 65%, 57%)",#D9B84A,#fffef5,#fffcee,#fdf8df,#fbf3cb,#f8ebb2,#D9B84A,#caba75,#908347,#5a5021,#2d2607,#090600 sage-green,Palette,#9CAF88,"rgb(156, 175, 136)","hsl(89, 20%, 61%)",#9CAF88,#fcfefb,#f9fcf7,#f3f7ef,#ebf1e4,#e0e8d6,#9CAF88,#acb6a1,#78816f,#484f41,#22261d,#050604 warm-terracotta,Palette,#C36F4E,"rgb(195, 111, 78)","hsl(17, 49%, 54%)",#C36F4E,#fffbf8,#fff6f0,#ffece2,#fcdfd0,#f6cdb8,#C36F4E,#c1937b,#8c6551,#583b2c,#2c1a10,#090302 creamy-ivory,Palette,#FBF3E0,"rgb(251, 243, 224)","hsl(42, 77%, 93%)",#FBF3E0,#fffffe,#fffefd,#fffefb,#fffdf8,#fffcf5,#FBF3E0,#d6d3cb,#98958e,#5d5b56,#2e2c29,#090907
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 242 226 160 butter-yellow 255 255 251 butter-yellow-50 255 254 247 butter-yellow-100 255 252 240 butter-yellow-200 254 250 231 butter-yellow-300 253 247 221 butter-yellow-400 242 226 160 butter-yellow-500 211 204 172 butter-yellow-600 150 144 117 butter-yellow-700 93 88 68 butter-yellow-800 46 43 30 butter-yellow-900 9 8 4 butter-yellow-950 217 184 74 golden-honey 255 254 245 golden-honey-50 255 252 238 golden-honey-100 253 248 223 golden-honey-200 251 243 203 golden-honey-300 248 235 178 golden-honey-400 217 184 74 golden-honey-500 202 186 117 golden-honey-600 144 131 71 golden-honey-700 90 80 33 golden-honey-800 45 38 7 golden-honey-900 9 6 0 golden-honey-950 156 175 136 sage-green 252 254 251 sage-green-50 249 252 247 sage-green-100 243 247 239 sage-green-200 235 241 228 sage-green-300 224 232 214 sage-green-400 156 175 136 sage-green-500 172 182 161 sage-green-600 120 129 111 sage-green-700 72 79 65 sage-green-800 34 38 29 sage-green-900 5 6 4 sage-green-950 195 111 78 warm-terracotta 255 251 248 warm-terracotta-50 255 246 240 warm-terracotta-100 255 236 226 warm-terracotta-200 252 223 208 warm-terracotta-300 246 205 184 warm-terracotta-400 195 111 78 warm-terracotta-500 193 147 123 warm-terracotta-600 140 101 81 warm-terracotta-700 88 59 44 warm-terracotta-800 44 26 16 warm-terracotta-900 9 3 2 warm-terracotta-950 251 243 224 creamy-ivory 255 255 254 creamy-ivory-50 255 254 253 creamy-ivory-100 255 254 251 creamy-ivory-200 255 253 248 creamy-ivory-300 255 252 245 creamy-ivory-400 251 243 224 creamy-ivory-500 214 211 203 creamy-ivory-600 152 149 142 creamy-ivory-700 93 91 86 creamy-ivory-800 46 44 41 creamy-ivory-900 9 9 7 creamy-ivory-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.