← Back to Tools
Create calming wellness and organic skincare branding with this sage green and cream palette featuring #9CAF88 sage, #E8E4D9 warm cream, #4A5D4A deep forest, and #F5F5F0 soft white.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--sage: #9CAF88;
--sage-50: #fcfefb;
--sage-100: #f9fcf7;
--sage-200: #f3f7ef;
--sage-300: #ebf1e4;
--sage-400: #e0e8d6;
--sage-500: #9CAF88;
--sage-600: #acb6a1;
--sage-700: #78816f;
--sage-800: #484f41;
--sage-900: #22261d;
--sage-950: #050604;
--warm-cream: #E8E4D9;
--warm-cream-50: #fffffe;
--warm-cream-100: #fefefd;
--warm-cream-200: #fdfcfa;
--warm-cream-300: #fbfaf7;
--warm-cream-400: #f9f8f4;
--warm-cream-500: #E8E4D9;
--warm-cream-600: #cfcdc8;
--warm-cream-700: #92918c;
--warm-cream-800: #5a5956;
--warm-cream-900: #2c2b29;
--warm-cream-950: #080807;
--deep-forest: #4A5D4A;
--deep-forest-50: #fafcfa;
--deep-forest-100: #f3f6f3;
--deep-forest-200: #e5ebe5;
--deep-forest-300: #d3dcd3;
--deep-forest-400: #bbc8bb;
--deep-forest-500: #4A5D4A;
--deep-forest-600: #7a897a;
--deep-forest-700: #536053;
--deep-forest-800: #303a30;
--deep-forest-900: #141a14;
--deep-forest-950: #020302;
--soft-white: #F5F5F0;
--soft-white-50: #ffffff;
--soft-white-100: #fffffe;
--soft-white-200: #fefefd;
--soft-white-300: #fdfdfc;
--soft-white-400: #fcfcfb;
--soft-white-500: #F5F5F0;
--soft-white-600: #d3d3d1;
--soft-white-700: #959594;
--soft-white-800: #5c5c5a;
--soft-white-900: #2d2d2c;
--soft-white-950: #090908;
}
$sage: #9CAF88; $sage-50: #fcfefb; $sage-100: #f9fcf7; $sage-200: #f3f7ef; $sage-300: #ebf1e4; $sage-400: #e0e8d6; $sage-500: #9CAF88; $sage-600: #acb6a1; $sage-700: #78816f; $sage-800: #484f41; $sage-900: #22261d; $sage-950: #050604; $warm-cream: #E8E4D9; $warm-cream-50: #fffffe; $warm-cream-100: #fefefd; $warm-cream-200: #fdfcfa; $warm-cream-300: #fbfaf7; $warm-cream-400: #f9f8f4; $warm-cream-500: #E8E4D9; $warm-cream-600: #cfcdc8; $warm-cream-700: #92918c; $warm-cream-800: #5a5956; $warm-cream-900: #2c2b29; $warm-cream-950: #080807; $deep-forest: #4A5D4A; $deep-forest-50: #fafcfa; $deep-forest-100: #f3f6f3; $deep-forest-200: #e5ebe5; $deep-forest-300: #d3dcd3; $deep-forest-400: #bbc8bb; $deep-forest-500: #4A5D4A; $deep-forest-600: #7a897a; $deep-forest-700: #536053; $deep-forest-800: #303a30; $deep-forest-900: #141a14; $deep-forest-950: #020302; $soft-white: #F5F5F0; $soft-white-50: #ffffff; $soft-white-100: #fffffe; $soft-white-200: #fefefd; $soft-white-300: #fdfdfc; $soft-white-400: #fcfcfb; $soft-white-500: #F5F5F0; $soft-white-600: #d3d3d1; $soft-white-700: #959594; $soft-white-800: #5c5c5a; $soft-white-900: #2d2d2c; $soft-white-950: #090908;
colors: {
'sage': {
50: '#fcfefb',
100: '#f9fcf7',
200: '#f3f7ef',
300: '#ebf1e4',
400: '#e0e8d6',
500: '#9CAF88',
600: '#acb6a1',
700: '#78816f',
800: '#484f41',
900: '#22261d',
950: '#050604',
DEFAULT: '#9CAF88',
},
'warm-cream': {
50: '#fffffe',
100: '#fefefd',
200: '#fdfcfa',
300: '#fbfaf7',
400: '#f9f8f4',
500: '#E8E4D9',
600: '#cfcdc8',
700: '#92918c',
800: '#5a5956',
900: '#2c2b29',
950: '#080807',
DEFAULT: '#E8E4D9',
},
'deep-forest': {
50: '#fafcfa',
100: '#f3f6f3',
200: '#e5ebe5',
300: '#d3dcd3',
400: '#bbc8bb',
500: '#4A5D4A',
600: '#7a897a',
700: '#536053',
800: '#303a30',
900: '#141a14',
950: '#020302',
DEFAULT: '#4A5D4A',
},
'soft-white': {
50: '#ffffff',
100: '#fffffe',
200: '#fefefd',
300: '#fdfdfc',
400: '#fcfcfb',
500: '#F5F5F0',
600: '#d3d3d1',
700: '#959594',
800: '#5c5c5a',
900: '#2d2d2c',
950: '#090908',
DEFAULT: '#F5F5F0',
},
},
[
{
"name": "sage",
"harmony": "Palette",
"hex": "#9CAF88",
"rgb": {
"r": 156,
"g": 175,
"b": 136
},
"hsl": {
"h": 89,
"s": 20,
"l": 61
},
"value": "#9CAF88",
"tonalScale": {
"50": {
"hex": "#fcfefb",
"rgb": {
"r": 252,
"g": 254,
"b": 251
}
},
"100": {
"hex": "#f9fcf7",
"rgb": {
"r": 249,
"g": 252,
"b": 247
}
},
"200": {
"hex": "#f3f7ef",
"rgb": {
"r": 243,
"g": 247,
"b": 239
}
},
"300": {
"hex": "#ebf1e4",
"rgb": {
"r": 235,
"g": 241,
"b": 228
}
},
"400": {
"hex": "#e0e8d6",
"rgb": {
"r": 224,
"g": 232,
"b": 214
}
},
"500": {
"hex": "#9CAF88",
"rgb": {
"r": 156,
"g": 175,
"b": 136
}
},
"600": {
"hex": "#acb6a1",
"rgb": {
"r": 172,
"g": 182,
"b": 161
}
},
"700": {
"hex": "#78816f",
"rgb": {
"r": 120,
"g": 129,
"b": 111
}
},
"800": {
"hex": "#484f41",
"rgb": {
"r": 72,
"g": 79,
"b": 65
}
},
"900": {
"hex": "#22261d",
"rgb": {
"r": 34,
"g": 38,
"b": 29
}
},
"950": {
"hex": "#050604",
"rgb": {
"r": 5,
"g": 6,
"b": 4
}
}
}
},
{
"name": "warm-cream",
"harmony": "Palette",
"hex": "#E8E4D9",
"rgb": {
"r": 232,
"g": 228,
"b": 217
},
"hsl": {
"h": 44,
"s": 25,
"l": 88
},
"value": "#E8E4D9",
"tonalScale": {
"50": {
"hex": "#fffffe",
"rgb": {
"r": 255,
"g": 255,
"b": 254
}
},
"100": {
"hex": "#fefefd",
"rgb": {
"r": 254,
"g": 254,
"b": 253
}
},
"200": {
"hex": "#fdfcfa",
"rgb": {
"r": 253,
"g": 252,
"b": 250
}
},
"300": {
"hex": "#fbfaf7",
"rgb": {
"r": 251,
"g": 250,
"b": 247
}
},
"400": {
"hex": "#f9f8f4",
"rgb": {
"r": 249,
"g": 248,
"b": 244
}
},
"500": {
"hex": "#E8E4D9",
"rgb": {
"r": 232,
"g": 228,
"b": 217
}
},
"600": {
"hex": "#cfcdc8",
"rgb": {
"r": 207,
"g": 205,
"b": 200
}
},
"700": {
"hex": "#92918c",
"rgb": {
"r": 146,
"g": 145,
"b": 140
}
},
"800": {
"hex": "#5a5956",
"rgb": {
"r": 90,
"g": 89,
"b": 86
}
},
"900": {
"hex": "#2c2b29",
"rgb": {
"r": 44,
"g": 43,
"b": 41
}
},
"950": {
"hex": "#080807",
"rgb": {
"r": 8,
"g": 8,
"b": 7
}
}
}
},
{
"name": "deep-forest",
"harmony": "Palette",
"hex": "#4A5D4A",
"rgb": {
"r": 74,
"g": 93,
"b": 74
},
"hsl": {
"h": 120,
"s": 11,
"l": 33
},
"value": "#4A5D4A",
"tonalScale": {
"50": {
"hex": "#fafcfa",
"rgb": {
"r": 250,
"g": 252,
"b": 250
}
},
"100": {
"hex": "#f3f6f3",
"rgb": {
"r": 243,
"g": 246,
"b": 243
}
},
"200": {
"hex": "#e5ebe5",
"rgb": {
"r": 229,
"g": 235,
"b": 229
}
},
"300": {
"hex": "#d3dcd3",
"rgb": {
"r": 211,
"g": 220,
"b": 211
}
},
"400": {
"hex": "#bbc8bb",
"rgb": {
"r": 187,
"g": 200,
"b": 187
}
},
"500": {
"hex": "#4A5D4A",
"rgb": {
"r": 74,
"g": 93,
"b": 74
}
},
"600": {
"hex": "#7a897a",
"rgb": {
"r": 122,
"g": 137,
"b": 122
}
},
"700": {
"hex": "#536053",
"rgb": {
"r": 83,
"g": 96,
"b": 83
}
},
"800": {
"hex": "#303a30",
"rgb": {
"r": 48,
"g": 58,
"b": 48
}
},
"900": {
"hex": "#141a14",
"rgb": {
"r": 20,
"g": 26,
"b": 20
}
},
"950": {
"hex": "#020302",
"rgb": {
"r": 2,
"g": 3,
"b": 2
}
}
}
},
{
"name": "soft-white",
"harmony": "Palette",
"hex": "#F5F5F0",
"rgb": {
"r": 245,
"g": 245,
"b": 240
},
"hsl": {
"h": 60,
"s": 20,
"l": 95
},
"value": "#F5F5F0",
"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": "#fdfdfc",
"rgb": {
"r": 253,
"g": 253,
"b": 252
}
},
"400": {
"hex": "#fcfcfb",
"rgb": {
"r": 252,
"g": 252,
"b": 251
}
},
"500": {
"hex": "#F5F5F0",
"rgb": {
"r": 245,
"g": 245,
"b": 240
}
},
"600": {
"hex": "#d3d3d1",
"rgb": {
"r": 211,
"g": 211,
"b": 209
}
},
"700": {
"hex": "#959594",
"rgb": {
"r": 149,
"g": 149,
"b": 148
}
},
"800": {
"hex": "#5c5c5a",
"rgb": {
"r": 92,
"g": 92,
"b": 90
}
},
"900": {
"hex": "#2d2d2c",
"rgb": {
"r": 45,
"g": 45,
"b": 44
}
},
"950": {
"hex": "#090908",
"rgb": {
"r": 9,
"g": 9,
"b": 8
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 sage,Palette,#9CAF88,"rgb(156, 175, 136)","hsl(89, 20%, 61%)",#9CAF88,#fcfefb,#f9fcf7,#f3f7ef,#ebf1e4,#e0e8d6,#9CAF88,#acb6a1,#78816f,#484f41,#22261d,#050604 warm-cream,Palette,#E8E4D9,"rgb(232, 228, 217)","hsl(44, 25%, 88%)",#E8E4D9,#fffffe,#fefefd,#fdfcfa,#fbfaf7,#f9f8f4,#E8E4D9,#cfcdc8,#92918c,#5a5956,#2c2b29,#080807 deep-forest,Palette,#4A5D4A,"rgb(74, 93, 74)","hsl(120, 11%, 33%)",#4A5D4A,#fafcfa,#f3f6f3,#e5ebe5,#d3dcd3,#bbc8bb,#4A5D4A,#7a897a,#536053,#303a30,#141a14,#020302 soft-white,Palette,#F5F5F0,"rgb(245, 245, 240)","hsl(60, 20%, 95%)",#F5F5F0,#ffffff,#fffffe,#fefefd,#fdfdfc,#fcfcfb,#F5F5F0,#d3d3d1,#959594,#5c5c5a,#2d2d2c,#090908
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 156 175 136 sage 252 254 251 sage-50 249 252 247 sage-100 243 247 239 sage-200 235 241 228 sage-300 224 232 214 sage-400 156 175 136 sage-500 172 182 161 sage-600 120 129 111 sage-700 72 79 65 sage-800 34 38 29 sage-900 5 6 4 sage-950 232 228 217 warm-cream 255 255 254 warm-cream-50 254 254 253 warm-cream-100 253 252 250 warm-cream-200 251 250 247 warm-cream-300 249 248 244 warm-cream-400 232 228 217 warm-cream-500 207 205 200 warm-cream-600 146 145 140 warm-cream-700 90 89 86 warm-cream-800 44 43 41 warm-cream-900 8 8 7 warm-cream-950 74 93 74 deep-forest 250 252 250 deep-forest-50 243 246 243 deep-forest-100 229 235 229 deep-forest-200 211 220 211 deep-forest-300 187 200 187 deep-forest-400 74 93 74 deep-forest-500 122 137 122 deep-forest-600 83 96 83 deep-forest-700 48 58 48 deep-forest-800 20 26 20 deep-forest-900 2 3 2 deep-forest-950 245 245 240 soft-white 255 255 255 soft-white-50 255 255 254 soft-white-100 254 254 253 soft-white-200 253 253 252 soft-white-300 252 252 251 soft-white-400 245 245 240 soft-white-500 211 211 209 soft-white-600 149 149 148 soft-white-700 92 92 90 soft-white-800 45 45 44 soft-white-900 9 9 8 soft-white-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.