← Back to Tools
Map out sleek corporate neutrals paired with one sharp accent, grounding layouts with cool charcoal (#242B35) and ash gray (#E2E8F0), highlighted by an electric tech blue (#0066FF).
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--cool-charcoal: #242B35;
--cool-charcoal-50: #f8f9fb;
--cool-charcoal-100: #eef0f3;
--cool-charcoal-200: #dbdfe3;
--cool-charcoal-300: #c2c7ce;
--cool-charcoal-400: #a1a8b2;
--cool-charcoal-500: #242B35;
--cool-charcoal-600: #575f6a;
--cool-charcoal-700: #3a414a;
--cool-charcoal-800: #20252c;
--cool-charcoal-900: #0b0f13;
--cool-charcoal-950: #010202;
--ash-gray: #E2E8F0;
--ash-gray-50: #feffff;
--ash-gray-100: #fdfeff;
--ash-gray-200: #fcfdfe;
--ash-gray-300: #fafbfd;
--ash-gray-400: #f7f9fc;
--ash-gray-500: #E2E8F0;
--ash-gray-600: #ccced2;
--ash-gray-700: #909295;
--ash-gray-800: #58595c;
--ash-gray-900: #2a2b2d;
--ash-gray-950: #080809;
--electric-tech-blue: #0066FF;
--electric-tech-blue-50: #f0fdff;
--electric-tech-blue-100: #e3f9ff;
--electric-tech-blue-200: #c8efff;
--electric-tech-blue-300: #a3e2ff;
--electric-tech-blue-400: #71cfff;
--electric-tech-blue-500: #0066FF;
--electric-tech-blue-600: #008fdd;
--electric-tech-blue-700: #0063a6;
--electric-tech-blue-800: #003b6e;
--electric-tech-blue-900: #001a3b;
--electric-tech-blue-950: #00030f;
}
$cool-charcoal: #242B35; $cool-charcoal-50: #f8f9fb; $cool-charcoal-100: #eef0f3; $cool-charcoal-200: #dbdfe3; $cool-charcoal-300: #c2c7ce; $cool-charcoal-400: #a1a8b2; $cool-charcoal-500: #242B35; $cool-charcoal-600: #575f6a; $cool-charcoal-700: #3a414a; $cool-charcoal-800: #20252c; $cool-charcoal-900: #0b0f13; $cool-charcoal-950: #010202; $ash-gray: #E2E8F0; $ash-gray-50: #feffff; $ash-gray-100: #fdfeff; $ash-gray-200: #fcfdfe; $ash-gray-300: #fafbfd; $ash-gray-400: #f7f9fc; $ash-gray-500: #E2E8F0; $ash-gray-600: #ccced2; $ash-gray-700: #909295; $ash-gray-800: #58595c; $ash-gray-900: #2a2b2d; $ash-gray-950: #080809; $electric-tech-blue: #0066FF; $electric-tech-blue-50: #f0fdff; $electric-tech-blue-100: #e3f9ff; $electric-tech-blue-200: #c8efff; $electric-tech-blue-300: #a3e2ff; $electric-tech-blue-400: #71cfff; $electric-tech-blue-500: #0066FF; $electric-tech-blue-600: #008fdd; $electric-tech-blue-700: #0063a6; $electric-tech-blue-800: #003b6e; $electric-tech-blue-900: #001a3b; $electric-tech-blue-950: #00030f;
colors: {
'cool-charcoal': {
50: '#f8f9fb',
100: '#eef0f3',
200: '#dbdfe3',
300: '#c2c7ce',
400: '#a1a8b2',
500: '#242B35',
600: '#575f6a',
700: '#3a414a',
800: '#20252c',
900: '#0b0f13',
950: '#010202',
DEFAULT: '#242B35',
},
'ash-gray': {
50: '#feffff',
100: '#fdfeff',
200: '#fcfdfe',
300: '#fafbfd',
400: '#f7f9fc',
500: '#E2E8F0',
600: '#ccced2',
700: '#909295',
800: '#58595c',
900: '#2a2b2d',
950: '#080809',
DEFAULT: '#E2E8F0',
},
'electric-tech-blue': {
50: '#f0fdff',
100: '#e3f9ff',
200: '#c8efff',
300: '#a3e2ff',
400: '#71cfff',
500: '#0066FF',
600: '#008fdd',
700: '#0063a6',
800: '#003b6e',
900: '#001a3b',
950: '#00030f',
DEFAULT: '#0066FF',
},
},
[
{
"name": "cool-charcoal",
"harmony": "Palette",
"hex": "#242B35",
"rgb": {
"r": 36,
"g": 43,
"b": 53
},
"hsl": {
"h": 215,
"s": 19,
"l": 17
},
"value": "#242B35",
"tonalScale": {
"50": {
"hex": "#f8f9fb",
"rgb": {
"r": 248,
"g": 249,
"b": 251
}
},
"100": {
"hex": "#eef0f3",
"rgb": {
"r": 238,
"g": 240,
"b": 243
}
},
"200": {
"hex": "#dbdfe3",
"rgb": {
"r": 219,
"g": 223,
"b": 227
}
},
"300": {
"hex": "#c2c7ce",
"rgb": {
"r": 194,
"g": 199,
"b": 206
}
},
"400": {
"hex": "#a1a8b2",
"rgb": {
"r": 161,
"g": 168,
"b": 178
}
},
"500": {
"hex": "#242B35",
"rgb": {
"r": 36,
"g": 43,
"b": 53
}
},
"600": {
"hex": "#575f6a",
"rgb": {
"r": 87,
"g": 95,
"b": 106
}
},
"700": {
"hex": "#3a414a",
"rgb": {
"r": 58,
"g": 65,
"b": 74
}
},
"800": {
"hex": "#20252c",
"rgb": {
"r": 32,
"g": 37,
"b": 44
}
},
"900": {
"hex": "#0b0f13",
"rgb": {
"r": 11,
"g": 15,
"b": 19
}
},
"950": {
"hex": "#010202",
"rgb": {
"r": 1,
"g": 2,
"b": 2
}
}
}
},
{
"name": "ash-gray",
"harmony": "Palette",
"hex": "#E2E8F0",
"rgb": {
"r": 226,
"g": 232,
"b": 240
},
"hsl": {
"h": 214,
"s": 32,
"l": 91
},
"value": "#E2E8F0",
"tonalScale": {
"50": {
"hex": "#feffff",
"rgb": {
"r": 254,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#fdfeff",
"rgb": {
"r": 253,
"g": 254,
"b": 255
}
},
"200": {
"hex": "#fcfdfe",
"rgb": {
"r": 252,
"g": 253,
"b": 254
}
},
"300": {
"hex": "#fafbfd",
"rgb": {
"r": 250,
"g": 251,
"b": 253
}
},
"400": {
"hex": "#f7f9fc",
"rgb": {
"r": 247,
"g": 249,
"b": 252
}
},
"500": {
"hex": "#E2E8F0",
"rgb": {
"r": 226,
"g": 232,
"b": 240
}
},
"600": {
"hex": "#ccced2",
"rgb": {
"r": 204,
"g": 206,
"b": 210
}
},
"700": {
"hex": "#909295",
"rgb": {
"r": 144,
"g": 146,
"b": 149
}
},
"800": {
"hex": "#58595c",
"rgb": {
"r": 88,
"g": 89,
"b": 92
}
},
"900": {
"hex": "#2a2b2d",
"rgb": {
"r": 42,
"g": 43,
"b": 45
}
},
"950": {
"hex": "#080809",
"rgb": {
"r": 8,
"g": 8,
"b": 9
}
}
}
},
{
"name": "electric-tech-blue",
"harmony": "Palette",
"hex": "#0066FF",
"rgb": {
"r": 0,
"g": 102,
"b": 255
},
"hsl": {
"h": 216,
"s": 100,
"l": 50
},
"value": "#0066FF",
"tonalScale": {
"50": {
"hex": "#f0fdff",
"rgb": {
"r": 240,
"g": 253,
"b": 255
}
},
"100": {
"hex": "#e3f9ff",
"rgb": {
"r": 227,
"g": 249,
"b": 255
}
},
"200": {
"hex": "#c8efff",
"rgb": {
"r": 200,
"g": 239,
"b": 255
}
},
"300": {
"hex": "#a3e2ff",
"rgb": {
"r": 163,
"g": 226,
"b": 255
}
},
"400": {
"hex": "#71cfff",
"rgb": {
"r": 113,
"g": 207,
"b": 255
}
},
"500": {
"hex": "#0066FF",
"rgb": {
"r": 0,
"g": 102,
"b": 255
}
},
"600": {
"hex": "#008fdd",
"rgb": {
"r": 0,
"g": 143,
"b": 221
}
},
"700": {
"hex": "#0063a6",
"rgb": {
"r": 0,
"g": 99,
"b": 166
}
},
"800": {
"hex": "#003b6e",
"rgb": {
"r": 0,
"g": 59,
"b": 110
}
},
"900": {
"hex": "#001a3b",
"rgb": {
"r": 0,
"g": 26,
"b": 59
}
},
"950": {
"hex": "#00030f",
"rgb": {
"r": 0,
"g": 3,
"b": 15
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 cool-charcoal,Palette,#242B35,"rgb(36, 43, 53)","hsl(215, 19%, 17%)",#242B35,#f8f9fb,#eef0f3,#dbdfe3,#c2c7ce,#a1a8b2,#242B35,#575f6a,#3a414a,#20252c,#0b0f13,#010202 ash-gray,Palette,#E2E8F0,"rgb(226, 232, 240)","hsl(214, 32%, 91%)",#E2E8F0,#feffff,#fdfeff,#fcfdfe,#fafbfd,#f7f9fc,#E2E8F0,#ccced2,#909295,#58595c,#2a2b2d,#080809 electric-tech-blue,Palette,#0066FF,"rgb(0, 102, 255)","hsl(216, 100%, 50%)",#0066FF,#f0fdff,#e3f9ff,#c8efff,#a3e2ff,#71cfff,#0066FF,#008fdd,#0063a6,#003b6e,#001a3b,#00030f
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 36 43 53 cool-charcoal 248 249 251 cool-charcoal-50 238 240 243 cool-charcoal-100 219 223 227 cool-charcoal-200 194 199 206 cool-charcoal-300 161 168 178 cool-charcoal-400 36 43 53 cool-charcoal-500 87 95 106 cool-charcoal-600 58 65 74 cool-charcoal-700 32 37 44 cool-charcoal-800 11 15 19 cool-charcoal-900 1 2 2 cool-charcoal-950 226 232 240 ash-gray 254 255 255 ash-gray-50 253 254 255 ash-gray-100 252 253 254 ash-gray-200 250 251 253 ash-gray-300 247 249 252 ash-gray-400 226 232 240 ash-gray-500 204 206 210 ash-gray-600 144 146 149 ash-gray-700 88 89 92 ash-gray-800 42 43 45 ash-gray-900 8 8 9 ash-gray-950 0 102 255 electric-tech-blue 240 253 255 electric-tech-blue-50 227 249 255 electric-tech-blue-100 200 239 255 electric-tech-blue-200 163 226 255 electric-tech-blue-300 113 207 255 electric-tech-blue-400 0 102 255 electric-tech-blue-500 0 143 221 electric-tech-blue-600 0 99 166 electric-tech-blue-700 0 59 110 electric-tech-blue-800 0 26 59 electric-tech-blue-900 0 3 15 electric-tech-blue-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.