← Back to Tools
Design bold, futuristic 2027 branding with this luminous blue palette featuring #183F8F luminous blue, #4A6FC4 vivid azure, #93AEE0 pale sapphire, #122B63 deep navy, and #081228 midnight blue.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--luminous-blue: #183F8F;
--luminous-blue-50: #f4fbff;
--luminous-blue-100: #e9f4ff;
--luminous-blue-200: #d3e5fd;
--luminous-blue-300: #b5d2f6;
--luminous-blue-400: #90b8ea;
--luminous-blue-500: #183F8F;
--luminous-blue-600: #4472aa;
--luminous-blue-700: #274e7e;
--luminous-blue-800: #0e2d52;
--luminous-blue-900: #02132a;
--luminous-blue-950: #000208;
--vivid-azure: #4A6FC4;
--vivid-azure-50: #f8fcff;
--vivid-azure-100: #f1f7ff;
--vivid-azure-200: #e3eeff;
--vivid-azure-300: #d0e1ff;
--vivid-azure-400: #b8d0f9;
--vivid-azure-500: #4A6FC4;
--vivid-azure-600: #7994c3;
--vivid-azure-700: #51678f;
--vivid-azure-800: #2d3e5b;
--vivid-azure-900: #111c2f;
--vivid-azure-950: #02040a;
--pale-sapphire: #93AEE0;
--pale-sapphire-50: #fcfeff;
--pale-sapphire-100: #f8fbff;
--pale-sapphire-200: #f1f6ff;
--pale-sapphire-300: #e7f0fe;
--pale-sapphire-400: #dbe7fc;
--pale-sapphire-500: #93AEE0;
--pale-sapphire-600: #a7b6cd;
--pale-sapphire-700: #748093;
--pale-sapphire-800: #454e5d;
--pale-sapphire-900: #1f252e;
--pale-sapphire-950: #05060a;
--deep-navy: #122B63;
--deep-navy-50: #f4faff;
--deep-navy-100: #e8f1fd;
--deep-navy-200: #d0e0f5;
--deep-navy-300: #b1c9e9;
--deep-navy-400: #89a9d6;
--deep-navy-500: #122B63;
--deep-navy-600: #3b5f90;
--deep-navy-700: #22416a;
--deep-navy-800: #0d2544;
--deep-navy-900: #020e22;
--deep-navy-950: #000106;
--midnight-blue: #081228;
--midnight-blue-50: #f4f8fd;
--midnight-blue-100: #e6ecf5;
--midnight-blue-200: #cbd5e4;
--midnight-blue-300: #a7b7ce;
--midnight-blue-400: #7990ae;
--midnight-blue-500: #081228;
--midnight-blue-600: #263e5e;
--midnight-blue-700: #152944;
--midnight-blue-800: #06152a;
--midnight-blue-900: #010613;
--midnight-blue-950: #000102;
}
$luminous-blue: #183F8F; $luminous-blue-50: #f4fbff; $luminous-blue-100: #e9f4ff; $luminous-blue-200: #d3e5fd; $luminous-blue-300: #b5d2f6; $luminous-blue-400: #90b8ea; $luminous-blue-500: #183F8F; $luminous-blue-600: #4472aa; $luminous-blue-700: #274e7e; $luminous-blue-800: #0e2d52; $luminous-blue-900: #02132a; $luminous-blue-950: #000208; $vivid-azure: #4A6FC4; $vivid-azure-50: #f8fcff; $vivid-azure-100: #f1f7ff; $vivid-azure-200: #e3eeff; $vivid-azure-300: #d0e1ff; $vivid-azure-400: #b8d0f9; $vivid-azure-500: #4A6FC4; $vivid-azure-600: #7994c3; $vivid-azure-700: #51678f; $vivid-azure-800: #2d3e5b; $vivid-azure-900: #111c2f; $vivid-azure-950: #02040a; $pale-sapphire: #93AEE0; $pale-sapphire-50: #fcfeff; $pale-sapphire-100: #f8fbff; $pale-sapphire-200: #f1f6ff; $pale-sapphire-300: #e7f0fe; $pale-sapphire-400: #dbe7fc; $pale-sapphire-500: #93AEE0; $pale-sapphire-600: #a7b6cd; $pale-sapphire-700: #748093; $pale-sapphire-800: #454e5d; $pale-sapphire-900: #1f252e; $pale-sapphire-950: #05060a; $deep-navy: #122B63; $deep-navy-50: #f4faff; $deep-navy-100: #e8f1fd; $deep-navy-200: #d0e0f5; $deep-navy-300: #b1c9e9; $deep-navy-400: #89a9d6; $deep-navy-500: #122B63; $deep-navy-600: #3b5f90; $deep-navy-700: #22416a; $deep-navy-800: #0d2544; $deep-navy-900: #020e22; $deep-navy-950: #000106; $midnight-blue: #081228; $midnight-blue-50: #f4f8fd; $midnight-blue-100: #e6ecf5; $midnight-blue-200: #cbd5e4; $midnight-blue-300: #a7b7ce; $midnight-blue-400: #7990ae; $midnight-blue-500: #081228; $midnight-blue-600: #263e5e; $midnight-blue-700: #152944; $midnight-blue-800: #06152a; $midnight-blue-900: #010613; $midnight-blue-950: #000102;
colors: {
'luminous-blue': {
50: '#f4fbff',
100: '#e9f4ff',
200: '#d3e5fd',
300: '#b5d2f6',
400: '#90b8ea',
500: '#183F8F',
600: '#4472aa',
700: '#274e7e',
800: '#0e2d52',
900: '#02132a',
950: '#000208',
DEFAULT: '#183F8F',
},
'vivid-azure': {
50: '#f8fcff',
100: '#f1f7ff',
200: '#e3eeff',
300: '#d0e1ff',
400: '#b8d0f9',
500: '#4A6FC4',
600: '#7994c3',
700: '#51678f',
800: '#2d3e5b',
900: '#111c2f',
950: '#02040a',
DEFAULT: '#4A6FC4',
},
'pale-sapphire': {
50: '#fcfeff',
100: '#f8fbff',
200: '#f1f6ff',
300: '#e7f0fe',
400: '#dbe7fc',
500: '#93AEE0',
600: '#a7b6cd',
700: '#748093',
800: '#454e5d',
900: '#1f252e',
950: '#05060a',
DEFAULT: '#93AEE0',
},
'deep-navy': {
50: '#f4faff',
100: '#e8f1fd',
200: '#d0e0f5',
300: '#b1c9e9',
400: '#89a9d6',
500: '#122B63',
600: '#3b5f90',
700: '#22416a',
800: '#0d2544',
900: '#020e22',
950: '#000106',
DEFAULT: '#122B63',
},
'midnight-blue': {
50: '#f4f8fd',
100: '#e6ecf5',
200: '#cbd5e4',
300: '#a7b7ce',
400: '#7990ae',
500: '#081228',
600: '#263e5e',
700: '#152944',
800: '#06152a',
900: '#010613',
950: '#000102',
DEFAULT: '#081228',
},
},
[
{
"name": "luminous-blue",
"harmony": "Palette",
"hex": "#183F8F",
"rgb": {
"r": 24,
"g": 63,
"b": 143
},
"hsl": {
"h": 220,
"s": 71,
"l": 33
},
"value": "#183F8F",
"tonalScale": {
"50": {
"hex": "#f4fbff",
"rgb": {
"r": 244,
"g": 251,
"b": 255
}
},
"100": {
"hex": "#e9f4ff",
"rgb": {
"r": 233,
"g": 244,
"b": 255
}
},
"200": {
"hex": "#d3e5fd",
"rgb": {
"r": 211,
"g": 229,
"b": 253
}
},
"300": {
"hex": "#b5d2f6",
"rgb": {
"r": 181,
"g": 210,
"b": 246
}
},
"400": {
"hex": "#90b8ea",
"rgb": {
"r": 144,
"g": 184,
"b": 234
}
},
"500": {
"hex": "#183F8F",
"rgb": {
"r": 24,
"g": 63,
"b": 143
}
},
"600": {
"hex": "#4472aa",
"rgb": {
"r": 68,
"g": 114,
"b": 170
}
},
"700": {
"hex": "#274e7e",
"rgb": {
"r": 39,
"g": 78,
"b": 126
}
},
"800": {
"hex": "#0e2d52",
"rgb": {
"r": 14,
"g": 45,
"b": 82
}
},
"900": {
"hex": "#02132a",
"rgb": {
"r": 2,
"g": 19,
"b": 42
}
},
"950": {
"hex": "#000208",
"rgb": {
"r": 0,
"g": 2,
"b": 8
}
}
}
},
{
"name": "vivid-azure",
"harmony": "Palette",
"hex": "#4A6FC4",
"rgb": {
"r": 74,
"g": 111,
"b": 196
},
"hsl": {
"h": 222,
"s": 51,
"l": 53
},
"value": "#4A6FC4",
"tonalScale": {
"50": {
"hex": "#f8fcff",
"rgb": {
"r": 248,
"g": 252,
"b": 255
}
},
"100": {
"hex": "#f1f7ff",
"rgb": {
"r": 241,
"g": 247,
"b": 255
}
},
"200": {
"hex": "#e3eeff",
"rgb": {
"r": 227,
"g": 238,
"b": 255
}
},
"300": {
"hex": "#d0e1ff",
"rgb": {
"r": 208,
"g": 225,
"b": 255
}
},
"400": {
"hex": "#b8d0f9",
"rgb": {
"r": 184,
"g": 208,
"b": 249
}
},
"500": {
"hex": "#4A6FC4",
"rgb": {
"r": 74,
"g": 111,
"b": 196
}
},
"600": {
"hex": "#7994c3",
"rgb": {
"r": 121,
"g": 148,
"b": 195
}
},
"700": {
"hex": "#51678f",
"rgb": {
"r": 81,
"g": 103,
"b": 143
}
},
"800": {
"hex": "#2d3e5b",
"rgb": {
"r": 45,
"g": 62,
"b": 91
}
},
"900": {
"hex": "#111c2f",
"rgb": {
"r": 17,
"g": 28,
"b": 47
}
},
"950": {
"hex": "#02040a",
"rgb": {
"r": 2,
"g": 4,
"b": 10
}
}
}
},
{
"name": "pale-sapphire",
"harmony": "Palette",
"hex": "#93AEE0",
"rgb": {
"r": 147,
"g": 174,
"b": 224
},
"hsl": {
"h": 219,
"s": 55,
"l": 73
},
"value": "#93AEE0",
"tonalScale": {
"50": {
"hex": "#fcfeff",
"rgb": {
"r": 252,
"g": 254,
"b": 255
}
},
"100": {
"hex": "#f8fbff",
"rgb": {
"r": 248,
"g": 251,
"b": 255
}
},
"200": {
"hex": "#f1f6ff",
"rgb": {
"r": 241,
"g": 246,
"b": 255
}
},
"300": {
"hex": "#e7f0fe",
"rgb": {
"r": 231,
"g": 240,
"b": 254
}
},
"400": {
"hex": "#dbe7fc",
"rgb": {
"r": 219,
"g": 231,
"b": 252
}
},
"500": {
"hex": "#93AEE0",
"rgb": {
"r": 147,
"g": 174,
"b": 224
}
},
"600": {
"hex": "#a7b6cd",
"rgb": {
"r": 167,
"g": 182,
"b": 205
}
},
"700": {
"hex": "#748093",
"rgb": {
"r": 116,
"g": 128,
"b": 147
}
},
"800": {
"hex": "#454e5d",
"rgb": {
"r": 69,
"g": 78,
"b": 93
}
},
"900": {
"hex": "#1f252e",
"rgb": {
"r": 31,
"g": 37,
"b": 46
}
},
"950": {
"hex": "#05060a",
"rgb": {
"r": 5,
"g": 6,
"b": 10
}
}
}
},
{
"name": "deep-navy",
"harmony": "Palette",
"hex": "#122B63",
"rgb": {
"r": 18,
"g": 43,
"b": 99
},
"hsl": {
"h": 221,
"s": 69,
"l": 23
},
"value": "#122B63",
"tonalScale": {
"50": {
"hex": "#f4faff",
"rgb": {
"r": 244,
"g": 250,
"b": 255
}
},
"100": {
"hex": "#e8f1fd",
"rgb": {
"r": 232,
"g": 241,
"b": 253
}
},
"200": {
"hex": "#d0e0f5",
"rgb": {
"r": 208,
"g": 224,
"b": 245
}
},
"300": {
"hex": "#b1c9e9",
"rgb": {
"r": 177,
"g": 201,
"b": 233
}
},
"400": {
"hex": "#89a9d6",
"rgb": {
"r": 137,
"g": 169,
"b": 214
}
},
"500": {
"hex": "#122B63",
"rgb": {
"r": 18,
"g": 43,
"b": 99
}
},
"600": {
"hex": "#3b5f90",
"rgb": {
"r": 59,
"g": 95,
"b": 144
}
},
"700": {
"hex": "#22416a",
"rgb": {
"r": 34,
"g": 65,
"b": 106
}
},
"800": {
"hex": "#0d2544",
"rgb": {
"r": 13,
"g": 37,
"b": 68
}
},
"900": {
"hex": "#020e22",
"rgb": {
"r": 2,
"g": 14,
"b": 34
}
},
"950": {
"hex": "#000106",
"rgb": {
"r": 0,
"g": 1,
"b": 6
}
}
}
},
{
"name": "midnight-blue",
"harmony": "Palette",
"hex": "#081228",
"rgb": {
"r": 8,
"g": 18,
"b": 40
},
"hsl": {
"h": 221,
"s": 67,
"l": 9
},
"value": "#081228",
"tonalScale": {
"50": {
"hex": "#f4f8fd",
"rgb": {
"r": 244,
"g": 248,
"b": 253
}
},
"100": {
"hex": "#e6ecf5",
"rgb": {
"r": 230,
"g": 236,
"b": 245
}
},
"200": {
"hex": "#cbd5e4",
"rgb": {
"r": 203,
"g": 213,
"b": 228
}
},
"300": {
"hex": "#a7b7ce",
"rgb": {
"r": 167,
"g": 183,
"b": 206
}
},
"400": {
"hex": "#7990ae",
"rgb": {
"r": 121,
"g": 144,
"b": 174
}
},
"500": {
"hex": "#081228",
"rgb": {
"r": 8,
"g": 18,
"b": 40
}
},
"600": {
"hex": "#263e5e",
"rgb": {
"r": 38,
"g": 62,
"b": 94
}
},
"700": {
"hex": "#152944",
"rgb": {
"r": 21,
"g": 41,
"b": 68
}
},
"800": {
"hex": "#06152a",
"rgb": {
"r": 6,
"g": 21,
"b": 42
}
},
"900": {
"hex": "#010613",
"rgb": {
"r": 1,
"g": 6,
"b": 19
}
},
"950": {
"hex": "#000102",
"rgb": {
"r": 0,
"g": 1,
"b": 2
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 luminous-blue,Palette,#183F8F,"rgb(24, 63, 143)","hsl(220, 71%, 33%)",#183F8F,#f4fbff,#e9f4ff,#d3e5fd,#b5d2f6,#90b8ea,#183F8F,#4472aa,#274e7e,#0e2d52,#02132a,#000208 vivid-azure,Palette,#4A6FC4,"rgb(74, 111, 196)","hsl(222, 51%, 53%)",#4A6FC4,#f8fcff,#f1f7ff,#e3eeff,#d0e1ff,#b8d0f9,#4A6FC4,#7994c3,#51678f,#2d3e5b,#111c2f,#02040a pale-sapphire,Palette,#93AEE0,"rgb(147, 174, 224)","hsl(219, 55%, 73%)",#93AEE0,#fcfeff,#f8fbff,#f1f6ff,#e7f0fe,#dbe7fc,#93AEE0,#a7b6cd,#748093,#454e5d,#1f252e,#05060a deep-navy,Palette,#122B63,"rgb(18, 43, 99)","hsl(221, 69%, 23%)",#122B63,#f4faff,#e8f1fd,#d0e0f5,#b1c9e9,#89a9d6,#122B63,#3b5f90,#22416a,#0d2544,#020e22,#000106 midnight-blue,Palette,#081228,"rgb(8, 18, 40)","hsl(221, 67%, 9%)",#081228,#f4f8fd,#e6ecf5,#cbd5e4,#a7b7ce,#7990ae,#081228,#263e5e,#152944,#06152a,#010613,#000102
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 24 63 143 luminous-blue 244 251 255 luminous-blue-50 233 244 255 luminous-blue-100 211 229 253 luminous-blue-200 181 210 246 luminous-blue-300 144 184 234 luminous-blue-400 24 63 143 luminous-blue-500 68 114 170 luminous-blue-600 39 78 126 luminous-blue-700 14 45 82 luminous-blue-800 2 19 42 luminous-blue-900 0 2 8 luminous-blue-950 74 111 196 vivid-azure 248 252 255 vivid-azure-50 241 247 255 vivid-azure-100 227 238 255 vivid-azure-200 208 225 255 vivid-azure-300 184 208 249 vivid-azure-400 74 111 196 vivid-azure-500 121 148 195 vivid-azure-600 81 103 143 vivid-azure-700 45 62 91 vivid-azure-800 17 28 47 vivid-azure-900 2 4 10 vivid-azure-950 147 174 224 pale-sapphire 252 254 255 pale-sapphire-50 248 251 255 pale-sapphire-100 241 246 255 pale-sapphire-200 231 240 254 pale-sapphire-300 219 231 252 pale-sapphire-400 147 174 224 pale-sapphire-500 167 182 205 pale-sapphire-600 116 128 147 pale-sapphire-700 69 78 93 pale-sapphire-800 31 37 46 pale-sapphire-900 5 6 10 pale-sapphire-950 18 43 99 deep-navy 244 250 255 deep-navy-50 232 241 253 deep-navy-100 208 224 245 deep-navy-200 177 201 233 deep-navy-300 137 169 214 deep-navy-400 18 43 99 deep-navy-500 59 95 144 deep-navy-600 34 65 106 deep-navy-700 13 37 68 deep-navy-800 2 14 34 deep-navy-900 0 1 6 deep-navy-950 8 18 40 midnight-blue 244 248 253 midnight-blue-50 230 236 245 midnight-blue-100 203 213 228 midnight-blue-200 167 183 206 midnight-blue-300 121 144 174 midnight-blue-400 8 18 40 midnight-blue-500 38 62 94 midnight-blue-600 21 41 68 midnight-blue-700 6 21 42 midnight-blue-800 1 6 19 midnight-blue-900 0 1 2 midnight-blue-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.