← Back to Tools
Create modern tech and minimalist SaaS branding with this charcoal and mint palette featuring #36454F charcoal gray, #98FF98 fresh mint, #2F4F4F dark slate, and #B0E0B0 pale mint.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--charcoal-gray: #36454F;
--charcoal-gray-50: #f9fbfc;
--charcoal-gray-100: #f0f4f6;
--charcoal-gray-200: #e0e6e9;
--charcoal-gray-300: #cad3d9;
--charcoal-gray-400: #aebac2;
--charcoal-gray-500: #36454F;
--charcoal-gray-600: #69777f;
--charcoal-gray-700: #47535a;
--charcoal-gray-800: #283136;
--charcoal-gray-900: #0f1518;
--charcoal-gray-950: #020303;
--fresh-mint: #98FF98;
--fresh-mint-50: #fafffa;
--fresh-mint-100: #f7fff6;
--fresh-mint-200: #efffef;
--fresh-mint-300: #e6ffe5;
--fresh-mint-400: #daffd9;
--fresh-mint-500: #98FF98;
--fresh-mint-600: #a8d8a8;
--fresh-mint-700: #729a72;
--fresh-mint-800: #416042;
--fresh-mint-900: #1c301c;
--fresh-mint-950: #040a04;
--dark-slate: #2F4F4F;
--dark-slate-50: #f7fbfb;
--dark-slate-100: #eef5f5;
--dark-slate-200: #dde8e8;
--dark-slate-300: #c6d8d8;
--dark-slate-400: #a7c1c1;
--dark-slate-500: #2F4F4F;
--dark-slate-600: #617f7f;
--dark-slate-700: #405959;
--dark-slate-800: #223535;
--dark-slate-900: #0b1818;
--dark-slate-950: #010303;
--pale-mint: #B0E0B0;
--pale-mint-50: #fcfffc;
--pale-mint-100: #fafefa;
--pale-mint-200: #f4fdf4;
--pale-mint-300: #eefbee;
--pale-mint-400: #e5f8e5;
--pale-mint-500: #B0E0B0;
--pale-mint-600: #b5ccb5;
--pale-mint-700: #7e917e;
--pale-mint-800: #4b594b;
--pale-mint-900: #232c23;
--pale-mint-950: #050805;
}
$charcoal-gray: #36454F; $charcoal-gray-50: #f9fbfc; $charcoal-gray-100: #f0f4f6; $charcoal-gray-200: #e0e6e9; $charcoal-gray-300: #cad3d9; $charcoal-gray-400: #aebac2; $charcoal-gray-500: #36454F; $charcoal-gray-600: #69777f; $charcoal-gray-700: #47535a; $charcoal-gray-800: #283136; $charcoal-gray-900: #0f1518; $charcoal-gray-950: #020303; $fresh-mint: #98FF98; $fresh-mint-50: #fafffa; $fresh-mint-100: #f7fff6; $fresh-mint-200: #efffef; $fresh-mint-300: #e6ffe5; $fresh-mint-400: #daffd9; $fresh-mint-500: #98FF98; $fresh-mint-600: #a8d8a8; $fresh-mint-700: #729a72; $fresh-mint-800: #416042; $fresh-mint-900: #1c301c; $fresh-mint-950: #040a04; $dark-slate: #2F4F4F; $dark-slate-50: #f7fbfb; $dark-slate-100: #eef5f5; $dark-slate-200: #dde8e8; $dark-slate-300: #c6d8d8; $dark-slate-400: #a7c1c1; $dark-slate-500: #2F4F4F; $dark-slate-600: #617f7f; $dark-slate-700: #405959; $dark-slate-800: #223535; $dark-slate-900: #0b1818; $dark-slate-950: #010303; $pale-mint: #B0E0B0; $pale-mint-50: #fcfffc; $pale-mint-100: #fafefa; $pale-mint-200: #f4fdf4; $pale-mint-300: #eefbee; $pale-mint-400: #e5f8e5; $pale-mint-500: #B0E0B0; $pale-mint-600: #b5ccb5; $pale-mint-700: #7e917e; $pale-mint-800: #4b594b; $pale-mint-900: #232c23; $pale-mint-950: #050805;
colors: {
'charcoal-gray': {
50: '#f9fbfc',
100: '#f0f4f6',
200: '#e0e6e9',
300: '#cad3d9',
400: '#aebac2',
500: '#36454F',
600: '#69777f',
700: '#47535a',
800: '#283136',
900: '#0f1518',
950: '#020303',
DEFAULT: '#36454F',
},
'fresh-mint': {
50: '#fafffa',
100: '#f7fff6',
200: '#efffef',
300: '#e6ffe5',
400: '#daffd9',
500: '#98FF98',
600: '#a8d8a8',
700: '#729a72',
800: '#416042',
900: '#1c301c',
950: '#040a04',
DEFAULT: '#98FF98',
},
'dark-slate': {
50: '#f7fbfb',
100: '#eef5f5',
200: '#dde8e8',
300: '#c6d8d8',
400: '#a7c1c1',
500: '#2F4F4F',
600: '#617f7f',
700: '#405959',
800: '#223535',
900: '#0b1818',
950: '#010303',
DEFAULT: '#2F4F4F',
},
'pale-mint': {
50: '#fcfffc',
100: '#fafefa',
200: '#f4fdf4',
300: '#eefbee',
400: '#e5f8e5',
500: '#B0E0B0',
600: '#b5ccb5',
700: '#7e917e',
800: '#4b594b',
900: '#232c23',
950: '#050805',
DEFAULT: '#B0E0B0',
},
},
[
{
"name": "charcoal-gray",
"harmony": "Palette",
"hex": "#36454F",
"rgb": {
"r": 54,
"g": 69,
"b": 79
},
"hsl": {
"h": 204,
"s": 19,
"l": 26
},
"value": "#36454F",
"tonalScale": {
"50": {
"hex": "#f9fbfc",
"rgb": {
"r": 249,
"g": 251,
"b": 252
}
},
"100": {
"hex": "#f0f4f6",
"rgb": {
"r": 240,
"g": 244,
"b": 246
}
},
"200": {
"hex": "#e0e6e9",
"rgb": {
"r": 224,
"g": 230,
"b": 233
}
},
"300": {
"hex": "#cad3d9",
"rgb": {
"r": 202,
"g": 211,
"b": 217
}
},
"400": {
"hex": "#aebac2",
"rgb": {
"r": 174,
"g": 186,
"b": 194
}
},
"500": {
"hex": "#36454F",
"rgb": {
"r": 54,
"g": 69,
"b": 79
}
},
"600": {
"hex": "#69777f",
"rgb": {
"r": 105,
"g": 119,
"b": 127
}
},
"700": {
"hex": "#47535a",
"rgb": {
"r": 71,
"g": 83,
"b": 90
}
},
"800": {
"hex": "#283136",
"rgb": {
"r": 40,
"g": 49,
"b": 54
}
},
"900": {
"hex": "#0f1518",
"rgb": {
"r": 15,
"g": 21,
"b": 24
}
},
"950": {
"hex": "#020303",
"rgb": {
"r": 2,
"g": 3,
"b": 3
}
}
}
},
{
"name": "fresh-mint",
"harmony": "Palette",
"hex": "#98FF98",
"rgb": {
"r": 152,
"g": 255,
"b": 152
},
"hsl": {
"h": 120,
"s": 100,
"l": 80
},
"value": "#98FF98",
"tonalScale": {
"50": {
"hex": "#fafffa",
"rgb": {
"r": 250,
"g": 255,
"b": 250
}
},
"100": {
"hex": "#f7fff6",
"rgb": {
"r": 247,
"g": 255,
"b": 246
}
},
"200": {
"hex": "#efffef",
"rgb": {
"r": 239,
"g": 255,
"b": 239
}
},
"300": {
"hex": "#e6ffe5",
"rgb": {
"r": 230,
"g": 255,
"b": 229
}
},
"400": {
"hex": "#daffd9",
"rgb": {
"r": 218,
"g": 255,
"b": 217
}
},
"500": {
"hex": "#98FF98",
"rgb": {
"r": 152,
"g": 255,
"b": 152
}
},
"600": {
"hex": "#a8d8a8",
"rgb": {
"r": 168,
"g": 216,
"b": 168
}
},
"700": {
"hex": "#729a72",
"rgb": {
"r": 114,
"g": 154,
"b": 114
}
},
"800": {
"hex": "#416042",
"rgb": {
"r": 65,
"g": 96,
"b": 66
}
},
"900": {
"hex": "#1c301c",
"rgb": {
"r": 28,
"g": 48,
"b": 28
}
},
"950": {
"hex": "#040a04",
"rgb": {
"r": 4,
"g": 10,
"b": 4
}
}
}
},
{
"name": "dark-slate",
"harmony": "Palette",
"hex": "#2F4F4F",
"rgb": {
"r": 47,
"g": 79,
"b": 79
},
"hsl": {
"h": 180,
"s": 25,
"l": 25
},
"value": "#2F4F4F",
"tonalScale": {
"50": {
"hex": "#f7fbfb",
"rgb": {
"r": 247,
"g": 251,
"b": 251
}
},
"100": {
"hex": "#eef5f5",
"rgb": {
"r": 238,
"g": 245,
"b": 245
}
},
"200": {
"hex": "#dde8e8",
"rgb": {
"r": 221,
"g": 232,
"b": 232
}
},
"300": {
"hex": "#c6d8d8",
"rgb": {
"r": 198,
"g": 216,
"b": 216
}
},
"400": {
"hex": "#a7c1c1",
"rgb": {
"r": 167,
"g": 193,
"b": 193
}
},
"500": {
"hex": "#2F4F4F",
"rgb": {
"r": 47,
"g": 79,
"b": 79
}
},
"600": {
"hex": "#617f7f",
"rgb": {
"r": 97,
"g": 127,
"b": 127
}
},
"700": {
"hex": "#405959",
"rgb": {
"r": 64,
"g": 89,
"b": 89
}
},
"800": {
"hex": "#223535",
"rgb": {
"r": 34,
"g": 53,
"b": 53
}
},
"900": {
"hex": "#0b1818",
"rgb": {
"r": 11,
"g": 24,
"b": 24
}
},
"950": {
"hex": "#010303",
"rgb": {
"r": 1,
"g": 3,
"b": 3
}
}
}
},
{
"name": "pale-mint",
"harmony": "Palette",
"hex": "#B0E0B0",
"rgb": {
"r": 176,
"g": 224,
"b": 176
},
"hsl": {
"h": 120,
"s": 44,
"l": 78
},
"value": "#B0E0B0",
"tonalScale": {
"50": {
"hex": "#fcfffc",
"rgb": {
"r": 252,
"g": 255,
"b": 252
}
},
"100": {
"hex": "#fafefa",
"rgb": {
"r": 250,
"g": 254,
"b": 250
}
},
"200": {
"hex": "#f4fdf4",
"rgb": {
"r": 244,
"g": 253,
"b": 244
}
},
"300": {
"hex": "#eefbee",
"rgb": {
"r": 238,
"g": 251,
"b": 238
}
},
"400": {
"hex": "#e5f8e5",
"rgb": {
"r": 229,
"g": 248,
"b": 229
}
},
"500": {
"hex": "#B0E0B0",
"rgb": {
"r": 176,
"g": 224,
"b": 176
}
},
"600": {
"hex": "#b5ccb5",
"rgb": {
"r": 181,
"g": 204,
"b": 181
}
},
"700": {
"hex": "#7e917e",
"rgb": {
"r": 126,
"g": 145,
"b": 126
}
},
"800": {
"hex": "#4b594b",
"rgb": {
"r": 75,
"g": 89,
"b": 75
}
},
"900": {
"hex": "#232c23",
"rgb": {
"r": 35,
"g": 44,
"b": 35
}
},
"950": {
"hex": "#050805",
"rgb": {
"r": 5,
"g": 8,
"b": 5
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 charcoal-gray,Palette,#36454F,"rgb(54, 69, 79)","hsl(204, 19%, 26%)",#36454F,#f9fbfc,#f0f4f6,#e0e6e9,#cad3d9,#aebac2,#36454F,#69777f,#47535a,#283136,#0f1518,#020303 fresh-mint,Palette,#98FF98,"rgb(152, 255, 152)","hsl(120, 100%, 80%)",#98FF98,#fafffa,#f7fff6,#efffef,#e6ffe5,#daffd9,#98FF98,#a8d8a8,#729a72,#416042,#1c301c,#040a04 dark-slate,Palette,#2F4F4F,"rgb(47, 79, 79)","hsl(180, 25%, 25%)",#2F4F4F,#f7fbfb,#eef5f5,#dde8e8,#c6d8d8,#a7c1c1,#2F4F4F,#617f7f,#405959,#223535,#0b1818,#010303 pale-mint,Palette,#B0E0B0,"rgb(176, 224, 176)","hsl(120, 44%, 78%)",#B0E0B0,#fcfffc,#fafefa,#f4fdf4,#eefbee,#e5f8e5,#B0E0B0,#b5ccb5,#7e917e,#4b594b,#232c23,#050805
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 54 69 79 charcoal-gray 249 251 252 charcoal-gray-50 240 244 246 charcoal-gray-100 224 230 233 charcoal-gray-200 202 211 217 charcoal-gray-300 174 186 194 charcoal-gray-400 54 69 79 charcoal-gray-500 105 119 127 charcoal-gray-600 71 83 90 charcoal-gray-700 40 49 54 charcoal-gray-800 15 21 24 charcoal-gray-900 2 3 3 charcoal-gray-950 152 255 152 fresh-mint 250 255 250 fresh-mint-50 247 255 246 fresh-mint-100 239 255 239 fresh-mint-200 230 255 229 fresh-mint-300 218 255 217 fresh-mint-400 152 255 152 fresh-mint-500 168 216 168 fresh-mint-600 114 154 114 fresh-mint-700 65 96 66 fresh-mint-800 28 48 28 fresh-mint-900 4 10 4 fresh-mint-950 47 79 79 dark-slate 247 251 251 dark-slate-50 238 245 245 dark-slate-100 221 232 232 dark-slate-200 198 216 216 dark-slate-300 167 193 193 dark-slate-400 47 79 79 dark-slate-500 97 127 127 dark-slate-600 64 89 89 dark-slate-700 34 53 53 dark-slate-800 11 24 24 dark-slate-900 1 3 3 dark-slate-950 176 224 176 pale-mint 252 255 252 pale-mint-50 250 254 250 pale-mint-100 244 253 244 pale-mint-200 238 251 238 pale-mint-300 229 248 229 pale-mint-400 176 224 176 pale-mint-500 181 204 181 pale-mint-600 126 145 126 pale-mint-700 75 89 75 pale-mint-800 35 44 35 pale-mint-900 5 8 5 pale-mint-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.