← Back to Tools
Compose quiet modern neutrals with off-white (#F6F4F0), light stone (#DDD8D0), muted sage (#9AAE98), warm gray (#8A8680), and deep slate (#3A3C3E) for calm minimal web design.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--off-white: #F6F4F0;
--off-white-50: #ffffff;
--off-white-100: #fffffe;
--off-white-200: #fefefd;
--off-white-300: #fefdfc;
--off-white-400: #fdfcfb;
--off-white-500: #F6F4F0;
--off-white-600: #d4d3d1;
--off-white-700: #969594;
--off-white-800: #5c5b5a;
--off-white-900: #2d2d2c;
--off-white-950: #090908;
--light-stone: #DDD8D0;
--light-stone-50: #fffefe;
--light-stone-100: #fefdfc;
--light-stone-200: #fcfbfa;
--light-stone-300: #f9f8f6;
--light-stone-400: #f6f4f1;
--light-stone-500: #DDD8D0;
--light-stone-600: #cac8c4;
--light-stone-700: #8f8d8a;
--light-stone-800: #585654;
--light-stone-900: #2b2a28;
--light-stone-950: #080807;
--muted-sage: #9AAE98;
--muted-sage-50: #fcfefc;
--muted-sage-100: #f9fbf9;
--muted-sage-200: #f3f7f2;
--muted-sage-300: #eaf1e9;
--muted-sage-400: #dfe8de;
--muted-sage-500: #9AAE98;
--muted-sage-600: #abb6aa;
--muted-sage-700: #778077;
--muted-sage-800: #484e47;
--muted-sage-900: #212521;
--muted-sage-950: #050605;
--warm-gray: #8A8680;
--warm-gray-50: #fdfcfc;
--warm-gray-100: #f9f8f8;
--warm-gray-200: #f2f1ef;
--warm-gray-300: #e8e7e4;
--warm-gray-400: #dbd9d5;
--warm-gray-500: #8A8680;
--warm-gray-600: #a4a19e;
--warm-gray-700: #73716e;
--warm-gray-800: #464442;
--warm-gray-900: #21201e;
--warm-gray-950: #050504;
--deep-slate: #3A3C3E;
--deep-slate-50: #fafafa;
--deep-slate-100: #f2f2f3;
--deep-slate-200: #e2e3e4;
--deep-slate-300: #cecfd0;
--deep-slate-400: #b3b4b6;
--deep-slate-500: #3A3C3E;
--deep-slate-600: #6e6f71;
--deep-slate-700: #4b4d4e;
--deep-slate-800: #2c2d2e;
--deep-slate-900: #121313;
--deep-slate-950: #020202;
}
$off-white: #F6F4F0; $off-white-50: #ffffff; $off-white-100: #fffffe; $off-white-200: #fefefd; $off-white-300: #fefdfc; $off-white-400: #fdfcfb; $off-white-500: #F6F4F0; $off-white-600: #d4d3d1; $off-white-700: #969594; $off-white-800: #5c5b5a; $off-white-900: #2d2d2c; $off-white-950: #090908; $light-stone: #DDD8D0; $light-stone-50: #fffefe; $light-stone-100: #fefdfc; $light-stone-200: #fcfbfa; $light-stone-300: #f9f8f6; $light-stone-400: #f6f4f1; $light-stone-500: #DDD8D0; $light-stone-600: #cac8c4; $light-stone-700: #8f8d8a; $light-stone-800: #585654; $light-stone-900: #2b2a28; $light-stone-950: #080807; $muted-sage: #9AAE98; $muted-sage-50: #fcfefc; $muted-sage-100: #f9fbf9; $muted-sage-200: #f3f7f2; $muted-sage-300: #eaf1e9; $muted-sage-400: #dfe8de; $muted-sage-500: #9AAE98; $muted-sage-600: #abb6aa; $muted-sage-700: #778077; $muted-sage-800: #484e47; $muted-sage-900: #212521; $muted-sage-950: #050605; $warm-gray: #8A8680; $warm-gray-50: #fdfcfc; $warm-gray-100: #f9f8f8; $warm-gray-200: #f2f1ef; $warm-gray-300: #e8e7e4; $warm-gray-400: #dbd9d5; $warm-gray-500: #8A8680; $warm-gray-600: #a4a19e; $warm-gray-700: #73716e; $warm-gray-800: #464442; $warm-gray-900: #21201e; $warm-gray-950: #050504; $deep-slate: #3A3C3E; $deep-slate-50: #fafafa; $deep-slate-100: #f2f2f3; $deep-slate-200: #e2e3e4; $deep-slate-300: #cecfd0; $deep-slate-400: #b3b4b6; $deep-slate-500: #3A3C3E; $deep-slate-600: #6e6f71; $deep-slate-700: #4b4d4e; $deep-slate-800: #2c2d2e; $deep-slate-900: #121313; $deep-slate-950: #020202;
colors: {
'off-white': {
50: '#ffffff',
100: '#fffffe',
200: '#fefefd',
300: '#fefdfc',
400: '#fdfcfb',
500: '#F6F4F0',
600: '#d4d3d1',
700: '#969594',
800: '#5c5b5a',
900: '#2d2d2c',
950: '#090908',
DEFAULT: '#F6F4F0',
},
'light-stone': {
50: '#fffefe',
100: '#fefdfc',
200: '#fcfbfa',
300: '#f9f8f6',
400: '#f6f4f1',
500: '#DDD8D0',
600: '#cac8c4',
700: '#8f8d8a',
800: '#585654',
900: '#2b2a28',
950: '#080807',
DEFAULT: '#DDD8D0',
},
'muted-sage': {
50: '#fcfefc',
100: '#f9fbf9',
200: '#f3f7f2',
300: '#eaf1e9',
400: '#dfe8de',
500: '#9AAE98',
600: '#abb6aa',
700: '#778077',
800: '#484e47',
900: '#212521',
950: '#050605',
DEFAULT: '#9AAE98',
},
'warm-gray': {
50: '#fdfcfc',
100: '#f9f8f8',
200: '#f2f1ef',
300: '#e8e7e4',
400: '#dbd9d5',
500: '#8A8680',
600: '#a4a19e',
700: '#73716e',
800: '#464442',
900: '#21201e',
950: '#050504',
DEFAULT: '#8A8680',
},
'deep-slate': {
50: '#fafafa',
100: '#f2f2f3',
200: '#e2e3e4',
300: '#cecfd0',
400: '#b3b4b6',
500: '#3A3C3E',
600: '#6e6f71',
700: '#4b4d4e',
800: '#2c2d2e',
900: '#121313',
950: '#020202',
DEFAULT: '#3A3C3E',
},
},
[
{
"name": "off-white",
"harmony": "Palette",
"hex": "#F6F4F0",
"rgb": {
"r": 246,
"g": 244,
"b": 240
},
"hsl": {
"h": 40,
"s": 25,
"l": 95
},
"value": "#F6F4F0",
"tonalScale": {
"50": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#fffffe",
"rgb": {
"r": 255,
"g": 255,
"b": 254
}
},
"200": {
"hex": "#fefefd",
"rgb": {
"r": 254,
"g": 254,
"b": 253
}
},
"300": {
"hex": "#fefdfc",
"rgb": {
"r": 254,
"g": 253,
"b": 252
}
},
"400": {
"hex": "#fdfcfb",
"rgb": {
"r": 253,
"g": 252,
"b": 251
}
},
"500": {
"hex": "#F6F4F0",
"rgb": {
"r": 246,
"g": 244,
"b": 240
}
},
"600": {
"hex": "#d4d3d1",
"rgb": {
"r": 212,
"g": 211,
"b": 209
}
},
"700": {
"hex": "#969594",
"rgb": {
"r": 150,
"g": 149,
"b": 148
}
},
"800": {
"hex": "#5c5b5a",
"rgb": {
"r": 92,
"g": 91,
"b": 90
}
},
"900": {
"hex": "#2d2d2c",
"rgb": {
"r": 45,
"g": 45,
"b": 44
}
},
"950": {
"hex": "#090908",
"rgb": {
"r": 9,
"g": 9,
"b": 8
}
}
}
},
{
"name": "light-stone",
"harmony": "Palette",
"hex": "#DDD8D0",
"rgb": {
"r": 221,
"g": 216,
"b": 208
},
"hsl": {
"h": 37,
"s": 16,
"l": 84
},
"value": "#DDD8D0",
"tonalScale": {
"50": {
"hex": "#fffefe",
"rgb": {
"r": 255,
"g": 254,
"b": 254
}
},
"100": {
"hex": "#fefdfc",
"rgb": {
"r": 254,
"g": 253,
"b": 252
}
},
"200": {
"hex": "#fcfbfa",
"rgb": {
"r": 252,
"g": 251,
"b": 250
}
},
"300": {
"hex": "#f9f8f6",
"rgb": {
"r": 249,
"g": 248,
"b": 246
}
},
"400": {
"hex": "#f6f4f1",
"rgb": {
"r": 246,
"g": 244,
"b": 241
}
},
"500": {
"hex": "#DDD8D0",
"rgb": {
"r": 221,
"g": 216,
"b": 208
}
},
"600": {
"hex": "#cac8c4",
"rgb": {
"r": 202,
"g": 200,
"b": 196
}
},
"700": {
"hex": "#8f8d8a",
"rgb": {
"r": 143,
"g": 141,
"b": 138
}
},
"800": {
"hex": "#585654",
"rgb": {
"r": 88,
"g": 86,
"b": 84
}
},
"900": {
"hex": "#2b2a28",
"rgb": {
"r": 43,
"g": 42,
"b": 40
}
},
"950": {
"hex": "#080807",
"rgb": {
"r": 8,
"g": 8,
"b": 7
}
}
}
},
{
"name": "muted-sage",
"harmony": "Palette",
"hex": "#9AAE98",
"rgb": {
"r": 154,
"g": 174,
"b": 152
},
"hsl": {
"h": 115,
"s": 12,
"l": 64
},
"value": "#9AAE98",
"tonalScale": {
"50": {
"hex": "#fcfefc",
"rgb": {
"r": 252,
"g": 254,
"b": 252
}
},
"100": {
"hex": "#f9fbf9",
"rgb": {
"r": 249,
"g": 251,
"b": 249
}
},
"200": {
"hex": "#f3f7f2",
"rgb": {
"r": 243,
"g": 247,
"b": 242
}
},
"300": {
"hex": "#eaf1e9",
"rgb": {
"r": 234,
"g": 241,
"b": 233
}
},
"400": {
"hex": "#dfe8de",
"rgb": {
"r": 223,
"g": 232,
"b": 222
}
},
"500": {
"hex": "#9AAE98",
"rgb": {
"r": 154,
"g": 174,
"b": 152
}
},
"600": {
"hex": "#abb6aa",
"rgb": {
"r": 171,
"g": 182,
"b": 170
}
},
"700": {
"hex": "#778077",
"rgb": {
"r": 119,
"g": 128,
"b": 119
}
},
"800": {
"hex": "#484e47",
"rgb": {
"r": 72,
"g": 78,
"b": 71
}
},
"900": {
"hex": "#212521",
"rgb": {
"r": 33,
"g": 37,
"b": 33
}
},
"950": {
"hex": "#050605",
"rgb": {
"r": 5,
"g": 6,
"b": 5
}
}
}
},
{
"name": "warm-gray",
"harmony": "Palette",
"hex": "#8A8680",
"rgb": {
"r": 138,
"g": 134,
"b": 128
},
"hsl": {
"h": 36,
"s": 4,
"l": 52
},
"value": "#8A8680",
"tonalScale": {
"50": {
"hex": "#fdfcfc",
"rgb": {
"r": 253,
"g": 252,
"b": 252
}
},
"100": {
"hex": "#f9f8f8",
"rgb": {
"r": 249,
"g": 248,
"b": 248
}
},
"200": {
"hex": "#f2f1ef",
"rgb": {
"r": 242,
"g": 241,
"b": 239
}
},
"300": {
"hex": "#e8e7e4",
"rgb": {
"r": 232,
"g": 231,
"b": 228
}
},
"400": {
"hex": "#dbd9d5",
"rgb": {
"r": 219,
"g": 217,
"b": 213
}
},
"500": {
"hex": "#8A8680",
"rgb": {
"r": 138,
"g": 134,
"b": 128
}
},
"600": {
"hex": "#a4a19e",
"rgb": {
"r": 164,
"g": 161,
"b": 158
}
},
"700": {
"hex": "#73716e",
"rgb": {
"r": 115,
"g": 113,
"b": 110
}
},
"800": {
"hex": "#464442",
"rgb": {
"r": 70,
"g": 68,
"b": 66
}
},
"900": {
"hex": "#21201e",
"rgb": {
"r": 33,
"g": 32,
"b": 30
}
},
"950": {
"hex": "#050504",
"rgb": {
"r": 5,
"g": 5,
"b": 4
}
}
}
},
{
"name": "deep-slate",
"harmony": "Palette",
"hex": "#3A3C3E",
"rgb": {
"r": 58,
"g": 60,
"b": 62
},
"hsl": {
"h": 210,
"s": 3,
"l": 24
},
"value": "#3A3C3E",
"tonalScale": {
"50": {
"hex": "#fafafa",
"rgb": {
"r": 250,
"g": 250,
"b": 250
}
},
"100": {
"hex": "#f2f2f3",
"rgb": {
"r": 242,
"g": 242,
"b": 243
}
},
"200": {
"hex": "#e2e3e4",
"rgb": {
"r": 226,
"g": 227,
"b": 228
}
},
"300": {
"hex": "#cecfd0",
"rgb": {
"r": 206,
"g": 207,
"b": 208
}
},
"400": {
"hex": "#b3b4b6",
"rgb": {
"r": 179,
"g": 180,
"b": 182
}
},
"500": {
"hex": "#3A3C3E",
"rgb": {
"r": 58,
"g": 60,
"b": 62
}
},
"600": {
"hex": "#6e6f71",
"rgb": {
"r": 110,
"g": 111,
"b": 113
}
},
"700": {
"hex": "#4b4d4e",
"rgb": {
"r": 75,
"g": 77,
"b": 78
}
},
"800": {
"hex": "#2c2d2e",
"rgb": {
"r": 44,
"g": 45,
"b": 46
}
},
"900": {
"hex": "#121313",
"rgb": {
"r": 18,
"g": 19,
"b": 19
}
},
"950": {
"hex": "#020202",
"rgb": {
"r": 2,
"g": 2,
"b": 2
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 off-white,Palette,#F6F4F0,"rgb(246, 244, 240)","hsl(40, 25%, 95%)",#F6F4F0,#ffffff,#fffffe,#fefefd,#fefdfc,#fdfcfb,#F6F4F0,#d4d3d1,#969594,#5c5b5a,#2d2d2c,#090908 light-stone,Palette,#DDD8D0,"rgb(221, 216, 208)","hsl(37, 16%, 84%)",#DDD8D0,#fffefe,#fefdfc,#fcfbfa,#f9f8f6,#f6f4f1,#DDD8D0,#cac8c4,#8f8d8a,#585654,#2b2a28,#080807 muted-sage,Palette,#9AAE98,"rgb(154, 174, 152)","hsl(115, 12%, 64%)",#9AAE98,#fcfefc,#f9fbf9,#f3f7f2,#eaf1e9,#dfe8de,#9AAE98,#abb6aa,#778077,#484e47,#212521,#050605 warm-gray,Palette,#8A8680,"rgb(138, 134, 128)","hsl(36, 4%, 52%)",#8A8680,#fdfcfc,#f9f8f8,#f2f1ef,#e8e7e4,#dbd9d5,#8A8680,#a4a19e,#73716e,#464442,#21201e,#050504 deep-slate,Palette,#3A3C3E,"rgb(58, 60, 62)","hsl(210, 3%, 24%)",#3A3C3E,#fafafa,#f2f2f3,#e2e3e4,#cecfd0,#b3b4b6,#3A3C3E,#6e6f71,#4b4d4e,#2c2d2e,#121313,#020202
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 246 244 240 off-white 255 255 255 off-white-50 255 255 254 off-white-100 254 254 253 off-white-200 254 253 252 off-white-300 253 252 251 off-white-400 246 244 240 off-white-500 212 211 209 off-white-600 150 149 148 off-white-700 92 91 90 off-white-800 45 45 44 off-white-900 9 9 8 off-white-950 221 216 208 light-stone 255 254 254 light-stone-50 254 253 252 light-stone-100 252 251 250 light-stone-200 249 248 246 light-stone-300 246 244 241 light-stone-400 221 216 208 light-stone-500 202 200 196 light-stone-600 143 141 138 light-stone-700 88 86 84 light-stone-800 43 42 40 light-stone-900 8 8 7 light-stone-950 154 174 152 muted-sage 252 254 252 muted-sage-50 249 251 249 muted-sage-100 243 247 242 muted-sage-200 234 241 233 muted-sage-300 223 232 222 muted-sage-400 154 174 152 muted-sage-500 171 182 170 muted-sage-600 119 128 119 muted-sage-700 72 78 71 muted-sage-800 33 37 33 muted-sage-900 5 6 5 muted-sage-950 138 134 128 warm-gray 253 252 252 warm-gray-50 249 248 248 warm-gray-100 242 241 239 warm-gray-200 232 231 228 warm-gray-300 219 217 213 warm-gray-400 138 134 128 warm-gray-500 164 161 158 warm-gray-600 115 113 110 warm-gray-700 70 68 66 warm-gray-800 33 32 30 warm-gray-900 5 5 4 warm-gray-950 58 60 62 deep-slate 250 250 250 deep-slate-50 242 242 243 deep-slate-100 226 227 228 deep-slate-200 206 207 208 deep-slate-300 179 180 182 deep-slate-400 58 60 62 deep-slate-500 110 111 113 deep-slate-600 75 77 78 deep-slate-700 44 45 46 deep-slate-800 18 19 19 deep-slate-900 2 2 2 deep-slate-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.