← Back to Tools
Design timeless heritage navy color combos with deep ink navy (#0B1F3B), warm ivory cream (#F4EFE6), and brass gold accents (#B08D57), paired with charcoal and steel gray for classic contrast.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--deep-ink-navy: #0B1F3B;
--deep-ink-navy-50: #f4f9fe;
--deep-ink-navy-100: #e6eff7;
--deep-ink-navy-200: #cddbe9;
--deep-ink-navy-300: #abc2d7;
--deep-ink-navy-400: #7f9fbc;
--deep-ink-navy-500: #0B1F3B;
--deep-ink-navy-600: #2d5171;
--deep-ink-navy-700: #173752;
--deep-ink-navy-800: #061f33;
--deep-ink-navy-900: #000b18;
--deep-ink-navy-950: #000103;
--warm-ivory-cream: #F4EFE6;
--warm-ivory-cream-50: #fffffe;
--warm-ivory-cream-100: #fffefd;
--warm-ivory-cream-200: #fefdfc;
--warm-ivory-cream-300: #fdfcfa;
--warm-ivory-cream-400: #fcfbf7;
--warm-ivory-cream-500: #F4EFE6;
--warm-ivory-cream-600: #d3d1cd;
--warm-ivory-cream-700: #959490;
--warm-ivory-cream-800: #5c5b58;
--warm-ivory-cream-900: #2d2c2b;
--warm-ivory-cream-950: #090808;
--brass-gold-accents: #B08D57;
--brass-gold-accents-50: #fffcf8;
--brass-gold-accents-100: #fdf9f1;
--brass-gold-accents-200: #f9f2e4;
--brass-gold-accents-300: #f4e8d3;
--brass-gold-accents-400: #ebdbbd;
--brass-gold-accents-500: #B08D57;
--brass-gold-accents-600: #b8a582;
--brass-gold-accents-700: #837355;
--brass-gold-accents-800: #51452e;
--brass-gold-accents-900: #282011;
--brass-gold-accents-950: #070502;
--gray: #2F2F2F;
--gray-50: #f9f9f9;
--gray-100: #f1f1f1;
--gray-200: #e0e0e0;
--gray-300: #c9c9c9;
--gray-400: #ababab;
--gray-500: #2F2F2F;
--gray-600: #636363;
--gray-700: #444444;
--gray-800: #272727;
--gray-900: #0f0f0f;
--gray-950: #020202;
--gray: #8A8F98;
--gray-50: #fcfdfd;
--gray-100: #f8f9fa;
--gray-200: #f1f2f4;
--gray-300: #e7e9ec;
--gray-400: #dadce0;
--gray-500: #8A8F98;
--gray-600: #a3a6ab;
--gray-700: #727579;
--gray-800: #45464a;
--gray-900: #202123;
--gray-950: #050506;
}
$deep-ink-navy: #0B1F3B; $deep-ink-navy-50: #f4f9fe; $deep-ink-navy-100: #e6eff7; $deep-ink-navy-200: #cddbe9; $deep-ink-navy-300: #abc2d7; $deep-ink-navy-400: #7f9fbc; $deep-ink-navy-500: #0B1F3B; $deep-ink-navy-600: #2d5171; $deep-ink-navy-700: #173752; $deep-ink-navy-800: #061f33; $deep-ink-navy-900: #000b18; $deep-ink-navy-950: #000103; $warm-ivory-cream: #F4EFE6; $warm-ivory-cream-50: #fffffe; $warm-ivory-cream-100: #fffefd; $warm-ivory-cream-200: #fefdfc; $warm-ivory-cream-300: #fdfcfa; $warm-ivory-cream-400: #fcfbf7; $warm-ivory-cream-500: #F4EFE6; $warm-ivory-cream-600: #d3d1cd; $warm-ivory-cream-700: #959490; $warm-ivory-cream-800: #5c5b58; $warm-ivory-cream-900: #2d2c2b; $warm-ivory-cream-950: #090808; $brass-gold-accents: #B08D57; $brass-gold-accents-50: #fffcf8; $brass-gold-accents-100: #fdf9f1; $brass-gold-accents-200: #f9f2e4; $brass-gold-accents-300: #f4e8d3; $brass-gold-accents-400: #ebdbbd; $brass-gold-accents-500: #B08D57; $brass-gold-accents-600: #b8a582; $brass-gold-accents-700: #837355; $brass-gold-accents-800: #51452e; $brass-gold-accents-900: #282011; $brass-gold-accents-950: #070502; $gray: #2F2F2F; $gray-50: #f9f9f9; $gray-100: #f1f1f1; $gray-200: #e0e0e0; $gray-300: #c9c9c9; $gray-400: #ababab; $gray-500: #2F2F2F; $gray-600: #636363; $gray-700: #444444; $gray-800: #272727; $gray-900: #0f0f0f; $gray-950: #020202; $gray: #8A8F98; $gray-50: #fcfdfd; $gray-100: #f8f9fa; $gray-200: #f1f2f4; $gray-300: #e7e9ec; $gray-400: #dadce0; $gray-500: #8A8F98; $gray-600: #a3a6ab; $gray-700: #727579; $gray-800: #45464a; $gray-900: #202123; $gray-950: #050506;
colors: {
'deep-ink-navy': {
50: '#f4f9fe',
100: '#e6eff7',
200: '#cddbe9',
300: '#abc2d7',
400: '#7f9fbc',
500: '#0B1F3B',
600: '#2d5171',
700: '#173752',
800: '#061f33',
900: '#000b18',
950: '#000103',
DEFAULT: '#0B1F3B',
},
'warm-ivory-cream': {
50: '#fffffe',
100: '#fffefd',
200: '#fefdfc',
300: '#fdfcfa',
400: '#fcfbf7',
500: '#F4EFE6',
600: '#d3d1cd',
700: '#959490',
800: '#5c5b58',
900: '#2d2c2b',
950: '#090808',
DEFAULT: '#F4EFE6',
},
'brass-gold-accents': {
50: '#fffcf8',
100: '#fdf9f1',
200: '#f9f2e4',
300: '#f4e8d3',
400: '#ebdbbd',
500: '#B08D57',
600: '#b8a582',
700: '#837355',
800: '#51452e',
900: '#282011',
950: '#070502',
DEFAULT: '#B08D57',
},
'gray': {
50: '#f9f9f9',
100: '#f1f1f1',
200: '#e0e0e0',
300: '#c9c9c9',
400: '#ababab',
500: '#2F2F2F',
600: '#636363',
700: '#444444',
800: '#272727',
900: '#0f0f0f',
950: '#020202',
DEFAULT: '#2F2F2F',
},
'gray': {
50: '#fcfdfd',
100: '#f8f9fa',
200: '#f1f2f4',
300: '#e7e9ec',
400: '#dadce0',
500: '#8A8F98',
600: '#a3a6ab',
700: '#727579',
800: '#45464a',
900: '#202123',
950: '#050506',
DEFAULT: '#8A8F98',
},
},
[
{
"name": "deep-ink-navy",
"harmony": "Palette",
"hex": "#0B1F3B",
"rgb": {
"r": 11,
"g": 31,
"b": 59
},
"hsl": {
"h": 215,
"s": 69,
"l": 14
},
"value": "#0B1F3B",
"tonalScale": {
"50": {
"hex": "#f4f9fe",
"rgb": {
"r": 244,
"g": 249,
"b": 254
}
},
"100": {
"hex": "#e6eff7",
"rgb": {
"r": 230,
"g": 239,
"b": 247
}
},
"200": {
"hex": "#cddbe9",
"rgb": {
"r": 205,
"g": 219,
"b": 233
}
},
"300": {
"hex": "#abc2d7",
"rgb": {
"r": 171,
"g": 194,
"b": 215
}
},
"400": {
"hex": "#7f9fbc",
"rgb": {
"r": 127,
"g": 159,
"b": 188
}
},
"500": {
"hex": "#0B1F3B",
"rgb": {
"r": 11,
"g": 31,
"b": 59
}
},
"600": {
"hex": "#2d5171",
"rgb": {
"r": 45,
"g": 81,
"b": 113
}
},
"700": {
"hex": "#173752",
"rgb": {
"r": 23,
"g": 55,
"b": 82
}
},
"800": {
"hex": "#061f33",
"rgb": {
"r": 6,
"g": 31,
"b": 51
}
},
"900": {
"hex": "#000b18",
"rgb": {
"r": 0,
"g": 11,
"b": 24
}
},
"950": {
"hex": "#000103",
"rgb": {
"r": 0,
"g": 1,
"b": 3
}
}
}
},
{
"name": "warm-ivory-cream",
"harmony": "Palette",
"hex": "#F4EFE6",
"rgb": {
"r": 244,
"g": 239,
"b": 230
},
"hsl": {
"h": 39,
"s": 39,
"l": 93
},
"value": "#F4EFE6",
"tonalScale": {
"50": {
"hex": "#fffffe",
"rgb": {
"r": 255,
"g": 255,
"b": 254
}
},
"100": {
"hex": "#fffefd",
"rgb": {
"r": 255,
"g": 254,
"b": 253
}
},
"200": {
"hex": "#fefdfc",
"rgb": {
"r": 254,
"g": 253,
"b": 252
}
},
"300": {
"hex": "#fdfcfa",
"rgb": {
"r": 253,
"g": 252,
"b": 250
}
},
"400": {
"hex": "#fcfbf7",
"rgb": {
"r": 252,
"g": 251,
"b": 247
}
},
"500": {
"hex": "#F4EFE6",
"rgb": {
"r": 244,
"g": 239,
"b": 230
}
},
"600": {
"hex": "#d3d1cd",
"rgb": {
"r": 211,
"g": 209,
"b": 205
}
},
"700": {
"hex": "#959490",
"rgb": {
"r": 149,
"g": 148,
"b": 144
}
},
"800": {
"hex": "#5c5b58",
"rgb": {
"r": 92,
"g": 91,
"b": 88
}
},
"900": {
"hex": "#2d2c2b",
"rgb": {
"r": 45,
"g": 44,
"b": 43
}
},
"950": {
"hex": "#090808",
"rgb": {
"r": 9,
"g": 8,
"b": 8
}
}
}
},
{
"name": "brass-gold-accents",
"harmony": "Palette",
"hex": "#B08D57",
"rgb": {
"r": 176,
"g": 141,
"b": 87
},
"hsl": {
"h": 36,
"s": 36,
"l": 52
},
"value": "#B08D57",
"tonalScale": {
"50": {
"hex": "#fffcf8",
"rgb": {
"r": 255,
"g": 252,
"b": 248
}
},
"100": {
"hex": "#fdf9f1",
"rgb": {
"r": 253,
"g": 249,
"b": 241
}
},
"200": {
"hex": "#f9f2e4",
"rgb": {
"r": 249,
"g": 242,
"b": 228
}
},
"300": {
"hex": "#f4e8d3",
"rgb": {
"r": 244,
"g": 232,
"b": 211
}
},
"400": {
"hex": "#ebdbbd",
"rgb": {
"r": 235,
"g": 219,
"b": 189
}
},
"500": {
"hex": "#B08D57",
"rgb": {
"r": 176,
"g": 141,
"b": 87
}
},
"600": {
"hex": "#b8a582",
"rgb": {
"r": 184,
"g": 165,
"b": 130
}
},
"700": {
"hex": "#837355",
"rgb": {
"r": 131,
"g": 115,
"b": 85
}
},
"800": {
"hex": "#51452e",
"rgb": {
"r": 81,
"g": 69,
"b": 46
}
},
"900": {
"hex": "#282011",
"rgb": {
"r": 40,
"g": 32,
"b": 17
}
},
"950": {
"hex": "#070502",
"rgb": {
"r": 7,
"g": 5,
"b": 2
}
}
}
},
{
"name": "gray",
"harmony": "Palette",
"hex": "#2F2F2F",
"rgb": {
"r": 47,
"g": 47,
"b": 47
},
"hsl": {
"h": 0,
"s": 0,
"l": 18
},
"value": "#2F2F2F",
"tonalScale": {
"50": {
"hex": "#f9f9f9",
"rgb": {
"r": 249,
"g": 249,
"b": 249
}
},
"100": {
"hex": "#f1f1f1",
"rgb": {
"r": 241,
"g": 241,
"b": 241
}
},
"200": {
"hex": "#e0e0e0",
"rgb": {
"r": 224,
"g": 224,
"b": 224
}
},
"300": {
"hex": "#c9c9c9",
"rgb": {
"r": 201,
"g": 201,
"b": 201
}
},
"400": {
"hex": "#ababab",
"rgb": {
"r": 171,
"g": 171,
"b": 171
}
},
"500": {
"hex": "#2F2F2F",
"rgb": {
"r": 47,
"g": 47,
"b": 47
}
},
"600": {
"hex": "#636363",
"rgb": {
"r": 99,
"g": 99,
"b": 99
}
},
"700": {
"hex": "#444444",
"rgb": {
"r": 68,
"g": 68,
"b": 68
}
},
"800": {
"hex": "#272727",
"rgb": {
"r": 39,
"g": 39,
"b": 39
}
},
"900": {
"hex": "#0f0f0f",
"rgb": {
"r": 15,
"g": 15,
"b": 15
}
},
"950": {
"hex": "#020202",
"rgb": {
"r": 2,
"g": 2,
"b": 2
}
}
}
},
{
"name": "gray",
"harmony": "Palette",
"hex": "#8A8F98",
"rgb": {
"r": 138,
"g": 143,
"b": 152
},
"hsl": {
"h": 219,
"s": 6,
"l": 57
},
"value": "#8A8F98",
"tonalScale": {
"50": {
"hex": "#fcfdfd",
"rgb": {
"r": 252,
"g": 253,
"b": 253
}
},
"100": {
"hex": "#f8f9fa",
"rgb": {
"r": 248,
"g": 249,
"b": 250
}
},
"200": {
"hex": "#f1f2f4",
"rgb": {
"r": 241,
"g": 242,
"b": 244
}
},
"300": {
"hex": "#e7e9ec",
"rgb": {
"r": 231,
"g": 233,
"b": 236
}
},
"400": {
"hex": "#dadce0",
"rgb": {
"r": 218,
"g": 220,
"b": 224
}
},
"500": {
"hex": "#8A8F98",
"rgb": {
"r": 138,
"g": 143,
"b": 152
}
},
"600": {
"hex": "#a3a6ab",
"rgb": {
"r": 163,
"g": 166,
"b": 171
}
},
"700": {
"hex": "#727579",
"rgb": {
"r": 114,
"g": 117,
"b": 121
}
},
"800": {
"hex": "#45464a",
"rgb": {
"r": 69,
"g": 70,
"b": 74
}
},
"900": {
"hex": "#202123",
"rgb": {
"r": 32,
"g": 33,
"b": 35
}
},
"950": {
"hex": "#050506",
"rgb": {
"r": 5,
"g": 5,
"b": 6
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 deep-ink-navy,Palette,#0B1F3B,"rgb(11, 31, 59)","hsl(215, 69%, 14%)",#0B1F3B,#f4f9fe,#e6eff7,#cddbe9,#abc2d7,#7f9fbc,#0B1F3B,#2d5171,#173752,#061f33,#000b18,#000103 warm-ivory-cream,Palette,#F4EFE6,"rgb(244, 239, 230)","hsl(39, 39%, 93%)",#F4EFE6,#fffffe,#fffefd,#fefdfc,#fdfcfa,#fcfbf7,#F4EFE6,#d3d1cd,#959490,#5c5b58,#2d2c2b,#090808 brass-gold-accents,Palette,#B08D57,"rgb(176, 141, 87)","hsl(36, 36%, 52%)",#B08D57,#fffcf8,#fdf9f1,#f9f2e4,#f4e8d3,#ebdbbd,#B08D57,#b8a582,#837355,#51452e,#282011,#070502 gray,Palette,#2F2F2F,"rgb(47, 47, 47)","hsl(0, 0%, 18%)",#2F2F2F,#f9f9f9,#f1f1f1,#e0e0e0,#c9c9c9,#ababab,#2F2F2F,#636363,#444444,#272727,#0f0f0f,#020202 gray,Palette,#8A8F98,"rgb(138, 143, 152)","hsl(219, 6%, 57%)",#8A8F98,#fcfdfd,#f8f9fa,#f1f2f4,#e7e9ec,#dadce0,#8A8F98,#a3a6ab,#727579,#45464a,#202123,#050506
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 11 31 59 deep-ink-navy 244 249 254 deep-ink-navy-50 230 239 247 deep-ink-navy-100 205 219 233 deep-ink-navy-200 171 194 215 deep-ink-navy-300 127 159 188 deep-ink-navy-400 11 31 59 deep-ink-navy-500 45 81 113 deep-ink-navy-600 23 55 82 deep-ink-navy-700 6 31 51 deep-ink-navy-800 0 11 24 deep-ink-navy-900 0 1 3 deep-ink-navy-950 244 239 230 warm-ivory-cream 255 255 254 warm-ivory-cream-50 255 254 253 warm-ivory-cream-100 254 253 252 warm-ivory-cream-200 253 252 250 warm-ivory-cream-300 252 251 247 warm-ivory-cream-400 244 239 230 warm-ivory-cream-500 211 209 205 warm-ivory-cream-600 149 148 144 warm-ivory-cream-700 92 91 88 warm-ivory-cream-800 45 44 43 warm-ivory-cream-900 9 8 8 warm-ivory-cream-950 176 141 87 brass-gold-accents 255 252 248 brass-gold-accents-50 253 249 241 brass-gold-accents-100 249 242 228 brass-gold-accents-200 244 232 211 brass-gold-accents-300 235 219 189 brass-gold-accents-400 176 141 87 brass-gold-accents-500 184 165 130 brass-gold-accents-600 131 115 85 brass-gold-accents-700 81 69 46 brass-gold-accents-800 40 32 17 brass-gold-accents-900 7 5 2 brass-gold-accents-950 47 47 47 gray 249 249 249 gray-50 241 241 241 gray-100 224 224 224 gray-200 201 201 201 gray-300 171 171 171 gray-400 47 47 47 gray-500 99 99 99 gray-600 68 68 68 gray-700 39 39 39 gray-800 15 15 15 gray-900 2 2 2 gray-950 138 143 152 gray 252 253 253 gray-50 248 249 250 gray-100 241 242 244 gray-200 231 233 236 gray-300 218 220 224 gray-400 138 143 152 gray-500 163 166 171 gray-600 114 117 121 gray-700 69 70 74 gray-800 32 33 35 gray-900 5 5 6 gray-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.