← Back to Tools
Create calming sage green color harmonies for nature-inspired designs, building around standard calming sage (#87A987), light seafoam green (#B2D3B2), and deep dark spruce (#3B533B).
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--calming-sage: #87A987;
--calming-sage-50: #fbfefb;
--calming-sage-100: #f7fbf7;
--calming-sage-200: #eff7ef;
--calming-sage-300: #e5f0e5;
--calming-sage-400: #d7e7d7;
--calming-sage-500: #87A987;
--calming-sage-600: #a1b4a1;
--calming-sage-700: #6f7f6f;
--calming-sage-800: #424e42;
--calming-sage-900: #1e251e;
--calming-sage-950: #040604;
--light-seafoam-green: #B2D3B2;
--light-seafoam-green-50: #fdfffd;
--light-seafoam-green-100: #fafefa;
--light-seafoam-green-200: #f5fbf5;
--light-seafoam-green-300: #eff8ef;
--light-seafoam-green-400: #e6f4e6;
--light-seafoam-green-500: #B2D3B2;
--light-seafoam-green-600: #b7c6b7;
--light-seafoam-green-700: #7f8c7f;
--light-seafoam-green-800: #4c564c;
--light-seafoam-green-900: #242a24;
--light-seafoam-green-950: #060806;
--deep-dark-spruce: #3B533B;
--deep-dark-spruce-50: #f9fcf9;
--deep-dark-spruce-100: #f1f5f1;
--deep-dark-spruce-200: #e1e9e1;
--deep-dark-spruce-300: #ccd9cc;
--deep-dark-spruce-400: #b1c3b1;
--deep-dark-spruce-500: #3B533B;
--deep-dark-spruce-600: #6d826e;
--deep-dark-spruce-700: #4a5b4a;
--deep-dark-spruce-800: #29372a;
--deep-dark-spruce-900: #101810;
--deep-dark-spruce-950: #020302;
}
$calming-sage: #87A987; $calming-sage-50: #fbfefb; $calming-sage-100: #f7fbf7; $calming-sage-200: #eff7ef; $calming-sage-300: #e5f0e5; $calming-sage-400: #d7e7d7; $calming-sage-500: #87A987; $calming-sage-600: #a1b4a1; $calming-sage-700: #6f7f6f; $calming-sage-800: #424e42; $calming-sage-900: #1e251e; $calming-sage-950: #040604; $light-seafoam-green: #B2D3B2; $light-seafoam-green-50: #fdfffd; $light-seafoam-green-100: #fafefa; $light-seafoam-green-200: #f5fbf5; $light-seafoam-green-300: #eff8ef; $light-seafoam-green-400: #e6f4e6; $light-seafoam-green-500: #B2D3B2; $light-seafoam-green-600: #b7c6b7; $light-seafoam-green-700: #7f8c7f; $light-seafoam-green-800: #4c564c; $light-seafoam-green-900: #242a24; $light-seafoam-green-950: #060806; $deep-dark-spruce: #3B533B; $deep-dark-spruce-50: #f9fcf9; $deep-dark-spruce-100: #f1f5f1; $deep-dark-spruce-200: #e1e9e1; $deep-dark-spruce-300: #ccd9cc; $deep-dark-spruce-400: #b1c3b1; $deep-dark-spruce-500: #3B533B; $deep-dark-spruce-600: #6d826e; $deep-dark-spruce-700: #4a5b4a; $deep-dark-spruce-800: #29372a; $deep-dark-spruce-900: #101810; $deep-dark-spruce-950: #020302;
colors: {
'calming-sage': {
50: '#fbfefb',
100: '#f7fbf7',
200: '#eff7ef',
300: '#e5f0e5',
400: '#d7e7d7',
500: '#87A987',
600: '#a1b4a1',
700: '#6f7f6f',
800: '#424e42',
900: '#1e251e',
950: '#040604',
DEFAULT: '#87A987',
},
'light-seafoam-green': {
50: '#fdfffd',
100: '#fafefa',
200: '#f5fbf5',
300: '#eff8ef',
400: '#e6f4e6',
500: '#B2D3B2',
600: '#b7c6b7',
700: '#7f8c7f',
800: '#4c564c',
900: '#242a24',
950: '#060806',
DEFAULT: '#B2D3B2',
},
'deep-dark-spruce': {
50: '#f9fcf9',
100: '#f1f5f1',
200: '#e1e9e1',
300: '#ccd9cc',
400: '#b1c3b1',
500: '#3B533B',
600: '#6d826e',
700: '#4a5b4a',
800: '#29372a',
900: '#101810',
950: '#020302',
DEFAULT: '#3B533B',
},
},
[
{
"name": "calming-sage",
"harmony": "Palette",
"hex": "#87A987",
"rgb": {
"r": 135,
"g": 169,
"b": 135
},
"hsl": {
"h": 120,
"s": 17,
"l": 60
},
"value": "#87A987",
"tonalScale": {
"50": {
"hex": "#fbfefb",
"rgb": {
"r": 251,
"g": 254,
"b": 251
}
},
"100": {
"hex": "#f7fbf7",
"rgb": {
"r": 247,
"g": 251,
"b": 247
}
},
"200": {
"hex": "#eff7ef",
"rgb": {
"r": 239,
"g": 247,
"b": 239
}
},
"300": {
"hex": "#e5f0e5",
"rgb": {
"r": 229,
"g": 240,
"b": 229
}
},
"400": {
"hex": "#d7e7d7",
"rgb": {
"r": 215,
"g": 231,
"b": 215
}
},
"500": {
"hex": "#87A987",
"rgb": {
"r": 135,
"g": 169,
"b": 135
}
},
"600": {
"hex": "#a1b4a1",
"rgb": {
"r": 161,
"g": 180,
"b": 161
}
},
"700": {
"hex": "#6f7f6f",
"rgb": {
"r": 111,
"g": 127,
"b": 111
}
},
"800": {
"hex": "#424e42",
"rgb": {
"r": 66,
"g": 78,
"b": 66
}
},
"900": {
"hex": "#1e251e",
"rgb": {
"r": 30,
"g": 37,
"b": 30
}
},
"950": {
"hex": "#040604",
"rgb": {
"r": 4,
"g": 6,
"b": 4
}
}
}
},
{
"name": "light-seafoam-green",
"harmony": "Palette",
"hex": "#B2D3B2",
"rgb": {
"r": 178,
"g": 211,
"b": 178
},
"hsl": {
"h": 120,
"s": 27,
"l": 76
},
"value": "#B2D3B2",
"tonalScale": {
"50": {
"hex": "#fdfffd",
"rgb": {
"r": 253,
"g": 255,
"b": 253
}
},
"100": {
"hex": "#fafefa",
"rgb": {
"r": 250,
"g": 254,
"b": 250
}
},
"200": {
"hex": "#f5fbf5",
"rgb": {
"r": 245,
"g": 251,
"b": 245
}
},
"300": {
"hex": "#eff8ef",
"rgb": {
"r": 239,
"g": 248,
"b": 239
}
},
"400": {
"hex": "#e6f4e6",
"rgb": {
"r": 230,
"g": 244,
"b": 230
}
},
"500": {
"hex": "#B2D3B2",
"rgb": {
"r": 178,
"g": 211,
"b": 178
}
},
"600": {
"hex": "#b7c6b7",
"rgb": {
"r": 183,
"g": 198,
"b": 183
}
},
"700": {
"hex": "#7f8c7f",
"rgb": {
"r": 127,
"g": 140,
"b": 127
}
},
"800": {
"hex": "#4c564c",
"rgb": {
"r": 76,
"g": 86,
"b": 76
}
},
"900": {
"hex": "#242a24",
"rgb": {
"r": 36,
"g": 42,
"b": 36
}
},
"950": {
"hex": "#060806",
"rgb": {
"r": 6,
"g": 8,
"b": 6
}
}
}
},
{
"name": "deep-dark-spruce",
"harmony": "Palette",
"hex": "#3B533B",
"rgb": {
"r": 59,
"g": 83,
"b": 59
},
"hsl": {
"h": 120,
"s": 17,
"l": 28
},
"value": "#3B533B",
"tonalScale": {
"50": {
"hex": "#f9fcf9",
"rgb": {
"r": 249,
"g": 252,
"b": 249
}
},
"100": {
"hex": "#f1f5f1",
"rgb": {
"r": 241,
"g": 245,
"b": 241
}
},
"200": {
"hex": "#e1e9e1",
"rgb": {
"r": 225,
"g": 233,
"b": 225
}
},
"300": {
"hex": "#ccd9cc",
"rgb": {
"r": 204,
"g": 217,
"b": 204
}
},
"400": {
"hex": "#b1c3b1",
"rgb": {
"r": 177,
"g": 195,
"b": 177
}
},
"500": {
"hex": "#3B533B",
"rgb": {
"r": 59,
"g": 83,
"b": 59
}
},
"600": {
"hex": "#6d826e",
"rgb": {
"r": 109,
"g": 130,
"b": 110
}
},
"700": {
"hex": "#4a5b4a",
"rgb": {
"r": 74,
"g": 91,
"b": 74
}
},
"800": {
"hex": "#29372a",
"rgb": {
"r": 41,
"g": 55,
"b": 42
}
},
"900": {
"hex": "#101810",
"rgb": {
"r": 16,
"g": 24,
"b": 16
}
},
"950": {
"hex": "#020302",
"rgb": {
"r": 2,
"g": 3,
"b": 2
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 calming-sage,Palette,#87A987,"rgb(135, 169, 135)","hsl(120, 17%, 60%)",#87A987,#fbfefb,#f7fbf7,#eff7ef,#e5f0e5,#d7e7d7,#87A987,#a1b4a1,#6f7f6f,#424e42,#1e251e,#040604 light-seafoam-green,Palette,#B2D3B2,"rgb(178, 211, 178)","hsl(120, 27%, 76%)",#B2D3B2,#fdfffd,#fafefa,#f5fbf5,#eff8ef,#e6f4e6,#B2D3B2,#b7c6b7,#7f8c7f,#4c564c,#242a24,#060806 deep-dark-spruce,Palette,#3B533B,"rgb(59, 83, 59)","hsl(120, 17%, 28%)",#3B533B,#f9fcf9,#f1f5f1,#e1e9e1,#ccd9cc,#b1c3b1,#3B533B,#6d826e,#4a5b4a,#29372a,#101810,#020302
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 135 169 135 calming-sage 251 254 251 calming-sage-50 247 251 247 calming-sage-100 239 247 239 calming-sage-200 229 240 229 calming-sage-300 215 231 215 calming-sage-400 135 169 135 calming-sage-500 161 180 161 calming-sage-600 111 127 111 calming-sage-700 66 78 66 calming-sage-800 30 37 30 calming-sage-900 4 6 4 calming-sage-950 178 211 178 light-seafoam-green 253 255 253 light-seafoam-green-50 250 254 250 light-seafoam-green-100 245 251 245 light-seafoam-green-200 239 248 239 light-seafoam-green-300 230 244 230 light-seafoam-green-400 178 211 178 light-seafoam-green-500 183 198 183 light-seafoam-green-600 127 140 127 light-seafoam-green-700 76 86 76 light-seafoam-green-800 36 42 36 light-seafoam-green-900 6 8 6 light-seafoam-green-950 59 83 59 deep-dark-spruce 249 252 249 deep-dark-spruce-50 241 245 241 deep-dark-spruce-100 225 233 225 deep-dark-spruce-200 204 217 204 deep-dark-spruce-300 177 195 177 deep-dark-spruce-400 59 83 59 deep-dark-spruce-500 109 130 110 deep-dark-spruce-600 74 91 74 deep-dark-spruce-700 41 55 42 deep-dark-spruce-800 16 24 16 deep-dark-spruce-900 2 3 2 deep-dark-spruce-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.