← Back to Tools
Pair moody heritage tones with muted gray-navy (#34465B), faded steel blue (#5F7186), wine red (#8A4A52), and aged cream (#DED4C2) for refined editorial menus.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--muted-gray-navy: #34465B;
--muted-gray-navy-50: #f8fbfd;
--muted-gray-navy-100: #f0f4f8;
--muted-gray-navy-200: #dfe6ed;
--muted-gray-navy-300: #c9d4de;
--muted-gray-navy-400: #acbbca;
--muted-gray-navy-500: #34465B;
--muted-gray-navy-600: #677889;
--muted-gray-navy-700: #455361;
--muted-gray-navy-800: #26313c;
--muted-gray-navy-900: #0e151c;
--muted-gray-navy-950: #010304;
--faded-steel-blue: #5F7186;
--faded-steel-blue-50: #fafcfe;
--faded-steel-blue-100: #f4f7fa;
--faded-steel-blue-200: #e9eef3;
--faded-steel-blue-300: #dae1ea;
--faded-steel-blue-400: #c6d0dc;
--faded-steel-blue-500: #5F7186;
--faded-steel-blue-600: #8995a2;
--faded-steel-blue-700: #5e6973;
--faded-steel-blue-800: #373f47;
--faded-steel-blue-900: #181d22;
--faded-steel-blue-950: #030405;
--wine-red: #8A4A52;
--wine-red-50: #fff9fa;
--wine-red-100: #fdf2f4;
--wine-red-200: #f7e5e7;
--wine-red-300: #efd2d6;
--wine-red-400: #e1bac0;
--wine-red-500: #8A4A52;
--wine-red-600: #a67a80;
--wine-red-700: #775358;
--wine-red-800: #4b2f34;
--wine-red-900: #251316;
--wine-red-950: #060203;
--aged-cream: #DED4C2;
--aged-cream-50: #fffefd;
--aged-cream-100: #fefdfb;
--aged-cream-200: #fcfbf7;
--aged-cream-300: #faf7f2;
--aged-cream-400: #f7f3ec;
--aged-cream-500: #DED4C2;
--aged-cream-600: #cbc6be;
--aged-cream-700: #8f8c85;
--aged-cream-800: #585550;
--aged-cream-900: #2b2926;
--aged-cream-950: #080706;
}
$muted-gray-navy: #34465B; $muted-gray-navy-50: #f8fbfd; $muted-gray-navy-100: #f0f4f8; $muted-gray-navy-200: #dfe6ed; $muted-gray-navy-300: #c9d4de; $muted-gray-navy-400: #acbbca; $muted-gray-navy-500: #34465B; $muted-gray-navy-600: #677889; $muted-gray-navy-700: #455361; $muted-gray-navy-800: #26313c; $muted-gray-navy-900: #0e151c; $muted-gray-navy-950: #010304; $faded-steel-blue: #5F7186; $faded-steel-blue-50: #fafcfe; $faded-steel-blue-100: #f4f7fa; $faded-steel-blue-200: #e9eef3; $faded-steel-blue-300: #dae1ea; $faded-steel-blue-400: #c6d0dc; $faded-steel-blue-500: #5F7186; $faded-steel-blue-600: #8995a2; $faded-steel-blue-700: #5e6973; $faded-steel-blue-800: #373f47; $faded-steel-blue-900: #181d22; $faded-steel-blue-950: #030405; $wine-red: #8A4A52; $wine-red-50: #fff9fa; $wine-red-100: #fdf2f4; $wine-red-200: #f7e5e7; $wine-red-300: #efd2d6; $wine-red-400: #e1bac0; $wine-red-500: #8A4A52; $wine-red-600: #a67a80; $wine-red-700: #775358; $wine-red-800: #4b2f34; $wine-red-900: #251316; $wine-red-950: #060203; $aged-cream: #DED4C2; $aged-cream-50: #fffefd; $aged-cream-100: #fefdfb; $aged-cream-200: #fcfbf7; $aged-cream-300: #faf7f2; $aged-cream-400: #f7f3ec; $aged-cream-500: #DED4C2; $aged-cream-600: #cbc6be; $aged-cream-700: #8f8c85; $aged-cream-800: #585550; $aged-cream-900: #2b2926; $aged-cream-950: #080706;
colors: {
'muted-gray-navy': {
50: '#f8fbfd',
100: '#f0f4f8',
200: '#dfe6ed',
300: '#c9d4de',
400: '#acbbca',
500: '#34465B',
600: '#677889',
700: '#455361',
800: '#26313c',
900: '#0e151c',
950: '#010304',
DEFAULT: '#34465B',
},
'faded-steel-blue': {
50: '#fafcfe',
100: '#f4f7fa',
200: '#e9eef3',
300: '#dae1ea',
400: '#c6d0dc',
500: '#5F7186',
600: '#8995a2',
700: '#5e6973',
800: '#373f47',
900: '#181d22',
950: '#030405',
DEFAULT: '#5F7186',
},
'wine-red': {
50: '#fff9fa',
100: '#fdf2f4',
200: '#f7e5e7',
300: '#efd2d6',
400: '#e1bac0',
500: '#8A4A52',
600: '#a67a80',
700: '#775358',
800: '#4b2f34',
900: '#251316',
950: '#060203',
DEFAULT: '#8A4A52',
},
'aged-cream': {
50: '#fffefd',
100: '#fefdfb',
200: '#fcfbf7',
300: '#faf7f2',
400: '#f7f3ec',
500: '#DED4C2',
600: '#cbc6be',
700: '#8f8c85',
800: '#585550',
900: '#2b2926',
950: '#080706',
DEFAULT: '#DED4C2',
},
},
[
{
"name": "muted-gray-navy",
"harmony": "Palette",
"hex": "#34465B",
"rgb": {
"r": 52,
"g": 70,
"b": 91
},
"hsl": {
"h": 212,
"s": 27,
"l": 28
},
"value": "#34465B",
"tonalScale": {
"50": {
"hex": "#f8fbfd",
"rgb": {
"r": 248,
"g": 251,
"b": 253
}
},
"100": {
"hex": "#f0f4f8",
"rgb": {
"r": 240,
"g": 244,
"b": 248
}
},
"200": {
"hex": "#dfe6ed",
"rgb": {
"r": 223,
"g": 230,
"b": 237
}
},
"300": {
"hex": "#c9d4de",
"rgb": {
"r": 201,
"g": 212,
"b": 222
}
},
"400": {
"hex": "#acbbca",
"rgb": {
"r": 172,
"g": 187,
"b": 202
}
},
"500": {
"hex": "#34465B",
"rgb": {
"r": 52,
"g": 70,
"b": 91
}
},
"600": {
"hex": "#677889",
"rgb": {
"r": 103,
"g": 120,
"b": 137
}
},
"700": {
"hex": "#455361",
"rgb": {
"r": 69,
"g": 83,
"b": 97
}
},
"800": {
"hex": "#26313c",
"rgb": {
"r": 38,
"g": 49,
"b": 60
}
},
"900": {
"hex": "#0e151c",
"rgb": {
"r": 14,
"g": 21,
"b": 28
}
},
"950": {
"hex": "#010304",
"rgb": {
"r": 1,
"g": 3,
"b": 4
}
}
}
},
{
"name": "faded-steel-blue",
"harmony": "Palette",
"hex": "#5F7186",
"rgb": {
"r": 95,
"g": 113,
"b": 134
},
"hsl": {
"h": 212,
"s": 17,
"l": 45
},
"value": "#5F7186",
"tonalScale": {
"50": {
"hex": "#fafcfe",
"rgb": {
"r": 250,
"g": 252,
"b": 254
}
},
"100": {
"hex": "#f4f7fa",
"rgb": {
"r": 244,
"g": 247,
"b": 250
}
},
"200": {
"hex": "#e9eef3",
"rgb": {
"r": 233,
"g": 238,
"b": 243
}
},
"300": {
"hex": "#dae1ea",
"rgb": {
"r": 218,
"g": 225,
"b": 234
}
},
"400": {
"hex": "#c6d0dc",
"rgb": {
"r": 198,
"g": 208,
"b": 220
}
},
"500": {
"hex": "#5F7186",
"rgb": {
"r": 95,
"g": 113,
"b": 134
}
},
"600": {
"hex": "#8995a2",
"rgb": {
"r": 137,
"g": 149,
"b": 162
}
},
"700": {
"hex": "#5e6973",
"rgb": {
"r": 94,
"g": 105,
"b": 115
}
},
"800": {
"hex": "#373f47",
"rgb": {
"r": 55,
"g": 63,
"b": 71
}
},
"900": {
"hex": "#181d22",
"rgb": {
"r": 24,
"g": 29,
"b": 34
}
},
"950": {
"hex": "#030405",
"rgb": {
"r": 3,
"g": 4,
"b": 5
}
}
}
},
{
"name": "wine-red",
"harmony": "Palette",
"hex": "#8A4A52",
"rgb": {
"r": 138,
"g": 74,
"b": 82
},
"hsl": {
"h": 353,
"s": 30,
"l": 42
},
"value": "#8A4A52",
"tonalScale": {
"50": {
"hex": "#fff9fa",
"rgb": {
"r": 255,
"g": 249,
"b": 250
}
},
"100": {
"hex": "#fdf2f4",
"rgb": {
"r": 253,
"g": 242,
"b": 244
}
},
"200": {
"hex": "#f7e5e7",
"rgb": {
"r": 247,
"g": 229,
"b": 231
}
},
"300": {
"hex": "#efd2d6",
"rgb": {
"r": 239,
"g": 210,
"b": 214
}
},
"400": {
"hex": "#e1bac0",
"rgb": {
"r": 225,
"g": 186,
"b": 192
}
},
"500": {
"hex": "#8A4A52",
"rgb": {
"r": 138,
"g": 74,
"b": 82
}
},
"600": {
"hex": "#a67a80",
"rgb": {
"r": 166,
"g": 122,
"b": 128
}
},
"700": {
"hex": "#775358",
"rgb": {
"r": 119,
"g": 83,
"b": 88
}
},
"800": {
"hex": "#4b2f34",
"rgb": {
"r": 75,
"g": 47,
"b": 52
}
},
"900": {
"hex": "#251316",
"rgb": {
"r": 37,
"g": 19,
"b": 22
}
},
"950": {
"hex": "#060203",
"rgb": {
"r": 6,
"g": 2,
"b": 3
}
}
}
},
{
"name": "aged-cream",
"harmony": "Palette",
"hex": "#DED4C2",
"rgb": {
"r": 222,
"g": 212,
"b": 194
},
"hsl": {
"h": 39,
"s": 30,
"l": 82
},
"value": "#DED4C2",
"tonalScale": {
"50": {
"hex": "#fffefd",
"rgb": {
"r": 255,
"g": 254,
"b": 253
}
},
"100": {
"hex": "#fefdfb",
"rgb": {
"r": 254,
"g": 253,
"b": 251
}
},
"200": {
"hex": "#fcfbf7",
"rgb": {
"r": 252,
"g": 251,
"b": 247
}
},
"300": {
"hex": "#faf7f2",
"rgb": {
"r": 250,
"g": 247,
"b": 242
}
},
"400": {
"hex": "#f7f3ec",
"rgb": {
"r": 247,
"g": 243,
"b": 236
}
},
"500": {
"hex": "#DED4C2",
"rgb": {
"r": 222,
"g": 212,
"b": 194
}
},
"600": {
"hex": "#cbc6be",
"rgb": {
"r": 203,
"g": 198,
"b": 190
}
},
"700": {
"hex": "#8f8c85",
"rgb": {
"r": 143,
"g": 140,
"b": 133
}
},
"800": {
"hex": "#585550",
"rgb": {
"r": 88,
"g": 85,
"b": 80
}
},
"900": {
"hex": "#2b2926",
"rgb": {
"r": 43,
"g": 41,
"b": 38
}
},
"950": {
"hex": "#080706",
"rgb": {
"r": 8,
"g": 7,
"b": 6
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 muted-gray-navy,Palette,#34465B,"rgb(52, 70, 91)","hsl(212, 27%, 28%)",#34465B,#f8fbfd,#f0f4f8,#dfe6ed,#c9d4de,#acbbca,#34465B,#677889,#455361,#26313c,#0e151c,#010304 faded-steel-blue,Palette,#5F7186,"rgb(95, 113, 134)","hsl(212, 17%, 45%)",#5F7186,#fafcfe,#f4f7fa,#e9eef3,#dae1ea,#c6d0dc,#5F7186,#8995a2,#5e6973,#373f47,#181d22,#030405 wine-red,Palette,#8A4A52,"rgb(138, 74, 82)","hsl(353, 30%, 42%)",#8A4A52,#fff9fa,#fdf2f4,#f7e5e7,#efd2d6,#e1bac0,#8A4A52,#a67a80,#775358,#4b2f34,#251316,#060203 aged-cream,Palette,#DED4C2,"rgb(222, 212, 194)","hsl(39, 30%, 82%)",#DED4C2,#fffefd,#fefdfb,#fcfbf7,#faf7f2,#f7f3ec,#DED4C2,#cbc6be,#8f8c85,#585550,#2b2926,#080706
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 52 70 91 muted-gray-navy 248 251 253 muted-gray-navy-50 240 244 248 muted-gray-navy-100 223 230 237 muted-gray-navy-200 201 212 222 muted-gray-navy-300 172 187 202 muted-gray-navy-400 52 70 91 muted-gray-navy-500 103 120 137 muted-gray-navy-600 69 83 97 muted-gray-navy-700 38 49 60 muted-gray-navy-800 14 21 28 muted-gray-navy-900 1 3 4 muted-gray-navy-950 95 113 134 faded-steel-blue 250 252 254 faded-steel-blue-50 244 247 250 faded-steel-blue-100 233 238 243 faded-steel-blue-200 218 225 234 faded-steel-blue-300 198 208 220 faded-steel-blue-400 95 113 134 faded-steel-blue-500 137 149 162 faded-steel-blue-600 94 105 115 faded-steel-blue-700 55 63 71 faded-steel-blue-800 24 29 34 faded-steel-blue-900 3 4 5 faded-steel-blue-950 138 74 82 wine-red 255 249 250 wine-red-50 253 242 244 wine-red-100 247 229 231 wine-red-200 239 210 214 wine-red-300 225 186 192 wine-red-400 138 74 82 wine-red-500 166 122 128 wine-red-600 119 83 88 wine-red-700 75 47 52 wine-red-800 37 19 22 wine-red-900 6 2 3 wine-red-950 222 212 194 aged-cream 255 254 253 aged-cream-50 254 253 251 aged-cream-100 252 251 247 aged-cream-200 250 247 242 aged-cream-300 247 243 236 aged-cream-400 222 212 194 aged-cream-500 203 198 190 aged-cream-600 143 140 133 aged-cream-700 88 85 80 aged-cream-800 43 41 38 aged-cream-900 8 7 6 aged-cream-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.