← Back to Tools
Design bold retro 70s-inspired branding with this mustard yellow and navy palette featuring #D4A84B golden mustard, #2C3E50 royal navy, #C9A962 warm gold, and #1B2838 deep navy.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--golden-mustard: #D4A84B;
--golden-mustard-50: #fffdf6;
--golden-mustard-100: #fffbee;
--golden-mustard-200: #fef6e0;
--golden-mustard-300: #fbefcc;
--golden-mustard-400: #f7e5b3;
--golden-mustard-500: #D4A84B;
--golden-mustard-600: #c8b277;
--golden-mustard-700: #8f7d4a;
--golden-mustard-800: #594c23;
--golden-mustard-900: #2c2409;
--golden-mustard-950: #090601;
--royal-navy: #2C3E50;
--royal-navy-50: #f8fafd;
--royal-navy-100: #eef3f7;
--royal-navy-200: #dce4eb;
--royal-navy-300: #c5d1db;
--royal-navy-400: #a6b6c4;
--royal-navy-500: #2C3E50;
--royal-navy-600: #5f7181;
--royal-navy-700: #3f4f5b;
--royal-navy-800: #222e38;
--royal-navy-900: #0c131a;
--royal-navy-950: #010203;
--warm-gold: #C9A962;
--warm-gold-50: #fffdf8;
--warm-gold-100: #fefbf2;
--warm-gold-200: #fcf6e6;
--warm-gold-300: #f8efd6;
--warm-gold-400: #f3e5c1;
--warm-gold-500: #C9A962;
--warm-gold-600: #c3b388;
--warm-gold-700: #8b7e5a;
--warm-gold-800: #564c30;
--warm-gold-900: #2a2412;
--warm-gold-950: #080602;
--deep-navy: #1B2838;
--deep-navy-50: #f7f9fc;
--deep-navy-100: #ecf0f4;
--deep-navy-200: #d7dee5;
--deep-navy-300: #bbc6d2;
--deep-navy-400: #97a6b6;
--deep-navy-500: #1B2838;
--deep-navy-600: #4b5c6d;
--deep-navy-700: #303f4d;
--deep-navy-800: #19242f;
--deep-navy-900: #070e15;
--deep-navy-950: #010103;
}
$golden-mustard: #D4A84B; $golden-mustard-50: #fffdf6; $golden-mustard-100: #fffbee; $golden-mustard-200: #fef6e0; $golden-mustard-300: #fbefcc; $golden-mustard-400: #f7e5b3; $golden-mustard-500: #D4A84B; $golden-mustard-600: #c8b277; $golden-mustard-700: #8f7d4a; $golden-mustard-800: #594c23; $golden-mustard-900: #2c2409; $golden-mustard-950: #090601; $royal-navy: #2C3E50; $royal-navy-50: #f8fafd; $royal-navy-100: #eef3f7; $royal-navy-200: #dce4eb; $royal-navy-300: #c5d1db; $royal-navy-400: #a6b6c4; $royal-navy-500: #2C3E50; $royal-navy-600: #5f7181; $royal-navy-700: #3f4f5b; $royal-navy-800: #222e38; $royal-navy-900: #0c131a; $royal-navy-950: #010203; $warm-gold: #C9A962; $warm-gold-50: #fffdf8; $warm-gold-100: #fefbf2; $warm-gold-200: #fcf6e6; $warm-gold-300: #f8efd6; $warm-gold-400: #f3e5c1; $warm-gold-500: #C9A962; $warm-gold-600: #c3b388; $warm-gold-700: #8b7e5a; $warm-gold-800: #564c30; $warm-gold-900: #2a2412; $warm-gold-950: #080602; $deep-navy: #1B2838; $deep-navy-50: #f7f9fc; $deep-navy-100: #ecf0f4; $deep-navy-200: #d7dee5; $deep-navy-300: #bbc6d2; $deep-navy-400: #97a6b6; $deep-navy-500: #1B2838; $deep-navy-600: #4b5c6d; $deep-navy-700: #303f4d; $deep-navy-800: #19242f; $deep-navy-900: #070e15; $deep-navy-950: #010103;
colors: {
'golden-mustard': {
50: '#fffdf6',
100: '#fffbee',
200: '#fef6e0',
300: '#fbefcc',
400: '#f7e5b3',
500: '#D4A84B',
600: '#c8b277',
700: '#8f7d4a',
800: '#594c23',
900: '#2c2409',
950: '#090601',
DEFAULT: '#D4A84B',
},
'royal-navy': {
50: '#f8fafd',
100: '#eef3f7',
200: '#dce4eb',
300: '#c5d1db',
400: '#a6b6c4',
500: '#2C3E50',
600: '#5f7181',
700: '#3f4f5b',
800: '#222e38',
900: '#0c131a',
950: '#010203',
DEFAULT: '#2C3E50',
},
'warm-gold': {
50: '#fffdf8',
100: '#fefbf2',
200: '#fcf6e6',
300: '#f8efd6',
400: '#f3e5c1',
500: '#C9A962',
600: '#c3b388',
700: '#8b7e5a',
800: '#564c30',
900: '#2a2412',
950: '#080602',
DEFAULT: '#C9A962',
},
'deep-navy': {
50: '#f7f9fc',
100: '#ecf0f4',
200: '#d7dee5',
300: '#bbc6d2',
400: '#97a6b6',
500: '#1B2838',
600: '#4b5c6d',
700: '#303f4d',
800: '#19242f',
900: '#070e15',
950: '#010103',
DEFAULT: '#1B2838',
},
},
[
{
"name": "golden-mustard",
"harmony": "Palette",
"hex": "#D4A84B",
"rgb": {
"r": 212,
"g": 168,
"b": 75
},
"hsl": {
"h": 41,
"s": 61,
"l": 56
},
"value": "#D4A84B",
"tonalScale": {
"50": {
"hex": "#fffdf6",
"rgb": {
"r": 255,
"g": 253,
"b": 246
}
},
"100": {
"hex": "#fffbee",
"rgb": {
"r": 255,
"g": 251,
"b": 238
}
},
"200": {
"hex": "#fef6e0",
"rgb": {
"r": 254,
"g": 246,
"b": 224
}
},
"300": {
"hex": "#fbefcc",
"rgb": {
"r": 251,
"g": 239,
"b": 204
}
},
"400": {
"hex": "#f7e5b3",
"rgb": {
"r": 247,
"g": 229,
"b": 179
}
},
"500": {
"hex": "#D4A84B",
"rgb": {
"r": 212,
"g": 168,
"b": 75
}
},
"600": {
"hex": "#c8b277",
"rgb": {
"r": 200,
"g": 178,
"b": 119
}
},
"700": {
"hex": "#8f7d4a",
"rgb": {
"r": 143,
"g": 125,
"b": 74
}
},
"800": {
"hex": "#594c23",
"rgb": {
"r": 89,
"g": 76,
"b": 35
}
},
"900": {
"hex": "#2c2409",
"rgb": {
"r": 44,
"g": 36,
"b": 9
}
},
"950": {
"hex": "#090601",
"rgb": {
"r": 9,
"g": 6,
"b": 1
}
}
}
},
{
"name": "royal-navy",
"harmony": "Palette",
"hex": "#2C3E50",
"rgb": {
"r": 44,
"g": 62,
"b": 80
},
"hsl": {
"h": 210,
"s": 29,
"l": 24
},
"value": "#2C3E50",
"tonalScale": {
"50": {
"hex": "#f8fafd",
"rgb": {
"r": 248,
"g": 250,
"b": 253
}
},
"100": {
"hex": "#eef3f7",
"rgb": {
"r": 238,
"g": 243,
"b": 247
}
},
"200": {
"hex": "#dce4eb",
"rgb": {
"r": 220,
"g": 228,
"b": 235
}
},
"300": {
"hex": "#c5d1db",
"rgb": {
"r": 197,
"g": 209,
"b": 219
}
},
"400": {
"hex": "#a6b6c4",
"rgb": {
"r": 166,
"g": 182,
"b": 196
}
},
"500": {
"hex": "#2C3E50",
"rgb": {
"r": 44,
"g": 62,
"b": 80
}
},
"600": {
"hex": "#5f7181",
"rgb": {
"r": 95,
"g": 113,
"b": 129
}
},
"700": {
"hex": "#3f4f5b",
"rgb": {
"r": 63,
"g": 79,
"b": 91
}
},
"800": {
"hex": "#222e38",
"rgb": {
"r": 34,
"g": 46,
"b": 56
}
},
"900": {
"hex": "#0c131a",
"rgb": {
"r": 12,
"g": 19,
"b": 26
}
},
"950": {
"hex": "#010203",
"rgb": {
"r": 1,
"g": 2,
"b": 3
}
}
}
},
{
"name": "warm-gold",
"harmony": "Palette",
"hex": "#C9A962",
"rgb": {
"r": 201,
"g": 169,
"b": 98
},
"hsl": {
"h": 41,
"s": 49,
"l": 59
},
"value": "#C9A962",
"tonalScale": {
"50": {
"hex": "#fffdf8",
"rgb": {
"r": 255,
"g": 253,
"b": 248
}
},
"100": {
"hex": "#fefbf2",
"rgb": {
"r": 254,
"g": 251,
"b": 242
}
},
"200": {
"hex": "#fcf6e6",
"rgb": {
"r": 252,
"g": 246,
"b": 230
}
},
"300": {
"hex": "#f8efd6",
"rgb": {
"r": 248,
"g": 239,
"b": 214
}
},
"400": {
"hex": "#f3e5c1",
"rgb": {
"r": 243,
"g": 229,
"b": 193
}
},
"500": {
"hex": "#C9A962",
"rgb": {
"r": 201,
"g": 169,
"b": 98
}
},
"600": {
"hex": "#c3b388",
"rgb": {
"r": 195,
"g": 179,
"b": 136
}
},
"700": {
"hex": "#8b7e5a",
"rgb": {
"r": 139,
"g": 126,
"b": 90
}
},
"800": {
"hex": "#564c30",
"rgb": {
"r": 86,
"g": 76,
"b": 48
}
},
"900": {
"hex": "#2a2412",
"rgb": {
"r": 42,
"g": 36,
"b": 18
}
},
"950": {
"hex": "#080602",
"rgb": {
"r": 8,
"g": 6,
"b": 2
}
}
}
},
{
"name": "deep-navy",
"harmony": "Palette",
"hex": "#1B2838",
"rgb": {
"r": 27,
"g": 40,
"b": 56
},
"hsl": {
"h": 213,
"s": 35,
"l": 16
},
"value": "#1B2838",
"tonalScale": {
"50": {
"hex": "#f7f9fc",
"rgb": {
"r": 247,
"g": 249,
"b": 252
}
},
"100": {
"hex": "#ecf0f4",
"rgb": {
"r": 236,
"g": 240,
"b": 244
}
},
"200": {
"hex": "#d7dee5",
"rgb": {
"r": 215,
"g": 222,
"b": 229
}
},
"300": {
"hex": "#bbc6d2",
"rgb": {
"r": 187,
"g": 198,
"b": 210
}
},
"400": {
"hex": "#97a6b6",
"rgb": {
"r": 151,
"g": 166,
"b": 182
}
},
"500": {
"hex": "#1B2838",
"rgb": {
"r": 27,
"g": 40,
"b": 56
}
},
"600": {
"hex": "#4b5c6d",
"rgb": {
"r": 75,
"g": 92,
"b": 109
}
},
"700": {
"hex": "#303f4d",
"rgb": {
"r": 48,
"g": 63,
"b": 77
}
},
"800": {
"hex": "#19242f",
"rgb": {
"r": 25,
"g": 36,
"b": 47
}
},
"900": {
"hex": "#070e15",
"rgb": {
"r": 7,
"g": 14,
"b": 21
}
},
"950": {
"hex": "#010103",
"rgb": {
"r": 1,
"g": 1,
"b": 3
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 golden-mustard,Palette,#D4A84B,"rgb(212, 168, 75)","hsl(41, 61%, 56%)",#D4A84B,#fffdf6,#fffbee,#fef6e0,#fbefcc,#f7e5b3,#D4A84B,#c8b277,#8f7d4a,#594c23,#2c2409,#090601 royal-navy,Palette,#2C3E50,"rgb(44, 62, 80)","hsl(210, 29%, 24%)",#2C3E50,#f8fafd,#eef3f7,#dce4eb,#c5d1db,#a6b6c4,#2C3E50,#5f7181,#3f4f5b,#222e38,#0c131a,#010203 warm-gold,Palette,#C9A962,"rgb(201, 169, 98)","hsl(41, 49%, 59%)",#C9A962,#fffdf8,#fefbf2,#fcf6e6,#f8efd6,#f3e5c1,#C9A962,#c3b388,#8b7e5a,#564c30,#2a2412,#080602 deep-navy,Palette,#1B2838,"rgb(27, 40, 56)","hsl(213, 35%, 16%)",#1B2838,#f7f9fc,#ecf0f4,#d7dee5,#bbc6d2,#97a6b6,#1B2838,#4b5c6d,#303f4d,#19242f,#070e15,#010103
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 212 168 75 golden-mustard 255 253 246 golden-mustard-50 255 251 238 golden-mustard-100 254 246 224 golden-mustard-200 251 239 204 golden-mustard-300 247 229 179 golden-mustard-400 212 168 75 golden-mustard-500 200 178 119 golden-mustard-600 143 125 74 golden-mustard-700 89 76 35 golden-mustard-800 44 36 9 golden-mustard-900 9 6 1 golden-mustard-950 44 62 80 royal-navy 248 250 253 royal-navy-50 238 243 247 royal-navy-100 220 228 235 royal-navy-200 197 209 219 royal-navy-300 166 182 196 royal-navy-400 44 62 80 royal-navy-500 95 113 129 royal-navy-600 63 79 91 royal-navy-700 34 46 56 royal-navy-800 12 19 26 royal-navy-900 1 2 3 royal-navy-950 201 169 98 warm-gold 255 253 248 warm-gold-50 254 251 242 warm-gold-100 252 246 230 warm-gold-200 248 239 214 warm-gold-300 243 229 193 warm-gold-400 201 169 98 warm-gold-500 195 179 136 warm-gold-600 139 126 90 warm-gold-700 86 76 48 warm-gold-800 42 36 18 warm-gold-900 8 6 2 warm-gold-950 27 40 56 deep-navy 247 249 252 deep-navy-50 236 240 244 deep-navy-100 215 222 229 deep-navy-200 187 198 210 deep-navy-300 151 166 182 deep-navy-400 27 40 56 deep-navy-500 75 92 109 deep-navy-600 48 63 77 deep-navy-700 25 36 47 deep-navy-800 7 14 21 deep-navy-900 1 1 3 deep-navy-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.