← Back to Tools
Compose moody cinematic tones with deep midnight blue (#0F172A), rich espresso brown (#2B1D14), warm cream (#F2E8DA), and tan (#8B735B) for intimate, atmospheric designs.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--deep-midnight-blue: #0F172A;
--deep-midnight-blue-50: #f5f8fc;
--deep-midnight-blue-100: #e9edf4;
--deep-midnight-blue-200: #d0d7e3;
--deep-midnight-blue-300: #b1bbcd;
--deep-midnight-blue-400: #8795ae;
--deep-midnight-blue-500: #0F172A;
--deep-midnight-blue-600: #374660;
--deep-midnight-blue-700: #222f45;
--deep-midnight-blue-800: #10192a;
--deep-midnight-blue-900: #040812;
--deep-midnight-blue-950: #000102;
--rich-espresso-brown: #2B1D14;
--rich-espresso-brown-50: #fbf8f6;
--rich-espresso-brown-100: #f2edea;
--rich-espresso-brown-200: #e1d9d3;
--rich-espresso-brown-300: #cabeb5;
--rich-espresso-brown-400: #ab9b8e;
--rich-espresso-brown-500: #2B1D14;
--rich-espresso-brown-600: #604e40;
--rich-espresso-brown-700: #433428;
--rich-espresso-brown-800: #281d13;
--rich-espresso-brown-900: #110905;
--rich-espresso-brown-950: #020100;
--warm-cream: #F2E8DA;
--warm-cream-50: #fffffe;
--warm-cream-100: #fffefd;
--warm-cream-200: #fefdfa;
--warm-cream-300: #fdfbf7;
--warm-cream-400: #fcf9f3;
--warm-cream-500: #F2E8DA;
--warm-cream-600: #d3cec8;
--warm-cream-700: #95928c;
--warm-cream-800: #5c5955;
--warm-cream-900: #2d2b29;
--warm-cream-950: #090807;
--tan: #8B735B;
--tan-50: #fefcf9;
--tan-100: #faf7f3;
--tan-200: #f3eee7;
--tan-300: #eae1d7;
--tan-400: #ddd0c2;
--tan-500: #8B735B;
--tan-600: #a59686;
--tan-700: #75695b;
--tan-800: #483f34;
--tan-900: #221c16;
--tan-950: #060403;
--dark-blue: #3F4A5A;
--dark-blue-50: #f9fbfc;
--dark-blue-100: #f2f4f7;
--dark-blue-200: #e2e6ec;
--dark-blue-300: #cfd5dd;
--dark-blue-400: #b4bdc8;
--dark-blue-500: #3F4A5A;
--dark-blue-600: #717b88;
--dark-blue-700: #4d5560;
--dark-blue-800: #2c323a;
--dark-blue-900: #12161b;
--dark-blue-950: #020304;
}
$deep-midnight-blue: #0F172A; $deep-midnight-blue-50: #f5f8fc; $deep-midnight-blue-100: #e9edf4; $deep-midnight-blue-200: #d0d7e3; $deep-midnight-blue-300: #b1bbcd; $deep-midnight-blue-400: #8795ae; $deep-midnight-blue-500: #0F172A; $deep-midnight-blue-600: #374660; $deep-midnight-blue-700: #222f45; $deep-midnight-blue-800: #10192a; $deep-midnight-blue-900: #040812; $deep-midnight-blue-950: #000102; $rich-espresso-brown: #2B1D14; $rich-espresso-brown-50: #fbf8f6; $rich-espresso-brown-100: #f2edea; $rich-espresso-brown-200: #e1d9d3; $rich-espresso-brown-300: #cabeb5; $rich-espresso-brown-400: #ab9b8e; $rich-espresso-brown-500: #2B1D14; $rich-espresso-brown-600: #604e40; $rich-espresso-brown-700: #433428; $rich-espresso-brown-800: #281d13; $rich-espresso-brown-900: #110905; $rich-espresso-brown-950: #020100; $warm-cream: #F2E8DA; $warm-cream-50: #fffffe; $warm-cream-100: #fffefd; $warm-cream-200: #fefdfa; $warm-cream-300: #fdfbf7; $warm-cream-400: #fcf9f3; $warm-cream-500: #F2E8DA; $warm-cream-600: #d3cec8; $warm-cream-700: #95928c; $warm-cream-800: #5c5955; $warm-cream-900: #2d2b29; $warm-cream-950: #090807; $tan: #8B735B; $tan-50: #fefcf9; $tan-100: #faf7f3; $tan-200: #f3eee7; $tan-300: #eae1d7; $tan-400: #ddd0c2; $tan-500: #8B735B; $tan-600: #a59686; $tan-700: #75695b; $tan-800: #483f34; $tan-900: #221c16; $tan-950: #060403; $dark-blue: #3F4A5A; $dark-blue-50: #f9fbfc; $dark-blue-100: #f2f4f7; $dark-blue-200: #e2e6ec; $dark-blue-300: #cfd5dd; $dark-blue-400: #b4bdc8; $dark-blue-500: #3F4A5A; $dark-blue-600: #717b88; $dark-blue-700: #4d5560; $dark-blue-800: #2c323a; $dark-blue-900: #12161b; $dark-blue-950: #020304;
colors: {
'deep-midnight-blue': {
50: '#f5f8fc',
100: '#e9edf4',
200: '#d0d7e3',
300: '#b1bbcd',
400: '#8795ae',
500: '#0F172A',
600: '#374660',
700: '#222f45',
800: '#10192a',
900: '#040812',
950: '#000102',
DEFAULT: '#0F172A',
},
'rich-espresso-brown': {
50: '#fbf8f6',
100: '#f2edea',
200: '#e1d9d3',
300: '#cabeb5',
400: '#ab9b8e',
500: '#2B1D14',
600: '#604e40',
700: '#433428',
800: '#281d13',
900: '#110905',
950: '#020100',
DEFAULT: '#2B1D14',
},
'warm-cream': {
50: '#fffffe',
100: '#fffefd',
200: '#fefdfa',
300: '#fdfbf7',
400: '#fcf9f3',
500: '#F2E8DA',
600: '#d3cec8',
700: '#95928c',
800: '#5c5955',
900: '#2d2b29',
950: '#090807',
DEFAULT: '#F2E8DA',
},
'tan': {
50: '#fefcf9',
100: '#faf7f3',
200: '#f3eee7',
300: '#eae1d7',
400: '#ddd0c2',
500: '#8B735B',
600: '#a59686',
700: '#75695b',
800: '#483f34',
900: '#221c16',
950: '#060403',
DEFAULT: '#8B735B',
},
'dark-blue': {
50: '#f9fbfc',
100: '#f2f4f7',
200: '#e2e6ec',
300: '#cfd5dd',
400: '#b4bdc8',
500: '#3F4A5A',
600: '#717b88',
700: '#4d5560',
800: '#2c323a',
900: '#12161b',
950: '#020304',
DEFAULT: '#3F4A5A',
},
},
[
{
"name": "deep-midnight-blue",
"harmony": "Palette",
"hex": "#0F172A",
"rgb": {
"r": 15,
"g": 23,
"b": 42
},
"hsl": {
"h": 222,
"s": 47,
"l": 11
},
"value": "#0F172A",
"tonalScale": {
"50": {
"hex": "#f5f8fc",
"rgb": {
"r": 245,
"g": 248,
"b": 252
}
},
"100": {
"hex": "#e9edf4",
"rgb": {
"r": 233,
"g": 237,
"b": 244
}
},
"200": {
"hex": "#d0d7e3",
"rgb": {
"r": 208,
"g": 215,
"b": 227
}
},
"300": {
"hex": "#b1bbcd",
"rgb": {
"r": 177,
"g": 187,
"b": 205
}
},
"400": {
"hex": "#8795ae",
"rgb": {
"r": 135,
"g": 149,
"b": 174
}
},
"500": {
"hex": "#0F172A",
"rgb": {
"r": 15,
"g": 23,
"b": 42
}
},
"600": {
"hex": "#374660",
"rgb": {
"r": 55,
"g": 70,
"b": 96
}
},
"700": {
"hex": "#222f45",
"rgb": {
"r": 34,
"g": 47,
"b": 69
}
},
"800": {
"hex": "#10192a",
"rgb": {
"r": 16,
"g": 25,
"b": 42
}
},
"900": {
"hex": "#040812",
"rgb": {
"r": 4,
"g": 8,
"b": 18
}
},
"950": {
"hex": "#000102",
"rgb": {
"r": 0,
"g": 1,
"b": 2
}
}
}
},
{
"name": "rich-espresso-brown",
"harmony": "Palette",
"hex": "#2B1D14",
"rgb": {
"r": 43,
"g": 29,
"b": 20
},
"hsl": {
"h": 23,
"s": 37,
"l": 12
},
"value": "#2B1D14",
"tonalScale": {
"50": {
"hex": "#fbf8f6",
"rgb": {
"r": 251,
"g": 248,
"b": 246
}
},
"100": {
"hex": "#f2edea",
"rgb": {
"r": 242,
"g": 237,
"b": 234
}
},
"200": {
"hex": "#e1d9d3",
"rgb": {
"r": 225,
"g": 217,
"b": 211
}
},
"300": {
"hex": "#cabeb5",
"rgb": {
"r": 202,
"g": 190,
"b": 181
}
},
"400": {
"hex": "#ab9b8e",
"rgb": {
"r": 171,
"g": 155,
"b": 142
}
},
"500": {
"hex": "#2B1D14",
"rgb": {
"r": 43,
"g": 29,
"b": 20
}
},
"600": {
"hex": "#604e40",
"rgb": {
"r": 96,
"g": 78,
"b": 64
}
},
"700": {
"hex": "#433428",
"rgb": {
"r": 67,
"g": 52,
"b": 40
}
},
"800": {
"hex": "#281d13",
"rgb": {
"r": 40,
"g": 29,
"b": 19
}
},
"900": {
"hex": "#110905",
"rgb": {
"r": 17,
"g": 9,
"b": 5
}
},
"950": {
"hex": "#020100",
"rgb": {
"r": 2,
"g": 1,
"b": 0
}
}
}
},
{
"name": "warm-cream",
"harmony": "Palette",
"hex": "#F2E8DA",
"rgb": {
"r": 242,
"g": 232,
"b": 218
},
"hsl": {
"h": 35,
"s": 48,
"l": 90
},
"value": "#F2E8DA",
"tonalScale": {
"50": {
"hex": "#fffffe",
"rgb": {
"r": 255,
"g": 255,
"b": 254
}
},
"100": {
"hex": "#fffefd",
"rgb": {
"r": 255,
"g": 254,
"b": 253
}
},
"200": {
"hex": "#fefdfa",
"rgb": {
"r": 254,
"g": 253,
"b": 250
}
},
"300": {
"hex": "#fdfbf7",
"rgb": {
"r": 253,
"g": 251,
"b": 247
}
},
"400": {
"hex": "#fcf9f3",
"rgb": {
"r": 252,
"g": 249,
"b": 243
}
},
"500": {
"hex": "#F2E8DA",
"rgb": {
"r": 242,
"g": 232,
"b": 218
}
},
"600": {
"hex": "#d3cec8",
"rgb": {
"r": 211,
"g": 206,
"b": 200
}
},
"700": {
"hex": "#95928c",
"rgb": {
"r": 149,
"g": 146,
"b": 140
}
},
"800": {
"hex": "#5c5955",
"rgb": {
"r": 92,
"g": 89,
"b": 85
}
},
"900": {
"hex": "#2d2b29",
"rgb": {
"r": 45,
"g": 43,
"b": 41
}
},
"950": {
"hex": "#090807",
"rgb": {
"r": 9,
"g": 8,
"b": 7
}
}
}
},
{
"name": "tan",
"harmony": "Palette",
"hex": "#8B735B",
"rgb": {
"r": 139,
"g": 115,
"b": 91
},
"hsl": {
"h": 30,
"s": 21,
"l": 45
},
"value": "#8B735B",
"tonalScale": {
"50": {
"hex": "#fefcf9",
"rgb": {
"r": 254,
"g": 252,
"b": 249
}
},
"100": {
"hex": "#faf7f3",
"rgb": {
"r": 250,
"g": 247,
"b": 243
}
},
"200": {
"hex": "#f3eee7",
"rgb": {
"r": 243,
"g": 238,
"b": 231
}
},
"300": {
"hex": "#eae1d7",
"rgb": {
"r": 234,
"g": 225,
"b": 215
}
},
"400": {
"hex": "#ddd0c2",
"rgb": {
"r": 221,
"g": 208,
"b": 194
}
},
"500": {
"hex": "#8B735B",
"rgb": {
"r": 139,
"g": 115,
"b": 91
}
},
"600": {
"hex": "#a59686",
"rgb": {
"r": 165,
"g": 150,
"b": 134
}
},
"700": {
"hex": "#75695b",
"rgb": {
"r": 117,
"g": 105,
"b": 91
}
},
"800": {
"hex": "#483f34",
"rgb": {
"r": 72,
"g": 63,
"b": 52
}
},
"900": {
"hex": "#221c16",
"rgb": {
"r": 34,
"g": 28,
"b": 22
}
},
"950": {
"hex": "#060403",
"rgb": {
"r": 6,
"g": 4,
"b": 3
}
}
}
},
{
"name": "dark-blue",
"harmony": "Palette",
"hex": "#3F4A5A",
"rgb": {
"r": 63,
"g": 74,
"b": 90
},
"hsl": {
"h": 216,
"s": 18,
"l": 30
},
"value": "#3F4A5A",
"tonalScale": {
"50": {
"hex": "#f9fbfc",
"rgb": {
"r": 249,
"g": 251,
"b": 252
}
},
"100": {
"hex": "#f2f4f7",
"rgb": {
"r": 242,
"g": 244,
"b": 247
}
},
"200": {
"hex": "#e2e6ec",
"rgb": {
"r": 226,
"g": 230,
"b": 236
}
},
"300": {
"hex": "#cfd5dd",
"rgb": {
"r": 207,
"g": 213,
"b": 221
}
},
"400": {
"hex": "#b4bdc8",
"rgb": {
"r": 180,
"g": 189,
"b": 200
}
},
"500": {
"hex": "#3F4A5A",
"rgb": {
"r": 63,
"g": 74,
"b": 90
}
},
"600": {
"hex": "#717b88",
"rgb": {
"r": 113,
"g": 123,
"b": 136
}
},
"700": {
"hex": "#4d5560",
"rgb": {
"r": 77,
"g": 85,
"b": 96
}
},
"800": {
"hex": "#2c323a",
"rgb": {
"r": 44,
"g": 50,
"b": 58
}
},
"900": {
"hex": "#12161b",
"rgb": {
"r": 18,
"g": 22,
"b": 27
}
},
"950": {
"hex": "#020304",
"rgb": {
"r": 2,
"g": 3,
"b": 4
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 deep-midnight-blue,Palette,#0F172A,"rgb(15, 23, 42)","hsl(222, 47%, 11%)",#0F172A,#f5f8fc,#e9edf4,#d0d7e3,#b1bbcd,#8795ae,#0F172A,#374660,#222f45,#10192a,#040812,#000102 rich-espresso-brown,Palette,#2B1D14,"rgb(43, 29, 20)","hsl(23, 37%, 12%)",#2B1D14,#fbf8f6,#f2edea,#e1d9d3,#cabeb5,#ab9b8e,#2B1D14,#604e40,#433428,#281d13,#110905,#020100 warm-cream,Palette,#F2E8DA,"rgb(242, 232, 218)","hsl(35, 48%, 90%)",#F2E8DA,#fffffe,#fffefd,#fefdfa,#fdfbf7,#fcf9f3,#F2E8DA,#d3cec8,#95928c,#5c5955,#2d2b29,#090807 tan,Palette,#8B735B,"rgb(139, 115, 91)","hsl(30, 21%, 45%)",#8B735B,#fefcf9,#faf7f3,#f3eee7,#eae1d7,#ddd0c2,#8B735B,#a59686,#75695b,#483f34,#221c16,#060403 dark-blue,Palette,#3F4A5A,"rgb(63, 74, 90)","hsl(216, 18%, 30%)",#3F4A5A,#f9fbfc,#f2f4f7,#e2e6ec,#cfd5dd,#b4bdc8,#3F4A5A,#717b88,#4d5560,#2c323a,#12161b,#020304
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 15 23 42 deep-midnight-blue 245 248 252 deep-midnight-blue-50 233 237 244 deep-midnight-blue-100 208 215 227 deep-midnight-blue-200 177 187 205 deep-midnight-blue-300 135 149 174 deep-midnight-blue-400 15 23 42 deep-midnight-blue-500 55 70 96 deep-midnight-blue-600 34 47 69 deep-midnight-blue-700 16 25 42 deep-midnight-blue-800 4 8 18 deep-midnight-blue-900 0 1 2 deep-midnight-blue-950 43 29 20 rich-espresso-brown 251 248 246 rich-espresso-brown-50 242 237 234 rich-espresso-brown-100 225 217 211 rich-espresso-brown-200 202 190 181 rich-espresso-brown-300 171 155 142 rich-espresso-brown-400 43 29 20 rich-espresso-brown-500 96 78 64 rich-espresso-brown-600 67 52 40 rich-espresso-brown-700 40 29 19 rich-espresso-brown-800 17 9 5 rich-espresso-brown-900 2 1 0 rich-espresso-brown-950 242 232 218 warm-cream 255 255 254 warm-cream-50 255 254 253 warm-cream-100 254 253 250 warm-cream-200 253 251 247 warm-cream-300 252 249 243 warm-cream-400 242 232 218 warm-cream-500 211 206 200 warm-cream-600 149 146 140 warm-cream-700 92 89 85 warm-cream-800 45 43 41 warm-cream-900 9 8 7 warm-cream-950 139 115 91 tan 254 252 249 tan-50 250 247 243 tan-100 243 238 231 tan-200 234 225 215 tan-300 221 208 194 tan-400 139 115 91 tan-500 165 150 134 tan-600 117 105 91 tan-700 72 63 52 tan-800 34 28 22 tan-900 6 4 3 tan-950 63 74 90 dark-blue 249 251 252 dark-blue-50 242 244 247 dark-blue-100 226 230 236 dark-blue-200 207 213 221 dark-blue-300 180 189 200 dark-blue-400 63 74 90 dark-blue-500 113 123 136 dark-blue-600 77 85 96 dark-blue-700 44 50 58 dark-blue-800 18 22 27 dark-blue-900 2 3 4 dark-blue-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.