← Back to Tools
Craft cool precise minimal colors with ice white (#F4F7FA), pale blue-gray (#D4DDE8), soft sky (#9AB4CC), cool slate (#5A7080), and deep indigo (#1E2C3A) for clean modern interfaces.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--ice-white: #F4F7FA;
--ice-white-50: #ffffff;
--ice-white-100: #feffff;
--ice-white-200: #fefeff;
--ice-white-300: #fdfefe;
--ice-white-400: #fcfdfe;
--ice-white-500: #F4F7FA;
--ice-white-600: #d3d4d5;
--ice-white-700: #959697;
--ice-white-800: #5b5c5d;
--ice-white-900: #2c2d2d;
--ice-white-950: #090909;
--pale-blue-gray: #D4DDE8;
--pale-blue-gray-50: #fefeff;
--pale-blue-gray-100: #fdfdff;
--pale-blue-gray-200: #fafcfd;
--pale-blue-gray-300: #f7f9fc;
--pale-blue-gray-400: #f2f6fa;
--pale-blue-gray-500: #D4DDE8;
--pale-blue-gray-600: #c6cacf;
--pale-blue-gray-700: #8b8f93;
--pale-blue-gray-800: #55575a;
--pale-blue-gray-900: #292a2c;
--pale-blue-gray-950: #070809;
--soft-sky: #9AB4CC;
--soft-sky-50: #fcfeff;
--soft-sky-100: #f9fcfe;
--soft-sky-200: #f2f7fc;
--soft-sky-300: #e9f2f9;
--soft-sky-400: #deeaf3;
--soft-sky-500: #9AB4CC;
--soft-sky-600: #abb8c4;
--soft-sky-700: #77828c;
--soft-sky-800: #474f57;
--soft-sky-900: #20262b;
--soft-sky-950: #050608;
--cool-slate: #5A7080;
--cool-slate-50: #fafcfd;
--cool-slate-100: #f4f7fa;
--cool-slate-200: #e8eef2;
--cool-slate-300: #d8e1e8;
--cool-slate-400: #c3d0d9;
--cool-slate-500: #5A7080;
--cool-slate-600: #86959f;
--cool-slate-700: #5b6871;
--cool-slate-800: #353f45;
--cool-slate-900: #171d21;
--cool-slate-950: #030405;
--deep-indigo: #1E2C3A;
--deep-indigo-50: #f7f9fc;
--deep-indigo-100: #ecf1f4;
--deep-indigo-200: #d8dfe5;
--deep-indigo-300: #bdc8d2;
--deep-indigo-400: #9aa9b7;
--deep-indigo-500: #1E2C3A;
--deep-indigo-600: #4f606f;
--deep-indigo-700: #33424e;
--deep-indigo-800: #1b262f;
--deep-indigo-900: #080f15;
--deep-indigo-950: #010203;
}
$ice-white: #F4F7FA; $ice-white-50: #ffffff; $ice-white-100: #feffff; $ice-white-200: #fefeff; $ice-white-300: #fdfefe; $ice-white-400: #fcfdfe; $ice-white-500: #F4F7FA; $ice-white-600: #d3d4d5; $ice-white-700: #959697; $ice-white-800: #5b5c5d; $ice-white-900: #2c2d2d; $ice-white-950: #090909; $pale-blue-gray: #D4DDE8; $pale-blue-gray-50: #fefeff; $pale-blue-gray-100: #fdfdff; $pale-blue-gray-200: #fafcfd; $pale-blue-gray-300: #f7f9fc; $pale-blue-gray-400: #f2f6fa; $pale-blue-gray-500: #D4DDE8; $pale-blue-gray-600: #c6cacf; $pale-blue-gray-700: #8b8f93; $pale-blue-gray-800: #55575a; $pale-blue-gray-900: #292a2c; $pale-blue-gray-950: #070809; $soft-sky: #9AB4CC; $soft-sky-50: #fcfeff; $soft-sky-100: #f9fcfe; $soft-sky-200: #f2f7fc; $soft-sky-300: #e9f2f9; $soft-sky-400: #deeaf3; $soft-sky-500: #9AB4CC; $soft-sky-600: #abb8c4; $soft-sky-700: #77828c; $soft-sky-800: #474f57; $soft-sky-900: #20262b; $soft-sky-950: #050608; $cool-slate: #5A7080; $cool-slate-50: #fafcfd; $cool-slate-100: #f4f7fa; $cool-slate-200: #e8eef2; $cool-slate-300: #d8e1e8; $cool-slate-400: #c3d0d9; $cool-slate-500: #5A7080; $cool-slate-600: #86959f; $cool-slate-700: #5b6871; $cool-slate-800: #353f45; $cool-slate-900: #171d21; $cool-slate-950: #030405; $deep-indigo: #1E2C3A; $deep-indigo-50: #f7f9fc; $deep-indigo-100: #ecf1f4; $deep-indigo-200: #d8dfe5; $deep-indigo-300: #bdc8d2; $deep-indigo-400: #9aa9b7; $deep-indigo-500: #1E2C3A; $deep-indigo-600: #4f606f; $deep-indigo-700: #33424e; $deep-indigo-800: #1b262f; $deep-indigo-900: #080f15; $deep-indigo-950: #010203;
colors: {
'ice-white': {
50: '#ffffff',
100: '#feffff',
200: '#fefeff',
300: '#fdfefe',
400: '#fcfdfe',
500: '#F4F7FA',
600: '#d3d4d5',
700: '#959697',
800: '#5b5c5d',
900: '#2c2d2d',
950: '#090909',
DEFAULT: '#F4F7FA',
},
'pale-blue-gray': {
50: '#fefeff',
100: '#fdfdff',
200: '#fafcfd',
300: '#f7f9fc',
400: '#f2f6fa',
500: '#D4DDE8',
600: '#c6cacf',
700: '#8b8f93',
800: '#55575a',
900: '#292a2c',
950: '#070809',
DEFAULT: '#D4DDE8',
},
'soft-sky': {
50: '#fcfeff',
100: '#f9fcfe',
200: '#f2f7fc',
300: '#e9f2f9',
400: '#deeaf3',
500: '#9AB4CC',
600: '#abb8c4',
700: '#77828c',
800: '#474f57',
900: '#20262b',
950: '#050608',
DEFAULT: '#9AB4CC',
},
'cool-slate': {
50: '#fafcfd',
100: '#f4f7fa',
200: '#e8eef2',
300: '#d8e1e8',
400: '#c3d0d9',
500: '#5A7080',
600: '#86959f',
700: '#5b6871',
800: '#353f45',
900: '#171d21',
950: '#030405',
DEFAULT: '#5A7080',
},
'deep-indigo': {
50: '#f7f9fc',
100: '#ecf1f4',
200: '#d8dfe5',
300: '#bdc8d2',
400: '#9aa9b7',
500: '#1E2C3A',
600: '#4f606f',
700: '#33424e',
800: '#1b262f',
900: '#080f15',
950: '#010203',
DEFAULT: '#1E2C3A',
},
},
[
{
"name": "ice-white",
"harmony": "Palette",
"hex": "#F4F7FA",
"rgb": {
"r": 244,
"g": 247,
"b": 250
},
"hsl": {
"h": 210,
"s": 37,
"l": 97
},
"value": "#F4F7FA",
"tonalScale": {
"50": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#feffff",
"rgb": {
"r": 254,
"g": 255,
"b": 255
}
},
"200": {
"hex": "#fefeff",
"rgb": {
"r": 254,
"g": 254,
"b": 255
}
},
"300": {
"hex": "#fdfefe",
"rgb": {
"r": 253,
"g": 254,
"b": 254
}
},
"400": {
"hex": "#fcfdfe",
"rgb": {
"r": 252,
"g": 253,
"b": 254
}
},
"500": {
"hex": "#F4F7FA",
"rgb": {
"r": 244,
"g": 247,
"b": 250
}
},
"600": {
"hex": "#d3d4d5",
"rgb": {
"r": 211,
"g": 212,
"b": 213
}
},
"700": {
"hex": "#959697",
"rgb": {
"r": 149,
"g": 150,
"b": 151
}
},
"800": {
"hex": "#5b5c5d",
"rgb": {
"r": 91,
"g": 92,
"b": 93
}
},
"900": {
"hex": "#2c2d2d",
"rgb": {
"r": 44,
"g": 45,
"b": 45
}
},
"950": {
"hex": "#090909",
"rgb": {
"r": 9,
"g": 9,
"b": 9
}
}
}
},
{
"name": "pale-blue-gray",
"harmony": "Palette",
"hex": "#D4DDE8",
"rgb": {
"r": 212,
"g": 221,
"b": 232
},
"hsl": {
"h": 213,
"s": 30,
"l": 87
},
"value": "#D4DDE8",
"tonalScale": {
"50": {
"hex": "#fefeff",
"rgb": {
"r": 254,
"g": 254,
"b": 255
}
},
"100": {
"hex": "#fdfdff",
"rgb": {
"r": 253,
"g": 253,
"b": 255
}
},
"200": {
"hex": "#fafcfd",
"rgb": {
"r": 250,
"g": 252,
"b": 253
}
},
"300": {
"hex": "#f7f9fc",
"rgb": {
"r": 247,
"g": 249,
"b": 252
}
},
"400": {
"hex": "#f2f6fa",
"rgb": {
"r": 242,
"g": 246,
"b": 250
}
},
"500": {
"hex": "#D4DDE8",
"rgb": {
"r": 212,
"g": 221,
"b": 232
}
},
"600": {
"hex": "#c6cacf",
"rgb": {
"r": 198,
"g": 202,
"b": 207
}
},
"700": {
"hex": "#8b8f93",
"rgb": {
"r": 139,
"g": 143,
"b": 147
}
},
"800": {
"hex": "#55575a",
"rgb": {
"r": 85,
"g": 87,
"b": 90
}
},
"900": {
"hex": "#292a2c",
"rgb": {
"r": 41,
"g": 42,
"b": 44
}
},
"950": {
"hex": "#070809",
"rgb": {
"r": 7,
"g": 8,
"b": 9
}
}
}
},
{
"name": "soft-sky",
"harmony": "Palette",
"hex": "#9AB4CC",
"rgb": {
"r": 154,
"g": 180,
"b": 204
},
"hsl": {
"h": 209,
"s": 33,
"l": 70
},
"value": "#9AB4CC",
"tonalScale": {
"50": {
"hex": "#fcfeff",
"rgb": {
"r": 252,
"g": 254,
"b": 255
}
},
"100": {
"hex": "#f9fcfe",
"rgb": {
"r": 249,
"g": 252,
"b": 254
}
},
"200": {
"hex": "#f2f7fc",
"rgb": {
"r": 242,
"g": 247,
"b": 252
}
},
"300": {
"hex": "#e9f2f9",
"rgb": {
"r": 233,
"g": 242,
"b": 249
}
},
"400": {
"hex": "#deeaf3",
"rgb": {
"r": 222,
"g": 234,
"b": 243
}
},
"500": {
"hex": "#9AB4CC",
"rgb": {
"r": 154,
"g": 180,
"b": 204
}
},
"600": {
"hex": "#abb8c4",
"rgb": {
"r": 171,
"g": 184,
"b": 196
}
},
"700": {
"hex": "#77828c",
"rgb": {
"r": 119,
"g": 130,
"b": 140
}
},
"800": {
"hex": "#474f57",
"rgb": {
"r": 71,
"g": 79,
"b": 87
}
},
"900": {
"hex": "#20262b",
"rgb": {
"r": 32,
"g": 38,
"b": 43
}
},
"950": {
"hex": "#050608",
"rgb": {
"r": 5,
"g": 6,
"b": 8
}
}
}
},
{
"name": "cool-slate",
"harmony": "Palette",
"hex": "#5A7080",
"rgb": {
"r": 90,
"g": 112,
"b": 128
},
"hsl": {
"h": 205,
"s": 17,
"l": 43
},
"value": "#5A7080",
"tonalScale": {
"50": {
"hex": "#fafcfd",
"rgb": {
"r": 250,
"g": 252,
"b": 253
}
},
"100": {
"hex": "#f4f7fa",
"rgb": {
"r": 244,
"g": 247,
"b": 250
}
},
"200": {
"hex": "#e8eef2",
"rgb": {
"r": 232,
"g": 238,
"b": 242
}
},
"300": {
"hex": "#d8e1e8",
"rgb": {
"r": 216,
"g": 225,
"b": 232
}
},
"400": {
"hex": "#c3d0d9",
"rgb": {
"r": 195,
"g": 208,
"b": 217
}
},
"500": {
"hex": "#5A7080",
"rgb": {
"r": 90,
"g": 112,
"b": 128
}
},
"600": {
"hex": "#86959f",
"rgb": {
"r": 134,
"g": 149,
"b": 159
}
},
"700": {
"hex": "#5b6871",
"rgb": {
"r": 91,
"g": 104,
"b": 113
}
},
"800": {
"hex": "#353f45",
"rgb": {
"r": 53,
"g": 63,
"b": 69
}
},
"900": {
"hex": "#171d21",
"rgb": {
"r": 23,
"g": 29,
"b": 33
}
},
"950": {
"hex": "#030405",
"rgb": {
"r": 3,
"g": 4,
"b": 5
}
}
}
},
{
"name": "deep-indigo",
"harmony": "Palette",
"hex": "#1E2C3A",
"rgb": {
"r": 30,
"g": 44,
"b": 58
},
"hsl": {
"h": 210,
"s": 32,
"l": 17
},
"value": "#1E2C3A",
"tonalScale": {
"50": {
"hex": "#f7f9fc",
"rgb": {
"r": 247,
"g": 249,
"b": 252
}
},
"100": {
"hex": "#ecf1f4",
"rgb": {
"r": 236,
"g": 241,
"b": 244
}
},
"200": {
"hex": "#d8dfe5",
"rgb": {
"r": 216,
"g": 223,
"b": 229
}
},
"300": {
"hex": "#bdc8d2",
"rgb": {
"r": 189,
"g": 200,
"b": 210
}
},
"400": {
"hex": "#9aa9b7",
"rgb": {
"r": 154,
"g": 169,
"b": 183
}
},
"500": {
"hex": "#1E2C3A",
"rgb": {
"r": 30,
"g": 44,
"b": 58
}
},
"600": {
"hex": "#4f606f",
"rgb": {
"r": 79,
"g": 96,
"b": 111
}
},
"700": {
"hex": "#33424e",
"rgb": {
"r": 51,
"g": 66,
"b": 78
}
},
"800": {
"hex": "#1b262f",
"rgb": {
"r": 27,
"g": 38,
"b": 47
}
},
"900": {
"hex": "#080f15",
"rgb": {
"r": 8,
"g": 15,
"b": 21
}
},
"950": {
"hex": "#010203",
"rgb": {
"r": 1,
"g": 2,
"b": 3
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 ice-white,Palette,#F4F7FA,"rgb(244, 247, 250)","hsl(210, 37%, 97%)",#F4F7FA,#ffffff,#feffff,#fefeff,#fdfefe,#fcfdfe,#F4F7FA,#d3d4d5,#959697,#5b5c5d,#2c2d2d,#090909 pale-blue-gray,Palette,#D4DDE8,"rgb(212, 221, 232)","hsl(213, 30%, 87%)",#D4DDE8,#fefeff,#fdfdff,#fafcfd,#f7f9fc,#f2f6fa,#D4DDE8,#c6cacf,#8b8f93,#55575a,#292a2c,#070809 soft-sky,Palette,#9AB4CC,"rgb(154, 180, 204)","hsl(209, 33%, 70%)",#9AB4CC,#fcfeff,#f9fcfe,#f2f7fc,#e9f2f9,#deeaf3,#9AB4CC,#abb8c4,#77828c,#474f57,#20262b,#050608 cool-slate,Palette,#5A7080,"rgb(90, 112, 128)","hsl(205, 17%, 43%)",#5A7080,#fafcfd,#f4f7fa,#e8eef2,#d8e1e8,#c3d0d9,#5A7080,#86959f,#5b6871,#353f45,#171d21,#030405 deep-indigo,Palette,#1E2C3A,"rgb(30, 44, 58)","hsl(210, 32%, 17%)",#1E2C3A,#f7f9fc,#ecf1f4,#d8dfe5,#bdc8d2,#9aa9b7,#1E2C3A,#4f606f,#33424e,#1b262f,#080f15,#010203
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 244 247 250 ice-white 255 255 255 ice-white-50 254 255 255 ice-white-100 254 254 255 ice-white-200 253 254 254 ice-white-300 252 253 254 ice-white-400 244 247 250 ice-white-500 211 212 213 ice-white-600 149 150 151 ice-white-700 91 92 93 ice-white-800 44 45 45 ice-white-900 9 9 9 ice-white-950 212 221 232 pale-blue-gray 254 254 255 pale-blue-gray-50 253 253 255 pale-blue-gray-100 250 252 253 pale-blue-gray-200 247 249 252 pale-blue-gray-300 242 246 250 pale-blue-gray-400 212 221 232 pale-blue-gray-500 198 202 207 pale-blue-gray-600 139 143 147 pale-blue-gray-700 85 87 90 pale-blue-gray-800 41 42 44 pale-blue-gray-900 7 8 9 pale-blue-gray-950 154 180 204 soft-sky 252 254 255 soft-sky-50 249 252 254 soft-sky-100 242 247 252 soft-sky-200 233 242 249 soft-sky-300 222 234 243 soft-sky-400 154 180 204 soft-sky-500 171 184 196 soft-sky-600 119 130 140 soft-sky-700 71 79 87 soft-sky-800 32 38 43 soft-sky-900 5 6 8 soft-sky-950 90 112 128 cool-slate 250 252 253 cool-slate-50 244 247 250 cool-slate-100 232 238 242 cool-slate-200 216 225 232 cool-slate-300 195 208 217 cool-slate-400 90 112 128 cool-slate-500 134 149 159 cool-slate-600 91 104 113 cool-slate-700 53 63 69 cool-slate-800 23 29 33 cool-slate-900 3 4 5 cool-slate-950 30 44 58 deep-indigo 247 249 252 deep-indigo-50 236 241 244 deep-indigo-100 216 223 229 deep-indigo-200 189 200 210 deep-indigo-300 154 169 183 deep-indigo-400 30 44 58 deep-indigo-500 79 96 111 deep-indigo-600 51 66 78 deep-indigo-700 27 38 47 deep-indigo-800 8 15 21 deep-indigo-900 1 2 3 deep-indigo-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.