← Back to Tools
Design mysterious, celestial 2025 branding with this future dusk palette featuring #4C5578 future dusk, #8A93B5 twilight periwinkle, #B8BED1 misty lavender, #343B56 deep indigo dusk, and #1D2130 midnight purple.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--future-dusk: #4C5578;
--future-dusk-50: #fafbfe;
--future-dusk-100: #f3f5fa;
--future-dusk-200: #e5e9f2;
--future-dusk-300: #d4d8e8;
--future-dusk-400: #bcc3d8;
--future-dusk-500: #4C5578;
--future-dusk-600: #7c839b;
--future-dusk-700: #555b6f;
--future-dusk-800: #313645;
--future-dusk-900: #151821;
--future-dusk-950: #020305;
--twilight-periwinkle: #8A93B5;
--twilight-periwinkle-50: #fcfdff;
--twilight-periwinkle-100: #f8f9fd;
--twilight-periwinkle-200: #f1f3fa;
--twilight-periwinkle-300: #e6eaf5;
--twilight-periwinkle-400: #d9deed;
--twilight-periwinkle-500: #8A93B5;
--twilight-periwinkle-600: #a3a8ba;
--twilight-periwinkle-700: #727685;
--twilight-periwinkle-800: #444753;
--twilight-periwinkle-900: #1f2128;
--twilight-periwinkle-950: #050507;
--misty-lavender: #B8BED1;
--misty-lavender-50: #fdfeff;
--misty-lavender-100: #fbfcfe;
--misty-lavender-200: #f7f8fc;
--misty-lavender-300: #f1f3f8;
--misty-lavender-400: #eaecf4;
--misty-lavender-500: #B8BED1;
--misty-lavender-600: #babdc6;
--misty-lavender-700: #82858c;
--misty-lavender-800: #4f5157;
--misty-lavender-900: #26272a;
--misty-lavender-950: #060708;
--deep-indigo-dusk: #343B56;
--deep-indigo-dusk-50: #f9fafd;
--deep-indigo-dusk-100: #f0f2f8;
--deep-indigo-dusk-200: #e0e3ec;
--deep-indigo-dusk-300: #cacfde;
--deep-indigo-dusk-400: #adb3c8;
--deep-indigo-dusk-500: #343B56;
--deep-indigo-dusk-600: #686e85;
--deep-indigo-dusk-700: #464c5f;
--deep-indigo-dusk-800: #282c3b;
--deep-indigo-dusk-900: #10121b;
--deep-indigo-dusk-950: #020204;
--midnight-purple: #1D2130;
--midnight-purple-50: #f7f8fb;
--midnight-purple-100: #edeef3;
--midnight-purple-200: #d8dbe3;
--midnight-purple-300: #bec1ce;
--midnight-purple-400: #9a9fb0;
--midnight-purple-500: #1D2130;
--midnight-purple-600: #4e5466;
--midnight-purple-700: #343948;
--midnight-purple-800: #1c202b;
--midnight-purple-900: #090b12;
--midnight-purple-950: #010102;
}
$future-dusk: #4C5578; $future-dusk-50: #fafbfe; $future-dusk-100: #f3f5fa; $future-dusk-200: #e5e9f2; $future-dusk-300: #d4d8e8; $future-dusk-400: #bcc3d8; $future-dusk-500: #4C5578; $future-dusk-600: #7c839b; $future-dusk-700: #555b6f; $future-dusk-800: #313645; $future-dusk-900: #151821; $future-dusk-950: #020305; $twilight-periwinkle: #8A93B5; $twilight-periwinkle-50: #fcfdff; $twilight-periwinkle-100: #f8f9fd; $twilight-periwinkle-200: #f1f3fa; $twilight-periwinkle-300: #e6eaf5; $twilight-periwinkle-400: #d9deed; $twilight-periwinkle-500: #8A93B5; $twilight-periwinkle-600: #a3a8ba; $twilight-periwinkle-700: #727685; $twilight-periwinkle-800: #444753; $twilight-periwinkle-900: #1f2128; $twilight-periwinkle-950: #050507; $misty-lavender: #B8BED1; $misty-lavender-50: #fdfeff; $misty-lavender-100: #fbfcfe; $misty-lavender-200: #f7f8fc; $misty-lavender-300: #f1f3f8; $misty-lavender-400: #eaecf4; $misty-lavender-500: #B8BED1; $misty-lavender-600: #babdc6; $misty-lavender-700: #82858c; $misty-lavender-800: #4f5157; $misty-lavender-900: #26272a; $misty-lavender-950: #060708; $deep-indigo-dusk: #343B56; $deep-indigo-dusk-50: #f9fafd; $deep-indigo-dusk-100: #f0f2f8; $deep-indigo-dusk-200: #e0e3ec; $deep-indigo-dusk-300: #cacfde; $deep-indigo-dusk-400: #adb3c8; $deep-indigo-dusk-500: #343B56; $deep-indigo-dusk-600: #686e85; $deep-indigo-dusk-700: #464c5f; $deep-indigo-dusk-800: #282c3b; $deep-indigo-dusk-900: #10121b; $deep-indigo-dusk-950: #020204; $midnight-purple: #1D2130; $midnight-purple-50: #f7f8fb; $midnight-purple-100: #edeef3; $midnight-purple-200: #d8dbe3; $midnight-purple-300: #bec1ce; $midnight-purple-400: #9a9fb0; $midnight-purple-500: #1D2130; $midnight-purple-600: #4e5466; $midnight-purple-700: #343948; $midnight-purple-800: #1c202b; $midnight-purple-900: #090b12; $midnight-purple-950: #010102;
colors: {
'future-dusk': {
50: '#fafbfe',
100: '#f3f5fa',
200: '#e5e9f2',
300: '#d4d8e8',
400: '#bcc3d8',
500: '#4C5578',
600: '#7c839b',
700: '#555b6f',
800: '#313645',
900: '#151821',
950: '#020305',
DEFAULT: '#4C5578',
},
'twilight-periwinkle': {
50: '#fcfdff',
100: '#f8f9fd',
200: '#f1f3fa',
300: '#e6eaf5',
400: '#d9deed',
500: '#8A93B5',
600: '#a3a8ba',
700: '#727685',
800: '#444753',
900: '#1f2128',
950: '#050507',
DEFAULT: '#8A93B5',
},
'misty-lavender': {
50: '#fdfeff',
100: '#fbfcfe',
200: '#f7f8fc',
300: '#f1f3f8',
400: '#eaecf4',
500: '#B8BED1',
600: '#babdc6',
700: '#82858c',
800: '#4f5157',
900: '#26272a',
950: '#060708',
DEFAULT: '#B8BED1',
},
'deep-indigo-dusk': {
50: '#f9fafd',
100: '#f0f2f8',
200: '#e0e3ec',
300: '#cacfde',
400: '#adb3c8',
500: '#343B56',
600: '#686e85',
700: '#464c5f',
800: '#282c3b',
900: '#10121b',
950: '#020204',
DEFAULT: '#343B56',
},
'midnight-purple': {
50: '#f7f8fb',
100: '#edeef3',
200: '#d8dbe3',
300: '#bec1ce',
400: '#9a9fb0',
500: '#1D2130',
600: '#4e5466',
700: '#343948',
800: '#1c202b',
900: '#090b12',
950: '#010102',
DEFAULT: '#1D2130',
},
},
[
{
"name": "future-dusk",
"harmony": "Palette",
"hex": "#4C5578",
"rgb": {
"r": 76,
"g": 85,
"b": 120
},
"hsl": {
"h": 228,
"s": 22,
"l": 38
},
"value": "#4C5578",
"tonalScale": {
"50": {
"hex": "#fafbfe",
"rgb": {
"r": 250,
"g": 251,
"b": 254
}
},
"100": {
"hex": "#f3f5fa",
"rgb": {
"r": 243,
"g": 245,
"b": 250
}
},
"200": {
"hex": "#e5e9f2",
"rgb": {
"r": 229,
"g": 233,
"b": 242
}
},
"300": {
"hex": "#d4d8e8",
"rgb": {
"r": 212,
"g": 216,
"b": 232
}
},
"400": {
"hex": "#bcc3d8",
"rgb": {
"r": 188,
"g": 195,
"b": 216
}
},
"500": {
"hex": "#4C5578",
"rgb": {
"r": 76,
"g": 85,
"b": 120
}
},
"600": {
"hex": "#7c839b",
"rgb": {
"r": 124,
"g": 131,
"b": 155
}
},
"700": {
"hex": "#555b6f",
"rgb": {
"r": 85,
"g": 91,
"b": 111
}
},
"800": {
"hex": "#313645",
"rgb": {
"r": 49,
"g": 54,
"b": 69
}
},
"900": {
"hex": "#151821",
"rgb": {
"r": 21,
"g": 24,
"b": 33
}
},
"950": {
"hex": "#020305",
"rgb": {
"r": 2,
"g": 3,
"b": 5
}
}
}
},
{
"name": "twilight-periwinkle",
"harmony": "Palette",
"hex": "#8A93B5",
"rgb": {
"r": 138,
"g": 147,
"b": 181
},
"hsl": {
"h": 227,
"s": 23,
"l": 63
},
"value": "#8A93B5",
"tonalScale": {
"50": {
"hex": "#fcfdff",
"rgb": {
"r": 252,
"g": 253,
"b": 255
}
},
"100": {
"hex": "#f8f9fd",
"rgb": {
"r": 248,
"g": 249,
"b": 253
}
},
"200": {
"hex": "#f1f3fa",
"rgb": {
"r": 241,
"g": 243,
"b": 250
}
},
"300": {
"hex": "#e6eaf5",
"rgb": {
"r": 230,
"g": 234,
"b": 245
}
},
"400": {
"hex": "#d9deed",
"rgb": {
"r": 217,
"g": 222,
"b": 237
}
},
"500": {
"hex": "#8A93B5",
"rgb": {
"r": 138,
"g": 147,
"b": 181
}
},
"600": {
"hex": "#a3a8ba",
"rgb": {
"r": 163,
"g": 168,
"b": 186
}
},
"700": {
"hex": "#727685",
"rgb": {
"r": 114,
"g": 118,
"b": 133
}
},
"800": {
"hex": "#444753",
"rgb": {
"r": 68,
"g": 71,
"b": 83
}
},
"900": {
"hex": "#1f2128",
"rgb": {
"r": 31,
"g": 33,
"b": 40
}
},
"950": {
"hex": "#050507",
"rgb": {
"r": 5,
"g": 5,
"b": 7
}
}
}
},
{
"name": "misty-lavender",
"harmony": "Palette",
"hex": "#B8BED1",
"rgb": {
"r": 184,
"g": 190,
"b": 209
},
"hsl": {
"h": 226,
"s": 21,
"l": 77
},
"value": "#B8BED1",
"tonalScale": {
"50": {
"hex": "#fdfeff",
"rgb": {
"r": 253,
"g": 254,
"b": 255
}
},
"100": {
"hex": "#fbfcfe",
"rgb": {
"r": 251,
"g": 252,
"b": 254
}
},
"200": {
"hex": "#f7f8fc",
"rgb": {
"r": 247,
"g": 248,
"b": 252
}
},
"300": {
"hex": "#f1f3f8",
"rgb": {
"r": 241,
"g": 243,
"b": 248
}
},
"400": {
"hex": "#eaecf4",
"rgb": {
"r": 234,
"g": 236,
"b": 244
}
},
"500": {
"hex": "#B8BED1",
"rgb": {
"r": 184,
"g": 190,
"b": 209
}
},
"600": {
"hex": "#babdc6",
"rgb": {
"r": 186,
"g": 189,
"b": 198
}
},
"700": {
"hex": "#82858c",
"rgb": {
"r": 130,
"g": 133,
"b": 140
}
},
"800": {
"hex": "#4f5157",
"rgb": {
"r": 79,
"g": 81,
"b": 87
}
},
"900": {
"hex": "#26272a",
"rgb": {
"r": 38,
"g": 39,
"b": 42
}
},
"950": {
"hex": "#060708",
"rgb": {
"r": 6,
"g": 7,
"b": 8
}
}
}
},
{
"name": "deep-indigo-dusk",
"harmony": "Palette",
"hex": "#343B56",
"rgb": {
"r": 52,
"g": 59,
"b": 86
},
"hsl": {
"h": 228,
"s": 25,
"l": 27
},
"value": "#343B56",
"tonalScale": {
"50": {
"hex": "#f9fafd",
"rgb": {
"r": 249,
"g": 250,
"b": 253
}
},
"100": {
"hex": "#f0f2f8",
"rgb": {
"r": 240,
"g": 242,
"b": 248
}
},
"200": {
"hex": "#e0e3ec",
"rgb": {
"r": 224,
"g": 227,
"b": 236
}
},
"300": {
"hex": "#cacfde",
"rgb": {
"r": 202,
"g": 207,
"b": 222
}
},
"400": {
"hex": "#adb3c8",
"rgb": {
"r": 173,
"g": 179,
"b": 200
}
},
"500": {
"hex": "#343B56",
"rgb": {
"r": 52,
"g": 59,
"b": 86
}
},
"600": {
"hex": "#686e85",
"rgb": {
"r": 104,
"g": 110,
"b": 133
}
},
"700": {
"hex": "#464c5f",
"rgb": {
"r": 70,
"g": 76,
"b": 95
}
},
"800": {
"hex": "#282c3b",
"rgb": {
"r": 40,
"g": 44,
"b": 59
}
},
"900": {
"hex": "#10121b",
"rgb": {
"r": 16,
"g": 18,
"b": 27
}
},
"950": {
"hex": "#020204",
"rgb": {
"r": 2,
"g": 2,
"b": 4
}
}
}
},
{
"name": "midnight-purple",
"harmony": "Palette",
"hex": "#1D2130",
"rgb": {
"r": 29,
"g": 33,
"b": 48
},
"hsl": {
"h": 227,
"s": 25,
"l": 15
},
"value": "#1D2130",
"tonalScale": {
"50": {
"hex": "#f7f8fb",
"rgb": {
"r": 247,
"g": 248,
"b": 251
}
},
"100": {
"hex": "#edeef3",
"rgb": {
"r": 237,
"g": 238,
"b": 243
}
},
"200": {
"hex": "#d8dbe3",
"rgb": {
"r": 216,
"g": 219,
"b": 227
}
},
"300": {
"hex": "#bec1ce",
"rgb": {
"r": 190,
"g": 193,
"b": 206
}
},
"400": {
"hex": "#9a9fb0",
"rgb": {
"r": 154,
"g": 159,
"b": 176
}
},
"500": {
"hex": "#1D2130",
"rgb": {
"r": 29,
"g": 33,
"b": 48
}
},
"600": {
"hex": "#4e5466",
"rgb": {
"r": 78,
"g": 84,
"b": 102
}
},
"700": {
"hex": "#343948",
"rgb": {
"r": 52,
"g": 57,
"b": 72
}
},
"800": {
"hex": "#1c202b",
"rgb": {
"r": 28,
"g": 32,
"b": 43
}
},
"900": {
"hex": "#090b12",
"rgb": {
"r": 9,
"g": 11,
"b": 18
}
},
"950": {
"hex": "#010102",
"rgb": {
"r": 1,
"g": 1,
"b": 2
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 future-dusk,Palette,#4C5578,"rgb(76, 85, 120)","hsl(228, 22%, 38%)",#4C5578,#fafbfe,#f3f5fa,#e5e9f2,#d4d8e8,#bcc3d8,#4C5578,#7c839b,#555b6f,#313645,#151821,#020305 twilight-periwinkle,Palette,#8A93B5,"rgb(138, 147, 181)","hsl(227, 23%, 63%)",#8A93B5,#fcfdff,#f8f9fd,#f1f3fa,#e6eaf5,#d9deed,#8A93B5,#a3a8ba,#727685,#444753,#1f2128,#050507 misty-lavender,Palette,#B8BED1,"rgb(184, 190, 209)","hsl(226, 21%, 77%)",#B8BED1,#fdfeff,#fbfcfe,#f7f8fc,#f1f3f8,#eaecf4,#B8BED1,#babdc6,#82858c,#4f5157,#26272a,#060708 deep-indigo-dusk,Palette,#343B56,"rgb(52, 59, 86)","hsl(228, 25%, 27%)",#343B56,#f9fafd,#f0f2f8,#e0e3ec,#cacfde,#adb3c8,#343B56,#686e85,#464c5f,#282c3b,#10121b,#020204 midnight-purple,Palette,#1D2130,"rgb(29, 33, 48)","hsl(227, 25%, 15%)",#1D2130,#f7f8fb,#edeef3,#d8dbe3,#bec1ce,#9a9fb0,#1D2130,#4e5466,#343948,#1c202b,#090b12,#010102
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 76 85 120 future-dusk 250 251 254 future-dusk-50 243 245 250 future-dusk-100 229 233 242 future-dusk-200 212 216 232 future-dusk-300 188 195 216 future-dusk-400 76 85 120 future-dusk-500 124 131 155 future-dusk-600 85 91 111 future-dusk-700 49 54 69 future-dusk-800 21 24 33 future-dusk-900 2 3 5 future-dusk-950 138 147 181 twilight-periwinkle 252 253 255 twilight-periwinkle-50 248 249 253 twilight-periwinkle-100 241 243 250 twilight-periwinkle-200 230 234 245 twilight-periwinkle-300 217 222 237 twilight-periwinkle-400 138 147 181 twilight-periwinkle-500 163 168 186 twilight-periwinkle-600 114 118 133 twilight-periwinkle-700 68 71 83 twilight-periwinkle-800 31 33 40 twilight-periwinkle-900 5 5 7 twilight-periwinkle-950 184 190 209 misty-lavender 253 254 255 misty-lavender-50 251 252 254 misty-lavender-100 247 248 252 misty-lavender-200 241 243 248 misty-lavender-300 234 236 244 misty-lavender-400 184 190 209 misty-lavender-500 186 189 198 misty-lavender-600 130 133 140 misty-lavender-700 79 81 87 misty-lavender-800 38 39 42 misty-lavender-900 6 7 8 misty-lavender-950 52 59 86 deep-indigo-dusk 249 250 253 deep-indigo-dusk-50 240 242 248 deep-indigo-dusk-100 224 227 236 deep-indigo-dusk-200 202 207 222 deep-indigo-dusk-300 173 179 200 deep-indigo-dusk-400 52 59 86 deep-indigo-dusk-500 104 110 133 deep-indigo-dusk-600 70 76 95 deep-indigo-dusk-700 40 44 59 deep-indigo-dusk-800 16 18 27 deep-indigo-dusk-900 2 2 4 deep-indigo-dusk-950 29 33 48 midnight-purple 247 248 251 midnight-purple-50 237 238 243 midnight-purple-100 216 219 227 midnight-purple-200 190 193 206 midnight-purple-300 154 159 176 midnight-purple-400 29 33 48 midnight-purple-500 78 84 102 midnight-purple-600 52 57 72 midnight-purple-700 28 32 43 midnight-purple-800 9 11 18 midnight-purple-900 1 1 2 midnight-purple-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.