← Back to Tools
Design refined fashion editorials and brand identities with this butter and slate palette featuring #F0D060 butter, #FAF3CC cream, #D1A820 amber, #6B7280 slate, and #374151 charcoal.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--butter: #F0D060;
--butter-50: #fffef6;
--butter-100: #fffdf0;
--butter-200: #fffbe3;
--butter-300: #fff7d3;
--butter-400: #fef2be;
--butter-500: #F0D060;
--butter-600: #d3c585;
--butter-700: #978a55;
--butter-800: #5e552b;
--butter-900: #2f290d;
--butter-950: #0a0701;
--slate: #6B7280;
--slate-50: #fbfcfd;
--slate-100: #f6f7f9;
--slate-200: #eceef1;
--slate-300: #dee1e7;
--slate-400: #ccd0d8;
--slate-500: #6B7280;
--slate-600: #91969f;
--slate-700: #656970;
--slate-800: #3c3f44;
--slate-900: #1b1d20;
--slate-950: #040405;
--charcoal: #374151;
--charcoal-50: #f9fafc;
--charcoal-100: #f1f3f6;
--charcoal-200: #e0e4ea;
--charcoal-300: #cbd1da;
--charcoal-400: #afb8c4;
--charcoal-500: #374151;
--charcoal-600: #6a7481;
--charcoal-700: #48505b;
--charcoal-800: #292f37;
--charcoal-900: #101419;
--charcoal-950: #020203;
--cream: #FAF3CC;
--cream-50: #fffffd;
--cream-100: #fffffb;
--cream-200: #fffef7;
--cream-300: #fffdf3;
--cream-400: #fefcee;
--cream-500: #FAF3CC;
--cream-600: #d6d3c2;
--cream-700: #979587;
--cream-800: #5d5b51;
--cream-900: #2e2d26;
--cream-950: #090906;
--amber: #D1A820;
--amber-50: #fffef2;
--amber-100: #fffbe7;
--amber-200: #fdf6d3;
--amber-300: #fbf0b6;
--amber-400: #f6e693;
--amber-500: #D1A820;
--amber-600: #c7b347;
--amber-700: #8f7d18;
--amber-800: #594c00;
--amber-900: #2d2400;
--amber-950: #090600;
}
$butter: #F0D060; $butter-50: #fffef6; $butter-100: #fffdf0; $butter-200: #fffbe3; $butter-300: #fff7d3; $butter-400: #fef2be; $butter-500: #F0D060; $butter-600: #d3c585; $butter-700: #978a55; $butter-800: #5e552b; $butter-900: #2f290d; $butter-950: #0a0701; $slate: #6B7280; $slate-50: #fbfcfd; $slate-100: #f6f7f9; $slate-200: #eceef1; $slate-300: #dee1e7; $slate-400: #ccd0d8; $slate-500: #6B7280; $slate-600: #91969f; $slate-700: #656970; $slate-800: #3c3f44; $slate-900: #1b1d20; $slate-950: #040405; $charcoal: #374151; $charcoal-50: #f9fafc; $charcoal-100: #f1f3f6; $charcoal-200: #e0e4ea; $charcoal-300: #cbd1da; $charcoal-400: #afb8c4; $charcoal-500: #374151; $charcoal-600: #6a7481; $charcoal-700: #48505b; $charcoal-800: #292f37; $charcoal-900: #101419; $charcoal-950: #020203; $cream: #FAF3CC; $cream-50: #fffffd; $cream-100: #fffffb; $cream-200: #fffef7; $cream-300: #fffdf3; $cream-400: #fefcee; $cream-500: #FAF3CC; $cream-600: #d6d3c2; $cream-700: #979587; $cream-800: #5d5b51; $cream-900: #2e2d26; $cream-950: #090906; $amber: #D1A820; $amber-50: #fffef2; $amber-100: #fffbe7; $amber-200: #fdf6d3; $amber-300: #fbf0b6; $amber-400: #f6e693; $amber-500: #D1A820; $amber-600: #c7b347; $amber-700: #8f7d18; $amber-800: #594c00; $amber-900: #2d2400; $amber-950: #090600;
colors: {
'butter': {
50: '#fffef6',
100: '#fffdf0',
200: '#fffbe3',
300: '#fff7d3',
400: '#fef2be',
500: '#F0D060',
600: '#d3c585',
700: '#978a55',
800: '#5e552b',
900: '#2f290d',
950: '#0a0701',
DEFAULT: '#F0D060',
},
'slate': {
50: '#fbfcfd',
100: '#f6f7f9',
200: '#eceef1',
300: '#dee1e7',
400: '#ccd0d8',
500: '#6B7280',
600: '#91969f',
700: '#656970',
800: '#3c3f44',
900: '#1b1d20',
950: '#040405',
DEFAULT: '#6B7280',
},
'charcoal': {
50: '#f9fafc',
100: '#f1f3f6',
200: '#e0e4ea',
300: '#cbd1da',
400: '#afb8c4',
500: '#374151',
600: '#6a7481',
700: '#48505b',
800: '#292f37',
900: '#101419',
950: '#020203',
DEFAULT: '#374151',
},
'cream': {
50: '#fffffd',
100: '#fffffb',
200: '#fffef7',
300: '#fffdf3',
400: '#fefcee',
500: '#FAF3CC',
600: '#d6d3c2',
700: '#979587',
800: '#5d5b51',
900: '#2e2d26',
950: '#090906',
DEFAULT: '#FAF3CC',
},
'amber': {
50: '#fffef2',
100: '#fffbe7',
200: '#fdf6d3',
300: '#fbf0b6',
400: '#f6e693',
500: '#D1A820',
600: '#c7b347',
700: '#8f7d18',
800: '#594c00',
900: '#2d2400',
950: '#090600',
DEFAULT: '#D1A820',
},
},
[
{
"name": "butter",
"harmony": "Palette",
"hex": "#F0D060",
"rgb": {
"r": 240,
"g": 208,
"b": 96
},
"hsl": {
"h": 47,
"s": 83,
"l": 66
},
"value": "#F0D060",
"tonalScale": {
"50": {
"hex": "#fffef6",
"rgb": {
"r": 255,
"g": 254,
"b": 246
}
},
"100": {
"hex": "#fffdf0",
"rgb": {
"r": 255,
"g": 253,
"b": 240
}
},
"200": {
"hex": "#fffbe3",
"rgb": {
"r": 255,
"g": 251,
"b": 227
}
},
"300": {
"hex": "#fff7d3",
"rgb": {
"r": 255,
"g": 247,
"b": 211
}
},
"400": {
"hex": "#fef2be",
"rgb": {
"r": 254,
"g": 242,
"b": 190
}
},
"500": {
"hex": "#F0D060",
"rgb": {
"r": 240,
"g": 208,
"b": 96
}
},
"600": {
"hex": "#d3c585",
"rgb": {
"r": 211,
"g": 197,
"b": 133
}
},
"700": {
"hex": "#978a55",
"rgb": {
"r": 151,
"g": 138,
"b": 85
}
},
"800": {
"hex": "#5e552b",
"rgb": {
"r": 94,
"g": 85,
"b": 43
}
},
"900": {
"hex": "#2f290d",
"rgb": {
"r": 47,
"g": 41,
"b": 13
}
},
"950": {
"hex": "#0a0701",
"rgb": {
"r": 10,
"g": 7,
"b": 1
}
}
}
},
{
"name": "slate",
"harmony": "Palette",
"hex": "#6B7280",
"rgb": {
"r": 107,
"g": 114,
"b": 128
},
"hsl": {
"h": 220,
"s": 9,
"l": 46
},
"value": "#6B7280",
"tonalScale": {
"50": {
"hex": "#fbfcfd",
"rgb": {
"r": 251,
"g": 252,
"b": 253
}
},
"100": {
"hex": "#f6f7f9",
"rgb": {
"r": 246,
"g": 247,
"b": 249
}
},
"200": {
"hex": "#eceef1",
"rgb": {
"r": 236,
"g": 238,
"b": 241
}
},
"300": {
"hex": "#dee1e7",
"rgb": {
"r": 222,
"g": 225,
"b": 231
}
},
"400": {
"hex": "#ccd0d8",
"rgb": {
"r": 204,
"g": 208,
"b": 216
}
},
"500": {
"hex": "#6B7280",
"rgb": {
"r": 107,
"g": 114,
"b": 128
}
},
"600": {
"hex": "#91969f",
"rgb": {
"r": 145,
"g": 150,
"b": 159
}
},
"700": {
"hex": "#656970",
"rgb": {
"r": 101,
"g": 105,
"b": 112
}
},
"800": {
"hex": "#3c3f44",
"rgb": {
"r": 60,
"g": 63,
"b": 68
}
},
"900": {
"hex": "#1b1d20",
"rgb": {
"r": 27,
"g": 29,
"b": 32
}
},
"950": {
"hex": "#040405",
"rgb": {
"r": 4,
"g": 4,
"b": 5
}
}
}
},
{
"name": "charcoal",
"harmony": "Palette",
"hex": "#374151",
"rgb": {
"r": 55,
"g": 65,
"b": 81
},
"hsl": {
"h": 217,
"s": 19,
"l": 27
},
"value": "#374151",
"tonalScale": {
"50": {
"hex": "#f9fafc",
"rgb": {
"r": 249,
"g": 250,
"b": 252
}
},
"100": {
"hex": "#f1f3f6",
"rgb": {
"r": 241,
"g": 243,
"b": 246
}
},
"200": {
"hex": "#e0e4ea",
"rgb": {
"r": 224,
"g": 228,
"b": 234
}
},
"300": {
"hex": "#cbd1da",
"rgb": {
"r": 203,
"g": 209,
"b": 218
}
},
"400": {
"hex": "#afb8c4",
"rgb": {
"r": 175,
"g": 184,
"b": 196
}
},
"500": {
"hex": "#374151",
"rgb": {
"r": 55,
"g": 65,
"b": 81
}
},
"600": {
"hex": "#6a7481",
"rgb": {
"r": 106,
"g": 116,
"b": 129
}
},
"700": {
"hex": "#48505b",
"rgb": {
"r": 72,
"g": 80,
"b": 91
}
},
"800": {
"hex": "#292f37",
"rgb": {
"r": 41,
"g": 47,
"b": 55
}
},
"900": {
"hex": "#101419",
"rgb": {
"r": 16,
"g": 20,
"b": 25
}
},
"950": {
"hex": "#020203",
"rgb": {
"r": 2,
"g": 2,
"b": 3
}
}
}
},
{
"name": "cream",
"harmony": "Palette",
"hex": "#FAF3CC",
"rgb": {
"r": 250,
"g": 243,
"b": 204
},
"hsl": {
"h": 51,
"s": 82,
"l": 89
},
"value": "#FAF3CC",
"tonalScale": {
"50": {
"hex": "#fffffd",
"rgb": {
"r": 255,
"g": 255,
"b": 253
}
},
"100": {
"hex": "#fffffb",
"rgb": {
"r": 255,
"g": 255,
"b": 251
}
},
"200": {
"hex": "#fffef7",
"rgb": {
"r": 255,
"g": 254,
"b": 247
}
},
"300": {
"hex": "#fffdf3",
"rgb": {
"r": 255,
"g": 253,
"b": 243
}
},
"400": {
"hex": "#fefcee",
"rgb": {
"r": 254,
"g": 252,
"b": 238
}
},
"500": {
"hex": "#FAF3CC",
"rgb": {
"r": 250,
"g": 243,
"b": 204
}
},
"600": {
"hex": "#d6d3c2",
"rgb": {
"r": 214,
"g": 211,
"b": 194
}
},
"700": {
"hex": "#979587",
"rgb": {
"r": 151,
"g": 149,
"b": 135
}
},
"800": {
"hex": "#5d5b51",
"rgb": {
"r": 93,
"g": 91,
"b": 81
}
},
"900": {
"hex": "#2e2d26",
"rgb": {
"r": 46,
"g": 45,
"b": 38
}
},
"950": {
"hex": "#090906",
"rgb": {
"r": 9,
"g": 9,
"b": 6
}
}
}
},
{
"name": "amber",
"harmony": "Palette",
"hex": "#D1A820",
"rgb": {
"r": 209,
"g": 168,
"b": 32
},
"hsl": {
"h": 46,
"s": 73,
"l": 47
},
"value": "#D1A820",
"tonalScale": {
"50": {
"hex": "#fffef2",
"rgb": {
"r": 255,
"g": 254,
"b": 242
}
},
"100": {
"hex": "#fffbe7",
"rgb": {
"r": 255,
"g": 251,
"b": 231
}
},
"200": {
"hex": "#fdf6d3",
"rgb": {
"r": 253,
"g": 246,
"b": 211
}
},
"300": {
"hex": "#fbf0b6",
"rgb": {
"r": 251,
"g": 240,
"b": 182
}
},
"400": {
"hex": "#f6e693",
"rgb": {
"r": 246,
"g": 230,
"b": 147
}
},
"500": {
"hex": "#D1A820",
"rgb": {
"r": 209,
"g": 168,
"b": 32
}
},
"600": {
"hex": "#c7b347",
"rgb": {
"r": 199,
"g": 179,
"b": 71
}
},
"700": {
"hex": "#8f7d18",
"rgb": {
"r": 143,
"g": 125,
"b": 24
}
},
"800": {
"hex": "#594c00",
"rgb": {
"r": 89,
"g": 76,
"b": 0
}
},
"900": {
"hex": "#2d2400",
"rgb": {
"r": 45,
"g": 36,
"b": 0
}
},
"950": {
"hex": "#090600",
"rgb": {
"r": 9,
"g": 6,
"b": 0
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 butter,Palette,#F0D060,"rgb(240, 208, 96)","hsl(47, 83%, 66%)",#F0D060,#fffef6,#fffdf0,#fffbe3,#fff7d3,#fef2be,#F0D060,#d3c585,#978a55,#5e552b,#2f290d,#0a0701 slate,Palette,#6B7280,"rgb(107, 114, 128)","hsl(220, 9%, 46%)",#6B7280,#fbfcfd,#f6f7f9,#eceef1,#dee1e7,#ccd0d8,#6B7280,#91969f,#656970,#3c3f44,#1b1d20,#040405 charcoal,Palette,#374151,"rgb(55, 65, 81)","hsl(217, 19%, 27%)",#374151,#f9fafc,#f1f3f6,#e0e4ea,#cbd1da,#afb8c4,#374151,#6a7481,#48505b,#292f37,#101419,#020203 cream,Palette,#FAF3CC,"rgb(250, 243, 204)","hsl(51, 82%, 89%)",#FAF3CC,#fffffd,#fffffb,#fffef7,#fffdf3,#fefcee,#FAF3CC,#d6d3c2,#979587,#5d5b51,#2e2d26,#090906 amber,Palette,#D1A820,"rgb(209, 168, 32)","hsl(46, 73%, 47%)",#D1A820,#fffef2,#fffbe7,#fdf6d3,#fbf0b6,#f6e693,#D1A820,#c7b347,#8f7d18,#594c00,#2d2400,#090600
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 240 208 96 butter 255 254 246 butter-50 255 253 240 butter-100 255 251 227 butter-200 255 247 211 butter-300 254 242 190 butter-400 240 208 96 butter-500 211 197 133 butter-600 151 138 85 butter-700 94 85 43 butter-800 47 41 13 butter-900 10 7 1 butter-950 107 114 128 slate 251 252 253 slate-50 246 247 249 slate-100 236 238 241 slate-200 222 225 231 slate-300 204 208 216 slate-400 107 114 128 slate-500 145 150 159 slate-600 101 105 112 slate-700 60 63 68 slate-800 27 29 32 slate-900 4 4 5 slate-950 55 65 81 charcoal 249 250 252 charcoal-50 241 243 246 charcoal-100 224 228 234 charcoal-200 203 209 218 charcoal-300 175 184 196 charcoal-400 55 65 81 charcoal-500 106 116 129 charcoal-600 72 80 91 charcoal-700 41 47 55 charcoal-800 16 20 25 charcoal-900 2 2 3 charcoal-950 250 243 204 cream 255 255 253 cream-50 255 255 251 cream-100 255 254 247 cream-200 255 253 243 cream-300 254 252 238 cream-400 250 243 204 cream-500 214 211 194 cream-600 151 149 135 cream-700 93 91 81 cream-800 46 45 38 cream-900 9 9 6 cream-950 209 168 32 amber 255 254 242 amber-50 255 251 231 amber-100 253 246 211 amber-200 251 240 182 amber-300 246 230 147 amber-400 209 168 32 amber-500 199 179 71 amber-600 143 125 24 amber-700 89 76 0 amber-800 45 36 0 amber-900 9 6 0 amber-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.