← Back to Tools
Design joyful, sunny 2025 branding with this butter yellow palette featuring #F5D17C butter yellow, #FAE7B5 pale butter cream, #FFE9A0 golden cream, #D9A83C warm honey, and #8A6A1F toasted amber.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--butter-yellow: #F5D17C;
--butter-yellow-50: #fffef8;
--butter-yellow-100: #fffdf3;
--butter-yellow-200: #fffaea;
--butter-yellow-300: #fff7dd;
--butter-yellow-400: #fff2cd;
--butter-yellow-500: #F5D17C;
--butter-yellow-600: #d5c598;
--butter-yellow-700: #988b65;
--butter-yellow-800: #5f5538;
--butter-yellow-900: #2f2916;
--butter-yellow-950: #0a0702;
--pale-butter-cream: #FAE7B5;
--pale-butter-cream-50: #fffffc;
--pale-butter-cream-100: #fffef9;
--pale-butter-cream-200: #fffdf4;
--pale-butter-cream-300: #fffbed;
--pale-butter-cream-400: #fff9e5;
--pale-butter-cream-500: #FAE7B5;
--pale-butter-cream-600: #d6ceb7;
--pale-butter-cream-700: #98917e;
--pale-butter-cream-800: #5e594a;
--pale-butter-cream-900: #2e2b22;
--pale-butter-cream-950: #090805;
--golden-cream: #FFE9A0;
--golden-cream-50: #fffffa;
--golden-cream-100: #fffef7;
--golden-cream-200: #fffdf0;
--golden-cream-300: #fffbe7;
--golden-cream-400: #fff9dc;
--golden-cream-500: #FFE9A0;
--golden-cream-600: #d8cfac;
--golden-cream-700: #9a9275;
--golden-cream-800: #5f5943;
--golden-cream-900: #2f2b1d;
--golden-cream-950: #0a0804;
--warm-honey: #D9A83C;
--warm-honey-50: #fffdf4;
--warm-honey-100: #fffbec;
--warm-honey-200: #fef6db;
--warm-honey-300: #fdefc5;
--warm-honey-400: #f9e5a9;
--warm-honey-500: #D9A83C;
--warm-honey-600: #cab269;
--warm-honey-700: #917d3d;
--warm-honey-800: #5b4b18;
--warm-honey-900: #2d2302;
--warm-honey-950: #090600;
--toasted-amber: #8A6A1F;
--toasted-amber-50: #fefcf3;
--toasted-amber-100: #fbf7e8;
--toasted-amber-200: #f4edd3;
--toasted-amber-300: #ebe0b7;
--toasted-amber-400: #decd94;
--toasted-amber-500: #8A6A1F;
--toasted-amber-600: #a5914b;
--toasted-amber-700: #766527;
--toasted-amber-800: #493c07;
--toasted-amber-900: #231b00;
--toasted-amber-950: #060400;
}
$butter-yellow: #F5D17C; $butter-yellow-50: #fffef8; $butter-yellow-100: #fffdf3; $butter-yellow-200: #fffaea; $butter-yellow-300: #fff7dd; $butter-yellow-400: #fff2cd; $butter-yellow-500: #F5D17C; $butter-yellow-600: #d5c598; $butter-yellow-700: #988b65; $butter-yellow-800: #5f5538; $butter-yellow-900: #2f2916; $butter-yellow-950: #0a0702; $pale-butter-cream: #FAE7B5; $pale-butter-cream-50: #fffffc; $pale-butter-cream-100: #fffef9; $pale-butter-cream-200: #fffdf4; $pale-butter-cream-300: #fffbed; $pale-butter-cream-400: #fff9e5; $pale-butter-cream-500: #FAE7B5; $pale-butter-cream-600: #d6ceb7; $pale-butter-cream-700: #98917e; $pale-butter-cream-800: #5e594a; $pale-butter-cream-900: #2e2b22; $pale-butter-cream-950: #090805; $golden-cream: #FFE9A0; $golden-cream-50: #fffffa; $golden-cream-100: #fffef7; $golden-cream-200: #fffdf0; $golden-cream-300: #fffbe7; $golden-cream-400: #fff9dc; $golden-cream-500: #FFE9A0; $golden-cream-600: #d8cfac; $golden-cream-700: #9a9275; $golden-cream-800: #5f5943; $golden-cream-900: #2f2b1d; $golden-cream-950: #0a0804; $warm-honey: #D9A83C; $warm-honey-50: #fffdf4; $warm-honey-100: #fffbec; $warm-honey-200: #fef6db; $warm-honey-300: #fdefc5; $warm-honey-400: #f9e5a9; $warm-honey-500: #D9A83C; $warm-honey-600: #cab269; $warm-honey-700: #917d3d; $warm-honey-800: #5b4b18; $warm-honey-900: #2d2302; $warm-honey-950: #090600; $toasted-amber: #8A6A1F; $toasted-amber-50: #fefcf3; $toasted-amber-100: #fbf7e8; $toasted-amber-200: #f4edd3; $toasted-amber-300: #ebe0b7; $toasted-amber-400: #decd94; $toasted-amber-500: #8A6A1F; $toasted-amber-600: #a5914b; $toasted-amber-700: #766527; $toasted-amber-800: #493c07; $toasted-amber-900: #231b00; $toasted-amber-950: #060400;
colors: {
'butter-yellow': {
50: '#fffef8',
100: '#fffdf3',
200: '#fffaea',
300: '#fff7dd',
400: '#fff2cd',
500: '#F5D17C',
600: '#d5c598',
700: '#988b65',
800: '#5f5538',
900: '#2f2916',
950: '#0a0702',
DEFAULT: '#F5D17C',
},
'pale-butter-cream': {
50: '#fffffc',
100: '#fffef9',
200: '#fffdf4',
300: '#fffbed',
400: '#fff9e5',
500: '#FAE7B5',
600: '#d6ceb7',
700: '#98917e',
800: '#5e594a',
900: '#2e2b22',
950: '#090805',
DEFAULT: '#FAE7B5',
},
'golden-cream': {
50: '#fffffa',
100: '#fffef7',
200: '#fffdf0',
300: '#fffbe7',
400: '#fff9dc',
500: '#FFE9A0',
600: '#d8cfac',
700: '#9a9275',
800: '#5f5943',
900: '#2f2b1d',
950: '#0a0804',
DEFAULT: '#FFE9A0',
},
'warm-honey': {
50: '#fffdf4',
100: '#fffbec',
200: '#fef6db',
300: '#fdefc5',
400: '#f9e5a9',
500: '#D9A83C',
600: '#cab269',
700: '#917d3d',
800: '#5b4b18',
900: '#2d2302',
950: '#090600',
DEFAULT: '#D9A83C',
},
'toasted-amber': {
50: '#fefcf3',
100: '#fbf7e8',
200: '#f4edd3',
300: '#ebe0b7',
400: '#decd94',
500: '#8A6A1F',
600: '#a5914b',
700: '#766527',
800: '#493c07',
900: '#231b00',
950: '#060400',
DEFAULT: '#8A6A1F',
},
},
[
{
"name": "butter-yellow",
"harmony": "Palette",
"hex": "#F5D17C",
"rgb": {
"r": 245,
"g": 209,
"b": 124
},
"hsl": {
"h": 42,
"s": 86,
"l": 72
},
"value": "#F5D17C",
"tonalScale": {
"50": {
"hex": "#fffef8",
"rgb": {
"r": 255,
"g": 254,
"b": 248
}
},
"100": {
"hex": "#fffdf3",
"rgb": {
"r": 255,
"g": 253,
"b": 243
}
},
"200": {
"hex": "#fffaea",
"rgb": {
"r": 255,
"g": 250,
"b": 234
}
},
"300": {
"hex": "#fff7dd",
"rgb": {
"r": 255,
"g": 247,
"b": 221
}
},
"400": {
"hex": "#fff2cd",
"rgb": {
"r": 255,
"g": 242,
"b": 205
}
},
"500": {
"hex": "#F5D17C",
"rgb": {
"r": 245,
"g": 209,
"b": 124
}
},
"600": {
"hex": "#d5c598",
"rgb": {
"r": 213,
"g": 197,
"b": 152
}
},
"700": {
"hex": "#988b65",
"rgb": {
"r": 152,
"g": 139,
"b": 101
}
},
"800": {
"hex": "#5f5538",
"rgb": {
"r": 95,
"g": 85,
"b": 56
}
},
"900": {
"hex": "#2f2916",
"rgb": {
"r": 47,
"g": 41,
"b": 22
}
},
"950": {
"hex": "#0a0702",
"rgb": {
"r": 10,
"g": 7,
"b": 2
}
}
}
},
{
"name": "pale-butter-cream",
"harmony": "Palette",
"hex": "#FAE7B5",
"rgb": {
"r": 250,
"g": 231,
"b": 181
},
"hsl": {
"h": 43,
"s": 87,
"l": 85
},
"value": "#FAE7B5",
"tonalScale": {
"50": {
"hex": "#fffffc",
"rgb": {
"r": 255,
"g": 255,
"b": 252
}
},
"100": {
"hex": "#fffef9",
"rgb": {
"r": 255,
"g": 254,
"b": 249
}
},
"200": {
"hex": "#fffdf4",
"rgb": {
"r": 255,
"g": 253,
"b": 244
}
},
"300": {
"hex": "#fffbed",
"rgb": {
"r": 255,
"g": 251,
"b": 237
}
},
"400": {
"hex": "#fff9e5",
"rgb": {
"r": 255,
"g": 249,
"b": 229
}
},
"500": {
"hex": "#FAE7B5",
"rgb": {
"r": 250,
"g": 231,
"b": 181
}
},
"600": {
"hex": "#d6ceb7",
"rgb": {
"r": 214,
"g": 206,
"b": 183
}
},
"700": {
"hex": "#98917e",
"rgb": {
"r": 152,
"g": 145,
"b": 126
}
},
"800": {
"hex": "#5e594a",
"rgb": {
"r": 94,
"g": 89,
"b": 74
}
},
"900": {
"hex": "#2e2b22",
"rgb": {
"r": 46,
"g": 43,
"b": 34
}
},
"950": {
"hex": "#090805",
"rgb": {
"r": 9,
"g": 8,
"b": 5
}
}
}
},
{
"name": "golden-cream",
"harmony": "Palette",
"hex": "#FFE9A0",
"rgb": {
"r": 255,
"g": 233,
"b": 160
},
"hsl": {
"h": 46,
"s": 100,
"l": 81
},
"value": "#FFE9A0",
"tonalScale": {
"50": {
"hex": "#fffffa",
"rgb": {
"r": 255,
"g": 255,
"b": 250
}
},
"100": {
"hex": "#fffef7",
"rgb": {
"r": 255,
"g": 254,
"b": 247
}
},
"200": {
"hex": "#fffdf0",
"rgb": {
"r": 255,
"g": 253,
"b": 240
}
},
"300": {
"hex": "#fffbe7",
"rgb": {
"r": 255,
"g": 251,
"b": 231
}
},
"400": {
"hex": "#fff9dc",
"rgb": {
"r": 255,
"g": 249,
"b": 220
}
},
"500": {
"hex": "#FFE9A0",
"rgb": {
"r": 255,
"g": 233,
"b": 160
}
},
"600": {
"hex": "#d8cfac",
"rgb": {
"r": 216,
"g": 207,
"b": 172
}
},
"700": {
"hex": "#9a9275",
"rgb": {
"r": 154,
"g": 146,
"b": 117
}
},
"800": {
"hex": "#5f5943",
"rgb": {
"r": 95,
"g": 89,
"b": 67
}
},
"900": {
"hex": "#2f2b1d",
"rgb": {
"r": 47,
"g": 43,
"b": 29
}
},
"950": {
"hex": "#0a0804",
"rgb": {
"r": 10,
"g": 8,
"b": 4
}
}
}
},
{
"name": "warm-honey",
"harmony": "Palette",
"hex": "#D9A83C",
"rgb": {
"r": 217,
"g": 168,
"b": 60
},
"hsl": {
"h": 41,
"s": 67,
"l": 54
},
"value": "#D9A83C",
"tonalScale": {
"50": {
"hex": "#fffdf4",
"rgb": {
"r": 255,
"g": 253,
"b": 244
}
},
"100": {
"hex": "#fffbec",
"rgb": {
"r": 255,
"g": 251,
"b": 236
}
},
"200": {
"hex": "#fef6db",
"rgb": {
"r": 254,
"g": 246,
"b": 219
}
},
"300": {
"hex": "#fdefc5",
"rgb": {
"r": 253,
"g": 239,
"b": 197
}
},
"400": {
"hex": "#f9e5a9",
"rgb": {
"r": 249,
"g": 229,
"b": 169
}
},
"500": {
"hex": "#D9A83C",
"rgb": {
"r": 217,
"g": 168,
"b": 60
}
},
"600": {
"hex": "#cab269",
"rgb": {
"r": 202,
"g": 178,
"b": 105
}
},
"700": {
"hex": "#917d3d",
"rgb": {
"r": 145,
"g": 125,
"b": 61
}
},
"800": {
"hex": "#5b4b18",
"rgb": {
"r": 91,
"g": 75,
"b": 24
}
},
"900": {
"hex": "#2d2302",
"rgb": {
"r": 45,
"g": 35,
"b": 2
}
},
"950": {
"hex": "#090600",
"rgb": {
"r": 9,
"g": 6,
"b": 0
}
}
}
},
{
"name": "toasted-amber",
"harmony": "Palette",
"hex": "#8A6A1F",
"rgb": {
"r": 138,
"g": 106,
"b": 31
},
"hsl": {
"h": 42,
"s": 63,
"l": 33
},
"value": "#8A6A1F",
"tonalScale": {
"50": {
"hex": "#fefcf3",
"rgb": {
"r": 254,
"g": 252,
"b": 243
}
},
"100": {
"hex": "#fbf7e8",
"rgb": {
"r": 251,
"g": 247,
"b": 232
}
},
"200": {
"hex": "#f4edd3",
"rgb": {
"r": 244,
"g": 237,
"b": 211
}
},
"300": {
"hex": "#ebe0b7",
"rgb": {
"r": 235,
"g": 224,
"b": 183
}
},
"400": {
"hex": "#decd94",
"rgb": {
"r": 222,
"g": 205,
"b": 148
}
},
"500": {
"hex": "#8A6A1F",
"rgb": {
"r": 138,
"g": 106,
"b": 31
}
},
"600": {
"hex": "#a5914b",
"rgb": {
"r": 165,
"g": 145,
"b": 75
}
},
"700": {
"hex": "#766527",
"rgb": {
"r": 118,
"g": 101,
"b": 39
}
},
"800": {
"hex": "#493c07",
"rgb": {
"r": 73,
"g": 60,
"b": 7
}
},
"900": {
"hex": "#231b00",
"rgb": {
"r": 35,
"g": 27,
"b": 0
}
},
"950": {
"hex": "#060400",
"rgb": {
"r": 6,
"g": 4,
"b": 0
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 butter-yellow,Palette,#F5D17C,"rgb(245, 209, 124)","hsl(42, 86%, 72%)",#F5D17C,#fffef8,#fffdf3,#fffaea,#fff7dd,#fff2cd,#F5D17C,#d5c598,#988b65,#5f5538,#2f2916,#0a0702 pale-butter-cream,Palette,#FAE7B5,"rgb(250, 231, 181)","hsl(43, 87%, 85%)",#FAE7B5,#fffffc,#fffef9,#fffdf4,#fffbed,#fff9e5,#FAE7B5,#d6ceb7,#98917e,#5e594a,#2e2b22,#090805 golden-cream,Palette,#FFE9A0,"rgb(255, 233, 160)","hsl(46, 100%, 81%)",#FFE9A0,#fffffa,#fffef7,#fffdf0,#fffbe7,#fff9dc,#FFE9A0,#d8cfac,#9a9275,#5f5943,#2f2b1d,#0a0804 warm-honey,Palette,#D9A83C,"rgb(217, 168, 60)","hsl(41, 67%, 54%)",#D9A83C,#fffdf4,#fffbec,#fef6db,#fdefc5,#f9e5a9,#D9A83C,#cab269,#917d3d,#5b4b18,#2d2302,#090600 toasted-amber,Palette,#8A6A1F,"rgb(138, 106, 31)","hsl(42, 63%, 33%)",#8A6A1F,#fefcf3,#fbf7e8,#f4edd3,#ebe0b7,#decd94,#8A6A1F,#a5914b,#766527,#493c07,#231b00,#060400
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 245 209 124 butter-yellow 255 254 248 butter-yellow-50 255 253 243 butter-yellow-100 255 250 234 butter-yellow-200 255 247 221 butter-yellow-300 255 242 205 butter-yellow-400 245 209 124 butter-yellow-500 213 197 152 butter-yellow-600 152 139 101 butter-yellow-700 95 85 56 butter-yellow-800 47 41 22 butter-yellow-900 10 7 2 butter-yellow-950 250 231 181 pale-butter-cream 255 255 252 pale-butter-cream-50 255 254 249 pale-butter-cream-100 255 253 244 pale-butter-cream-200 255 251 237 pale-butter-cream-300 255 249 229 pale-butter-cream-400 250 231 181 pale-butter-cream-500 214 206 183 pale-butter-cream-600 152 145 126 pale-butter-cream-700 94 89 74 pale-butter-cream-800 46 43 34 pale-butter-cream-900 9 8 5 pale-butter-cream-950 255 233 160 golden-cream 255 255 250 golden-cream-50 255 254 247 golden-cream-100 255 253 240 golden-cream-200 255 251 231 golden-cream-300 255 249 220 golden-cream-400 255 233 160 golden-cream-500 216 207 172 golden-cream-600 154 146 117 golden-cream-700 95 89 67 golden-cream-800 47 43 29 golden-cream-900 10 8 4 golden-cream-950 217 168 60 warm-honey 255 253 244 warm-honey-50 255 251 236 warm-honey-100 254 246 219 warm-honey-200 253 239 197 warm-honey-300 249 229 169 warm-honey-400 217 168 60 warm-honey-500 202 178 105 warm-honey-600 145 125 61 warm-honey-700 91 75 24 warm-honey-800 45 35 2 warm-honey-900 9 6 0 warm-honey-950 138 106 31 toasted-amber 254 252 243 toasted-amber-50 251 247 232 toasted-amber-100 244 237 211 toasted-amber-200 235 224 183 toasted-amber-300 222 205 148 toasted-amber-400 138 106 31 toasted-amber-500 165 145 75 toasted-amber-600 118 101 39 toasted-amber-700 73 60 7 toasted-amber-800 35 27 0 toasted-amber-900 6 4 0 toasted-amber-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.