← Back to Tools
Create pure achromatic grayscale with bright white (#FFFFFF), soft mist (#F2F2F2), mid gray (#CCCCCC), slate (#888888), and warm near-black (#1A1A1A) for typographic minimal interfaces.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--bright-white: #FFFFFF;
--bright-white-50: #ffffff;
--bright-white-100: #ffffff;
--bright-white-200: #ffffff;
--bright-white-300: #ffffff;
--bright-white-400: #ffffff;
--bright-white-500: #FFFFFF;
--bright-white-600: #d7d7d7;
--bright-white-700: #989898;
--bright-white-800: #5d5d5d;
--bright-white-900: #2e2e2e;
--bright-white-950: #090909;
--soft-mist: #F2F2F2;
--soft-mist-50: #ffffff;
--soft-mist-100: #fefefe;
--soft-mist-200: #fefefe;
--soft-mist-300: #fdfdfd;
--soft-mist-400: #fcfcfc;
--soft-mist-500: #F2F2F2;
--soft-mist-600: #d2d2d2;
--soft-mist-700: #959595;
--soft-mist-800: #5b5b5b;
--soft-mist-900: #2c2c2c;
--soft-mist-950: #090909;
--mid-gray: #CCCCCC;
--mid-gray-50: #fefefe;
--mid-gray-100: #fdfdfd;
--mid-gray-200: #fafafa;
--mid-gray-300: #f6f6f6;
--mid-gray-400: #f1f1f1;
--mid-gray-500: #CCCCCC;
--mid-gray-600: #c3c3c3;
--mid-gray-700: #898989;
--mid-gray-800: #545454;
--mid-gray-900: #282828;
--mid-gray-950: #070707;
--slate: #888888;
--slate-50: #fcfcfc;
--slate-100: #f9f9f9;
--slate-200: #f1f1f1;
--slate-300: #e7e7e7;
--slate-400: #d9d9d9;
--slate-500: #888888;
--slate-600: #a2a2a2;
--slate-700: #727272;
--slate-800: #454545;
--slate-900: #202020;
--slate-950: #050505;
--warm-near-black: #1A1A1A;
--warm-near-black-50: #f8f8f8;
--warm-near-black-100: #ededed;
--warm-near-black-200: #d8d8d8;
--warm-near-black-300: #bdbdbd;
--warm-near-black-400: #989898;
--warm-near-black-500: #1A1A1A;
--warm-near-black-600: #4b4b4b;
--warm-near-black-700: #323232;
--warm-near-black-800: #1b1b1b;
--warm-near-black-900: #090909;
--warm-near-black-950: #010101;
}
$bright-white: #FFFFFF; $bright-white-50: #ffffff; $bright-white-100: #ffffff; $bright-white-200: #ffffff; $bright-white-300: #ffffff; $bright-white-400: #ffffff; $bright-white-500: #FFFFFF; $bright-white-600: #d7d7d7; $bright-white-700: #989898; $bright-white-800: #5d5d5d; $bright-white-900: #2e2e2e; $bright-white-950: #090909; $soft-mist: #F2F2F2; $soft-mist-50: #ffffff; $soft-mist-100: #fefefe; $soft-mist-200: #fefefe; $soft-mist-300: #fdfdfd; $soft-mist-400: #fcfcfc; $soft-mist-500: #F2F2F2; $soft-mist-600: #d2d2d2; $soft-mist-700: #959595; $soft-mist-800: #5b5b5b; $soft-mist-900: #2c2c2c; $soft-mist-950: #090909; $mid-gray: #CCCCCC; $mid-gray-50: #fefefe; $mid-gray-100: #fdfdfd; $mid-gray-200: #fafafa; $mid-gray-300: #f6f6f6; $mid-gray-400: #f1f1f1; $mid-gray-500: #CCCCCC; $mid-gray-600: #c3c3c3; $mid-gray-700: #898989; $mid-gray-800: #545454; $mid-gray-900: #282828; $mid-gray-950: #070707; $slate: #888888; $slate-50: #fcfcfc; $slate-100: #f9f9f9; $slate-200: #f1f1f1; $slate-300: #e7e7e7; $slate-400: #d9d9d9; $slate-500: #888888; $slate-600: #a2a2a2; $slate-700: #727272; $slate-800: #454545; $slate-900: #202020; $slate-950: #050505; $warm-near-black: #1A1A1A; $warm-near-black-50: #f8f8f8; $warm-near-black-100: #ededed; $warm-near-black-200: #d8d8d8; $warm-near-black-300: #bdbdbd; $warm-near-black-400: #989898; $warm-near-black-500: #1A1A1A; $warm-near-black-600: #4b4b4b; $warm-near-black-700: #323232; $warm-near-black-800: #1b1b1b; $warm-near-black-900: #090909; $warm-near-black-950: #010101;
colors: {
'bright-white': {
50: '#ffffff',
100: '#ffffff',
200: '#ffffff',
300: '#ffffff',
400: '#ffffff',
500: '#FFFFFF',
600: '#d7d7d7',
700: '#989898',
800: '#5d5d5d',
900: '#2e2e2e',
950: '#090909',
DEFAULT: '#FFFFFF',
},
'soft-mist': {
50: '#ffffff',
100: '#fefefe',
200: '#fefefe',
300: '#fdfdfd',
400: '#fcfcfc',
500: '#F2F2F2',
600: '#d2d2d2',
700: '#959595',
800: '#5b5b5b',
900: '#2c2c2c',
950: '#090909',
DEFAULT: '#F2F2F2',
},
'mid-gray': {
50: '#fefefe',
100: '#fdfdfd',
200: '#fafafa',
300: '#f6f6f6',
400: '#f1f1f1',
500: '#CCCCCC',
600: '#c3c3c3',
700: '#898989',
800: '#545454',
900: '#282828',
950: '#070707',
DEFAULT: '#CCCCCC',
},
'slate': {
50: '#fcfcfc',
100: '#f9f9f9',
200: '#f1f1f1',
300: '#e7e7e7',
400: '#d9d9d9',
500: '#888888',
600: '#a2a2a2',
700: '#727272',
800: '#454545',
900: '#202020',
950: '#050505',
DEFAULT: '#888888',
},
'warm-near-black': {
50: '#f8f8f8',
100: '#ededed',
200: '#d8d8d8',
300: '#bdbdbd',
400: '#989898',
500: '#1A1A1A',
600: '#4b4b4b',
700: '#323232',
800: '#1b1b1b',
900: '#090909',
950: '#010101',
DEFAULT: '#1A1A1A',
},
},
[
{
"name": "bright-white",
"harmony": "Palette",
"hex": "#FFFFFF",
"rgb": {
"r": 255,
"g": 255,
"b": 255
},
"hsl": {
"h": 0,
"s": 0,
"l": 100
},
"value": "#FFFFFF",
"tonalScale": {
"50": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"200": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"300": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"400": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"500": {
"hex": "#FFFFFF",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"600": {
"hex": "#d7d7d7",
"rgb": {
"r": 215,
"g": 215,
"b": 215
}
},
"700": {
"hex": "#989898",
"rgb": {
"r": 152,
"g": 152,
"b": 152
}
},
"800": {
"hex": "#5d5d5d",
"rgb": {
"r": 93,
"g": 93,
"b": 93
}
},
"900": {
"hex": "#2e2e2e",
"rgb": {
"r": 46,
"g": 46,
"b": 46
}
},
"950": {
"hex": "#090909",
"rgb": {
"r": 9,
"g": 9,
"b": 9
}
}
}
},
{
"name": "soft-mist",
"harmony": "Palette",
"hex": "#F2F2F2",
"rgb": {
"r": 242,
"g": 242,
"b": 242
},
"hsl": {
"h": 0,
"s": 0,
"l": 95
},
"value": "#F2F2F2",
"tonalScale": {
"50": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#fefefe",
"rgb": {
"r": 254,
"g": 254,
"b": 254
}
},
"200": {
"hex": "#fefefe",
"rgb": {
"r": 254,
"g": 254,
"b": 254
}
},
"300": {
"hex": "#fdfdfd",
"rgb": {
"r": 253,
"g": 253,
"b": 253
}
},
"400": {
"hex": "#fcfcfc",
"rgb": {
"r": 252,
"g": 252,
"b": 252
}
},
"500": {
"hex": "#F2F2F2",
"rgb": {
"r": 242,
"g": 242,
"b": 242
}
},
"600": {
"hex": "#d2d2d2",
"rgb": {
"r": 210,
"g": 210,
"b": 210
}
},
"700": {
"hex": "#959595",
"rgb": {
"r": 149,
"g": 149,
"b": 149
}
},
"800": {
"hex": "#5b5b5b",
"rgb": {
"r": 91,
"g": 91,
"b": 91
}
},
"900": {
"hex": "#2c2c2c",
"rgb": {
"r": 44,
"g": 44,
"b": 44
}
},
"950": {
"hex": "#090909",
"rgb": {
"r": 9,
"g": 9,
"b": 9
}
}
}
},
{
"name": "mid-gray",
"harmony": "Palette",
"hex": "#CCCCCC",
"rgb": {
"r": 204,
"g": 204,
"b": 204
},
"hsl": {
"h": 0,
"s": 0,
"l": 80
},
"value": "#CCCCCC",
"tonalScale": {
"50": {
"hex": "#fefefe",
"rgb": {
"r": 254,
"g": 254,
"b": 254
}
},
"100": {
"hex": "#fdfdfd",
"rgb": {
"r": 253,
"g": 253,
"b": 253
}
},
"200": {
"hex": "#fafafa",
"rgb": {
"r": 250,
"g": 250,
"b": 250
}
},
"300": {
"hex": "#f6f6f6",
"rgb": {
"r": 246,
"g": 246,
"b": 246
}
},
"400": {
"hex": "#f1f1f1",
"rgb": {
"r": 241,
"g": 241,
"b": 241
}
},
"500": {
"hex": "#CCCCCC",
"rgb": {
"r": 204,
"g": 204,
"b": 204
}
},
"600": {
"hex": "#c3c3c3",
"rgb": {
"r": 195,
"g": 195,
"b": 195
}
},
"700": {
"hex": "#898989",
"rgb": {
"r": 137,
"g": 137,
"b": 137
}
},
"800": {
"hex": "#545454",
"rgb": {
"r": 84,
"g": 84,
"b": 84
}
},
"900": {
"hex": "#282828",
"rgb": {
"r": 40,
"g": 40,
"b": 40
}
},
"950": {
"hex": "#070707",
"rgb": {
"r": 7,
"g": 7,
"b": 7
}
}
}
},
{
"name": "slate",
"harmony": "Palette",
"hex": "#888888",
"rgb": {
"r": 136,
"g": 136,
"b": 136
},
"hsl": {
"h": 0,
"s": 0,
"l": 53
},
"value": "#888888",
"tonalScale": {
"50": {
"hex": "#fcfcfc",
"rgb": {
"r": 252,
"g": 252,
"b": 252
}
},
"100": {
"hex": "#f9f9f9",
"rgb": {
"r": 249,
"g": 249,
"b": 249
}
},
"200": {
"hex": "#f1f1f1",
"rgb": {
"r": 241,
"g": 241,
"b": 241
}
},
"300": {
"hex": "#e7e7e7",
"rgb": {
"r": 231,
"g": 231,
"b": 231
}
},
"400": {
"hex": "#d9d9d9",
"rgb": {
"r": 217,
"g": 217,
"b": 217
}
},
"500": {
"hex": "#888888",
"rgb": {
"r": 136,
"g": 136,
"b": 136
}
},
"600": {
"hex": "#a2a2a2",
"rgb": {
"r": 162,
"g": 162,
"b": 162
}
},
"700": {
"hex": "#727272",
"rgb": {
"r": 114,
"g": 114,
"b": 114
}
},
"800": {
"hex": "#454545",
"rgb": {
"r": 69,
"g": 69,
"b": 69
}
},
"900": {
"hex": "#202020",
"rgb": {
"r": 32,
"g": 32,
"b": 32
}
},
"950": {
"hex": "#050505",
"rgb": {
"r": 5,
"g": 5,
"b": 5
}
}
}
},
{
"name": "warm-near-black",
"harmony": "Palette",
"hex": "#1A1A1A",
"rgb": {
"r": 26,
"g": 26,
"b": 26
},
"hsl": {
"h": 0,
"s": 0,
"l": 10
},
"value": "#1A1A1A",
"tonalScale": {
"50": {
"hex": "#f8f8f8",
"rgb": {
"r": 248,
"g": 248,
"b": 248
}
},
"100": {
"hex": "#ededed",
"rgb": {
"r": 237,
"g": 237,
"b": 237
}
},
"200": {
"hex": "#d8d8d8",
"rgb": {
"r": 216,
"g": 216,
"b": 216
}
},
"300": {
"hex": "#bdbdbd",
"rgb": {
"r": 189,
"g": 189,
"b": 189
}
},
"400": {
"hex": "#989898",
"rgb": {
"r": 152,
"g": 152,
"b": 152
}
},
"500": {
"hex": "#1A1A1A",
"rgb": {
"r": 26,
"g": 26,
"b": 26
}
},
"600": {
"hex": "#4b4b4b",
"rgb": {
"r": 75,
"g": 75,
"b": 75
}
},
"700": {
"hex": "#323232",
"rgb": {
"r": 50,
"g": 50,
"b": 50
}
},
"800": {
"hex": "#1b1b1b",
"rgb": {
"r": 27,
"g": 27,
"b": 27
}
},
"900": {
"hex": "#090909",
"rgb": {
"r": 9,
"g": 9,
"b": 9
}
},
"950": {
"hex": "#010101",
"rgb": {
"r": 1,
"g": 1,
"b": 1
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 bright-white,Palette,#FFFFFF,"rgb(255, 255, 255)","hsl(0, 0%, 100%)",#FFFFFF,#ffffff,#ffffff,#ffffff,#ffffff,#ffffff,#FFFFFF,#d7d7d7,#989898,#5d5d5d,#2e2e2e,#090909 soft-mist,Palette,#F2F2F2,"rgb(242, 242, 242)","hsl(0, 0%, 95%)",#F2F2F2,#ffffff,#fefefe,#fefefe,#fdfdfd,#fcfcfc,#F2F2F2,#d2d2d2,#959595,#5b5b5b,#2c2c2c,#090909 mid-gray,Palette,#CCCCCC,"rgb(204, 204, 204)","hsl(0, 0%, 80%)",#CCCCCC,#fefefe,#fdfdfd,#fafafa,#f6f6f6,#f1f1f1,#CCCCCC,#c3c3c3,#898989,#545454,#282828,#070707 slate,Palette,#888888,"rgb(136, 136, 136)","hsl(0, 0%, 53%)",#888888,#fcfcfc,#f9f9f9,#f1f1f1,#e7e7e7,#d9d9d9,#888888,#a2a2a2,#727272,#454545,#202020,#050505 warm-near-black,Palette,#1A1A1A,"rgb(26, 26, 26)","hsl(0, 0%, 10%)",#1A1A1A,#f8f8f8,#ededed,#d8d8d8,#bdbdbd,#989898,#1A1A1A,#4b4b4b,#323232,#1b1b1b,#090909,#010101
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 255 255 255 bright-white 255 255 255 bright-white-50 255 255 255 bright-white-100 255 255 255 bright-white-200 255 255 255 bright-white-300 255 255 255 bright-white-400 255 255 255 bright-white-500 215 215 215 bright-white-600 152 152 152 bright-white-700 93 93 93 bright-white-800 46 46 46 bright-white-900 9 9 9 bright-white-950 242 242 242 soft-mist 255 255 255 soft-mist-50 254 254 254 soft-mist-100 254 254 254 soft-mist-200 253 253 253 soft-mist-300 252 252 252 soft-mist-400 242 242 242 soft-mist-500 210 210 210 soft-mist-600 149 149 149 soft-mist-700 91 91 91 soft-mist-800 44 44 44 soft-mist-900 9 9 9 soft-mist-950 204 204 204 mid-gray 254 254 254 mid-gray-50 253 253 253 mid-gray-100 250 250 250 mid-gray-200 246 246 246 mid-gray-300 241 241 241 mid-gray-400 204 204 204 mid-gray-500 195 195 195 mid-gray-600 137 137 137 mid-gray-700 84 84 84 mid-gray-800 40 40 40 mid-gray-900 7 7 7 mid-gray-950 136 136 136 slate 252 252 252 slate-50 249 249 249 slate-100 241 241 241 slate-200 231 231 231 slate-300 217 217 217 slate-400 136 136 136 slate-500 162 162 162 slate-600 114 114 114 slate-700 69 69 69 slate-800 32 32 32 slate-900 5 5 5 slate-950 26 26 26 warm-near-black 248 248 248 warm-near-black-50 237 237 237 warm-near-black-100 216 216 216 warm-near-black-200 189 189 189 warm-near-black-300 152 152 152 warm-near-black-400 26 26 26 warm-near-black-500 75 75 75 warm-near-black-600 50 50 50 warm-near-black-700 27 27 27 warm-near-black-800 9 9 9 warm-near-black-900 1 1 1 warm-near-black-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.