← Back to Tools
Create bold nightlife and evening website designs with this midnight blue and coral palette featuring #1A2530 midnight blue, #FF6B6B vibrant coral, #2C3E50 dark slate, and #FF8E8E soft coral.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--midnight-blue: #1A2530;
--midnight-blue-50: #f7f9fb;
--midnight-blue-100: #eceff3;
--midnight-blue-200: #d6dde2;
--midnight-blue-300: #bac4cd;
--midnight-blue-400: #96a4af;
--midnight-blue-500: #1A2530;
--midnight-blue-600: #4a5965;
--midnight-blue-700: #303d47;
--midnight-blue-800: #19222a;
--midnight-blue-900: #070d12;
--midnight-blue-950: #010102;
--vibrant-coral: #FF6B6B;
--vibrant-coral-50: #fffafa;
--vibrant-coral-100: #fff5f4;
--vibrant-coral-200: #ffeae9;
--vibrant-coral-300: #ffdcdb;
--vibrant-coral-400: #ffcac9;
--vibrant-coral-500: #FF6B6B;
--vibrant-coral-600: #db9090;
--vibrant-coral-700: #a06162;
--vibrant-coral-800: #663738;
--vibrant-coral-900: #351718;
--vibrant-coral-950: #0c0303;
--dark-slate: #2C3E50;
--dark-slate-50: #f8fafd;
--dark-slate-100: #eef3f7;
--dark-slate-200: #dce4eb;
--dark-slate-300: #c5d1db;
--dark-slate-400: #a6b6c4;
--dark-slate-500: #2C3E50;
--dark-slate-600: #5f7181;
--dark-slate-700: #3f4f5b;
--dark-slate-800: #222e38;
--dark-slate-900: #0c131a;
--dark-slate-950: #010203;
--soft-coral: #FF8E8E;
--soft-coral-50: #fffbfb;
--soft-coral-100: #fff8f7;
--soft-coral-200: #fff0f0;
--soft-coral-300: #ffe6e6;
--soft-coral-400: #ffd9d9;
--soft-coral-500: #FF8E8E;
--soft-coral-600: #daa4a4;
--soft-coral-700: #9e7172;
--soft-coral-800: #644343;
--soft-coral-900: #331e1e;
--soft-coral-950: #0b0404;
}
$midnight-blue: #1A2530; $midnight-blue-50: #f7f9fb; $midnight-blue-100: #eceff3; $midnight-blue-200: #d6dde2; $midnight-blue-300: #bac4cd; $midnight-blue-400: #96a4af; $midnight-blue-500: #1A2530; $midnight-blue-600: #4a5965; $midnight-blue-700: #303d47; $midnight-blue-800: #19222a; $midnight-blue-900: #070d12; $midnight-blue-950: #010102; $vibrant-coral: #FF6B6B; $vibrant-coral-50: #fffafa; $vibrant-coral-100: #fff5f4; $vibrant-coral-200: #ffeae9; $vibrant-coral-300: #ffdcdb; $vibrant-coral-400: #ffcac9; $vibrant-coral-500: #FF6B6B; $vibrant-coral-600: #db9090; $vibrant-coral-700: #a06162; $vibrant-coral-800: #663738; $vibrant-coral-900: #351718; $vibrant-coral-950: #0c0303; $dark-slate: #2C3E50; $dark-slate-50: #f8fafd; $dark-slate-100: #eef3f7; $dark-slate-200: #dce4eb; $dark-slate-300: #c5d1db; $dark-slate-400: #a6b6c4; $dark-slate-500: #2C3E50; $dark-slate-600: #5f7181; $dark-slate-700: #3f4f5b; $dark-slate-800: #222e38; $dark-slate-900: #0c131a; $dark-slate-950: #010203; $soft-coral: #FF8E8E; $soft-coral-50: #fffbfb; $soft-coral-100: #fff8f7; $soft-coral-200: #fff0f0; $soft-coral-300: #ffe6e6; $soft-coral-400: #ffd9d9; $soft-coral-500: #FF8E8E; $soft-coral-600: #daa4a4; $soft-coral-700: #9e7172; $soft-coral-800: #644343; $soft-coral-900: #331e1e; $soft-coral-950: #0b0404;
colors: {
'midnight-blue': {
50: '#f7f9fb',
100: '#eceff3',
200: '#d6dde2',
300: '#bac4cd',
400: '#96a4af',
500: '#1A2530',
600: '#4a5965',
700: '#303d47',
800: '#19222a',
900: '#070d12',
950: '#010102',
DEFAULT: '#1A2530',
},
'vibrant-coral': {
50: '#fffafa',
100: '#fff5f4',
200: '#ffeae9',
300: '#ffdcdb',
400: '#ffcac9',
500: '#FF6B6B',
600: '#db9090',
700: '#a06162',
800: '#663738',
900: '#351718',
950: '#0c0303',
DEFAULT: '#FF6B6B',
},
'dark-slate': {
50: '#f8fafd',
100: '#eef3f7',
200: '#dce4eb',
300: '#c5d1db',
400: '#a6b6c4',
500: '#2C3E50',
600: '#5f7181',
700: '#3f4f5b',
800: '#222e38',
900: '#0c131a',
950: '#010203',
DEFAULT: '#2C3E50',
},
'soft-coral': {
50: '#fffbfb',
100: '#fff8f7',
200: '#fff0f0',
300: '#ffe6e6',
400: '#ffd9d9',
500: '#FF8E8E',
600: '#daa4a4',
700: '#9e7172',
800: '#644343',
900: '#331e1e',
950: '#0b0404',
DEFAULT: '#FF8E8E',
},
},
[
{
"name": "midnight-blue",
"harmony": "Palette",
"hex": "#1A2530",
"rgb": {
"r": 26,
"g": 37,
"b": 48
},
"hsl": {
"h": 210,
"s": 30,
"l": 15
},
"value": "#1A2530",
"tonalScale": {
"50": {
"hex": "#f7f9fb",
"rgb": {
"r": 247,
"g": 249,
"b": 251
}
},
"100": {
"hex": "#eceff3",
"rgb": {
"r": 236,
"g": 239,
"b": 243
}
},
"200": {
"hex": "#d6dde2",
"rgb": {
"r": 214,
"g": 221,
"b": 226
}
},
"300": {
"hex": "#bac4cd",
"rgb": {
"r": 186,
"g": 196,
"b": 205
}
},
"400": {
"hex": "#96a4af",
"rgb": {
"r": 150,
"g": 164,
"b": 175
}
},
"500": {
"hex": "#1A2530",
"rgb": {
"r": 26,
"g": 37,
"b": 48
}
},
"600": {
"hex": "#4a5965",
"rgb": {
"r": 74,
"g": 89,
"b": 101
}
},
"700": {
"hex": "#303d47",
"rgb": {
"r": 48,
"g": 61,
"b": 71
}
},
"800": {
"hex": "#19222a",
"rgb": {
"r": 25,
"g": 34,
"b": 42
}
},
"900": {
"hex": "#070d12",
"rgb": {
"r": 7,
"g": 13,
"b": 18
}
},
"950": {
"hex": "#010102",
"rgb": {
"r": 1,
"g": 1,
"b": 2
}
}
}
},
{
"name": "vibrant-coral",
"harmony": "Palette",
"hex": "#FF6B6B",
"rgb": {
"r": 255,
"g": 107,
"b": 107
},
"hsl": {
"h": 0,
"s": 100,
"l": 71
},
"value": "#FF6B6B",
"tonalScale": {
"50": {
"hex": "#fffafa",
"rgb": {
"r": 255,
"g": 250,
"b": 250
}
},
"100": {
"hex": "#fff5f4",
"rgb": {
"r": 255,
"g": 245,
"b": 244
}
},
"200": {
"hex": "#ffeae9",
"rgb": {
"r": 255,
"g": 234,
"b": 233
}
},
"300": {
"hex": "#ffdcdb",
"rgb": {
"r": 255,
"g": 220,
"b": 219
}
},
"400": {
"hex": "#ffcac9",
"rgb": {
"r": 255,
"g": 202,
"b": 201
}
},
"500": {
"hex": "#FF6B6B",
"rgb": {
"r": 255,
"g": 107,
"b": 107
}
},
"600": {
"hex": "#db9090",
"rgb": {
"r": 219,
"g": 144,
"b": 144
}
},
"700": {
"hex": "#a06162",
"rgb": {
"r": 160,
"g": 97,
"b": 98
}
},
"800": {
"hex": "#663738",
"rgb": {
"r": 102,
"g": 55,
"b": 56
}
},
"900": {
"hex": "#351718",
"rgb": {
"r": 53,
"g": 23,
"b": 24
}
},
"950": {
"hex": "#0c0303",
"rgb": {
"r": 12,
"g": 3,
"b": 3
}
}
}
},
{
"name": "dark-slate",
"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": "soft-coral",
"harmony": "Palette",
"hex": "#FF8E8E",
"rgb": {
"r": 255,
"g": 142,
"b": 142
},
"hsl": {
"h": 0,
"s": 100,
"l": 78
},
"value": "#FF8E8E",
"tonalScale": {
"50": {
"hex": "#fffbfb",
"rgb": {
"r": 255,
"g": 251,
"b": 251
}
},
"100": {
"hex": "#fff8f7",
"rgb": {
"r": 255,
"g": 248,
"b": 247
}
},
"200": {
"hex": "#fff0f0",
"rgb": {
"r": 255,
"g": 240,
"b": 240
}
},
"300": {
"hex": "#ffe6e6",
"rgb": {
"r": 255,
"g": 230,
"b": 230
}
},
"400": {
"hex": "#ffd9d9",
"rgb": {
"r": 255,
"g": 217,
"b": 217
}
},
"500": {
"hex": "#FF8E8E",
"rgb": {
"r": 255,
"g": 142,
"b": 142
}
},
"600": {
"hex": "#daa4a4",
"rgb": {
"r": 218,
"g": 164,
"b": 164
}
},
"700": {
"hex": "#9e7172",
"rgb": {
"r": 158,
"g": 113,
"b": 114
}
},
"800": {
"hex": "#644343",
"rgb": {
"r": 100,
"g": 67,
"b": 67
}
},
"900": {
"hex": "#331e1e",
"rgb": {
"r": 51,
"g": 30,
"b": 30
}
},
"950": {
"hex": "#0b0404",
"rgb": {
"r": 11,
"g": 4,
"b": 4
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 midnight-blue,Palette,#1A2530,"rgb(26, 37, 48)","hsl(210, 30%, 15%)",#1A2530,#f7f9fb,#eceff3,#d6dde2,#bac4cd,#96a4af,#1A2530,#4a5965,#303d47,#19222a,#070d12,#010102 vibrant-coral,Palette,#FF6B6B,"rgb(255, 107, 107)","hsl(0, 100%, 71%)",#FF6B6B,#fffafa,#fff5f4,#ffeae9,#ffdcdb,#ffcac9,#FF6B6B,#db9090,#a06162,#663738,#351718,#0c0303 dark-slate,Palette,#2C3E50,"rgb(44, 62, 80)","hsl(210, 29%, 24%)",#2C3E50,#f8fafd,#eef3f7,#dce4eb,#c5d1db,#a6b6c4,#2C3E50,#5f7181,#3f4f5b,#222e38,#0c131a,#010203 soft-coral,Palette,#FF8E8E,"rgb(255, 142, 142)","hsl(0, 100%, 78%)",#FF8E8E,#fffbfb,#fff8f7,#fff0f0,#ffe6e6,#ffd9d9,#FF8E8E,#daa4a4,#9e7172,#644343,#331e1e,#0b0404
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 26 37 48 midnight-blue 247 249 251 midnight-blue-50 236 239 243 midnight-blue-100 214 221 226 midnight-blue-200 186 196 205 midnight-blue-300 150 164 175 midnight-blue-400 26 37 48 midnight-blue-500 74 89 101 midnight-blue-600 48 61 71 midnight-blue-700 25 34 42 midnight-blue-800 7 13 18 midnight-blue-900 1 1 2 midnight-blue-950 255 107 107 vibrant-coral 255 250 250 vibrant-coral-50 255 245 244 vibrant-coral-100 255 234 233 vibrant-coral-200 255 220 219 vibrant-coral-300 255 202 201 vibrant-coral-400 255 107 107 vibrant-coral-500 219 144 144 vibrant-coral-600 160 97 98 vibrant-coral-700 102 55 56 vibrant-coral-800 53 23 24 vibrant-coral-900 12 3 3 vibrant-coral-950 44 62 80 dark-slate 248 250 253 dark-slate-50 238 243 247 dark-slate-100 220 228 235 dark-slate-200 197 209 219 dark-slate-300 166 182 196 dark-slate-400 44 62 80 dark-slate-500 95 113 129 dark-slate-600 63 79 91 dark-slate-700 34 46 56 dark-slate-800 12 19 26 dark-slate-900 1 2 3 dark-slate-950 255 142 142 soft-coral 255 251 251 soft-coral-50 255 248 247 soft-coral-100 255 240 240 soft-coral-200 255 230 230 soft-coral-300 255 217 217 soft-coral-400 255 142 142 soft-coral-500 218 164 164 soft-coral-600 158 113 114 soft-coral-700 100 67 67 soft-coral-800 51 30 30 soft-coral-900 11 4 4 soft-coral-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.