← Back to Tools
Explore the 87A987 color - a calming sage green hex code. This palette pairs #87A987 sage with #B2D3B2 seafoam, #3B533B deep spruce, #EAF2EA pale sage, and #5C6B4A olive for nature-inspired, wellness designs.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--sage: #87A987;
--sage-50: #fbfefb;
--sage-100: #f7fbf7;
--sage-200: #eff7ef;
--sage-300: #e5f0e5;
--sage-400: #d7e7d7;
--sage-500: #87A987;
--sage-600: #a1b4a1;
--sage-700: #6f7f6f;
--sage-800: #424e42;
--sage-900: #1e251e;
--sage-950: #040604;
--seafoam: #B2D3B2;
--seafoam-50: #fdfffd;
--seafoam-100: #fafefa;
--seafoam-200: #f5fbf5;
--seafoam-300: #eff8ef;
--seafoam-400: #e6f4e6;
--seafoam-500: #B2D3B2;
--seafoam-600: #b7c6b7;
--seafoam-700: #7f8c7f;
--seafoam-800: #4c564c;
--seafoam-900: #242a24;
--seafoam-950: #060806;
--deep-spruce: #3B533B;
--deep-spruce-50: #f9fcf9;
--deep-spruce-100: #f1f5f1;
--deep-spruce-200: #e1e9e1;
--deep-spruce-300: #ccd9cc;
--deep-spruce-400: #b1c3b1;
--deep-spruce-500: #3B533B;
--deep-spruce-600: #6d826e;
--deep-spruce-700: #4a5b4a;
--deep-spruce-800: #29372a;
--deep-spruce-900: #101810;
--deep-spruce-950: #020302;
--pale-sage: #EAF2EA;
--pale-sage-50: #fefffe;
--pale-sage-100: #fefffe;
--pale-sage-200: #fdfefd;
--pale-sage-300: #fbfdfb;
--pale-sage-400: #f9fcf9;
--pale-sage-500: #EAF2EA;
--pale-sage-600: #cfd2cf;
--pale-sage-700: #929592;
--pale-sage-800: #595b59;
--pale-sage-900: #2b2d2b;
--pale-sage-950: #080908;
--olive: #5C6B4A;
--olive-50: #fbfcf9;
--olive-100: #f5f7f2;
--olive-200: #e9ede3;
--olive-300: #dae0d1;
--olive-400: #c5ceb9;
--olive-500: #5C6B4A;
--olive-600: #879279;
--olive-700: #5e6652;
--olive-800: #373e2e;
--olive-900: #181c12;
--olive-950: #030402;
}
$sage: #87A987; $sage-50: #fbfefb; $sage-100: #f7fbf7; $sage-200: #eff7ef; $sage-300: #e5f0e5; $sage-400: #d7e7d7; $sage-500: #87A987; $sage-600: #a1b4a1; $sage-700: #6f7f6f; $sage-800: #424e42; $sage-900: #1e251e; $sage-950: #040604; $seafoam: #B2D3B2; $seafoam-50: #fdfffd; $seafoam-100: #fafefa; $seafoam-200: #f5fbf5; $seafoam-300: #eff8ef; $seafoam-400: #e6f4e6; $seafoam-500: #B2D3B2; $seafoam-600: #b7c6b7; $seafoam-700: #7f8c7f; $seafoam-800: #4c564c; $seafoam-900: #242a24; $seafoam-950: #060806; $deep-spruce: #3B533B; $deep-spruce-50: #f9fcf9; $deep-spruce-100: #f1f5f1; $deep-spruce-200: #e1e9e1; $deep-spruce-300: #ccd9cc; $deep-spruce-400: #b1c3b1; $deep-spruce-500: #3B533B; $deep-spruce-600: #6d826e; $deep-spruce-700: #4a5b4a; $deep-spruce-800: #29372a; $deep-spruce-900: #101810; $deep-spruce-950: #020302; $pale-sage: #EAF2EA; $pale-sage-50: #fefffe; $pale-sage-100: #fefffe; $pale-sage-200: #fdfefd; $pale-sage-300: #fbfdfb; $pale-sage-400: #f9fcf9; $pale-sage-500: #EAF2EA; $pale-sage-600: #cfd2cf; $pale-sage-700: #929592; $pale-sage-800: #595b59; $pale-sage-900: #2b2d2b; $pale-sage-950: #080908; $olive: #5C6B4A; $olive-50: #fbfcf9; $olive-100: #f5f7f2; $olive-200: #e9ede3; $olive-300: #dae0d1; $olive-400: #c5ceb9; $olive-500: #5C6B4A; $olive-600: #879279; $olive-700: #5e6652; $olive-800: #373e2e; $olive-900: #181c12; $olive-950: #030402;
colors: {
'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',
},
'seafoam': {
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-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',
},
'pale-sage': {
50: '#fefffe',
100: '#fefffe',
200: '#fdfefd',
300: '#fbfdfb',
400: '#f9fcf9',
500: '#EAF2EA',
600: '#cfd2cf',
700: '#929592',
800: '#595b59',
900: '#2b2d2b',
950: '#080908',
DEFAULT: '#EAF2EA',
},
'olive': {
50: '#fbfcf9',
100: '#f5f7f2',
200: '#e9ede3',
300: '#dae0d1',
400: '#c5ceb9',
500: '#5C6B4A',
600: '#879279',
700: '#5e6652',
800: '#373e2e',
900: '#181c12',
950: '#030402',
DEFAULT: '#5C6B4A',
},
},
[
{
"name": "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": "seafoam",
"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-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": "pale-sage",
"harmony": "Palette",
"hex": "#EAF2EA",
"rgb": {
"r": 234,
"g": 242,
"b": 234
},
"hsl": {
"h": 120,
"s": 24,
"l": 93
},
"value": "#EAF2EA",
"tonalScale": {
"50": {
"hex": "#fefffe",
"rgb": {
"r": 254,
"g": 255,
"b": 254
}
},
"100": {
"hex": "#fefffe",
"rgb": {
"r": 254,
"g": 255,
"b": 254
}
},
"200": {
"hex": "#fdfefd",
"rgb": {
"r": 253,
"g": 254,
"b": 253
}
},
"300": {
"hex": "#fbfdfb",
"rgb": {
"r": 251,
"g": 253,
"b": 251
}
},
"400": {
"hex": "#f9fcf9",
"rgb": {
"r": 249,
"g": 252,
"b": 249
}
},
"500": {
"hex": "#EAF2EA",
"rgb": {
"r": 234,
"g": 242,
"b": 234
}
},
"600": {
"hex": "#cfd2cf",
"rgb": {
"r": 207,
"g": 210,
"b": 207
}
},
"700": {
"hex": "#929592",
"rgb": {
"r": 146,
"g": 149,
"b": 146
}
},
"800": {
"hex": "#595b59",
"rgb": {
"r": 89,
"g": 91,
"b": 89
}
},
"900": {
"hex": "#2b2d2b",
"rgb": {
"r": 43,
"g": 45,
"b": 43
}
},
"950": {
"hex": "#080908",
"rgb": {
"r": 8,
"g": 9,
"b": 8
}
}
}
},
{
"name": "olive",
"harmony": "Palette",
"hex": "#5C6B4A",
"rgb": {
"r": 92,
"g": 107,
"b": 74
},
"hsl": {
"h": 87,
"s": 18,
"l": 35
},
"value": "#5C6B4A",
"tonalScale": {
"50": {
"hex": "#fbfcf9",
"rgb": {
"r": 251,
"g": 252,
"b": 249
}
},
"100": {
"hex": "#f5f7f2",
"rgb": {
"r": 245,
"g": 247,
"b": 242
}
},
"200": {
"hex": "#e9ede3",
"rgb": {
"r": 233,
"g": 237,
"b": 227
}
},
"300": {
"hex": "#dae0d1",
"rgb": {
"r": 218,
"g": 224,
"b": 209
}
},
"400": {
"hex": "#c5ceb9",
"rgb": {
"r": 197,
"g": 206,
"b": 185
}
},
"500": {
"hex": "#5C6B4A",
"rgb": {
"r": 92,
"g": 107,
"b": 74
}
},
"600": {
"hex": "#879279",
"rgb": {
"r": 135,
"g": 146,
"b": 121
}
},
"700": {
"hex": "#5e6652",
"rgb": {
"r": 94,
"g": 102,
"b": 82
}
},
"800": {
"hex": "#373e2e",
"rgb": {
"r": 55,
"g": 62,
"b": 46
}
},
"900": {
"hex": "#181c12",
"rgb": {
"r": 24,
"g": 28,
"b": 18
}
},
"950": {
"hex": "#030402",
"rgb": {
"r": 3,
"g": 4,
"b": 2
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 sage,Palette,#87A987,"rgb(135, 169, 135)","hsl(120, 17%, 60%)",#87A987,#fbfefb,#f7fbf7,#eff7ef,#e5f0e5,#d7e7d7,#87A987,#a1b4a1,#6f7f6f,#424e42,#1e251e,#040604 seafoam,Palette,#B2D3B2,"rgb(178, 211, 178)","hsl(120, 27%, 76%)",#B2D3B2,#fdfffd,#fafefa,#f5fbf5,#eff8ef,#e6f4e6,#B2D3B2,#b7c6b7,#7f8c7f,#4c564c,#242a24,#060806 deep-spruce,Palette,#3B533B,"rgb(59, 83, 59)","hsl(120, 17%, 28%)",#3B533B,#f9fcf9,#f1f5f1,#e1e9e1,#ccd9cc,#b1c3b1,#3B533B,#6d826e,#4a5b4a,#29372a,#101810,#020302 pale-sage,Palette,#EAF2EA,"rgb(234, 242, 234)","hsl(120, 24%, 93%)",#EAF2EA,#fefffe,#fefffe,#fdfefd,#fbfdfb,#f9fcf9,#EAF2EA,#cfd2cf,#929592,#595b59,#2b2d2b,#080908 olive,Palette,#5C6B4A,"rgb(92, 107, 74)","hsl(87, 18%, 35%)",#5C6B4A,#fbfcf9,#f5f7f2,#e9ede3,#dae0d1,#c5ceb9,#5C6B4A,#879279,#5e6652,#373e2e,#181c12,#030402
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 135 169 135 sage 251 254 251 sage-50 247 251 247 sage-100 239 247 239 sage-200 229 240 229 sage-300 215 231 215 sage-400 135 169 135 sage-500 161 180 161 sage-600 111 127 111 sage-700 66 78 66 sage-800 30 37 30 sage-900 4 6 4 sage-950 178 211 178 seafoam 253 255 253 seafoam-50 250 254 250 seafoam-100 245 251 245 seafoam-200 239 248 239 seafoam-300 230 244 230 seafoam-400 178 211 178 seafoam-500 183 198 183 seafoam-600 127 140 127 seafoam-700 76 86 76 seafoam-800 36 42 36 seafoam-900 6 8 6 seafoam-950 59 83 59 deep-spruce 249 252 249 deep-spruce-50 241 245 241 deep-spruce-100 225 233 225 deep-spruce-200 204 217 204 deep-spruce-300 177 195 177 deep-spruce-400 59 83 59 deep-spruce-500 109 130 110 deep-spruce-600 74 91 74 deep-spruce-700 41 55 42 deep-spruce-800 16 24 16 deep-spruce-900 2 3 2 deep-spruce-950 234 242 234 pale-sage 254 255 254 pale-sage-50 254 255 254 pale-sage-100 253 254 253 pale-sage-200 251 253 251 pale-sage-300 249 252 249 pale-sage-400 234 242 234 pale-sage-500 207 210 207 pale-sage-600 146 149 146 pale-sage-700 89 91 89 pale-sage-800 43 45 43 pale-sage-900 8 9 8 pale-sage-950 92 107 74 olive 251 252 249 olive-50 245 247 242 olive-100 233 237 227 olive-200 218 224 209 olive-300 197 206 185 olive-400 92 107 74 olive-500 135 146 121 olive-600 94 102 82 olive-700 55 62 46 olive-800 24 28 18 olive-900 3 4 2 olive-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.