← Back to Tools
Generate soft, low-opacity pastel tones matching modern workspace trends, featuring low-contrast workspace yellow (#FFF3CD), pale sage green (#D4EDDA), and light lavender blush (#F3E5F5).
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--low-contrast-workspace-yellow: #FFF3CD;
--low-contrast-workspace-yellow-50: #fffffd;
--low-contrast-workspace-yellow-100: #fffffb;
--low-contrast-workspace-yellow-200: #fffef8;
--low-contrast-workspace-yellow-300: #fffdf3;
--low-contrast-workspace-yellow-400: #fffcee;
--low-contrast-workspace-yellow-500: #FFF3CD;
--low-contrast-workspace-yellow-600: #d8d3c2;
--low-contrast-workspace-yellow-700: #999587;
--low-contrast-workspace-yellow-800: #5e5b51;
--low-contrast-workspace-yellow-900: #2f2d26;
--low-contrast-workspace-yellow-950: #090906;
--pale-sage-green: #D4EDDA;
--pale-sage-green-50: #fefffe;
--pale-sage-green-100: #fcfffd;
--pale-sage-green-200: #fafefb;
--pale-sage-green-300: #f6fdf8;
--pale-sage-green-400: #f2fbf4;
--pale-sage-green-500: #D4EDDA;
--pale-sage-green-600: #c6d1c8;
--pale-sage-green-700: #8b948d;
--pale-sage-green-800: #545b56;
--pale-sage-green-900: #282c29;
--pale-sage-green-950: #070907;
--light-lavender-blush: #F3E5F5;
--light-lavender-blush-50: #fffeff;
--light-lavender-blush-100: #fffeff;
--light-lavender-blush-200: #fefcff;
--light-lavender-blush-300: #fefafe;
--light-lavender-blush-400: #fdf7fd;
--light-lavender-blush-500: #F3E5F5;
--light-lavender-blush-600: #d3cdd4;
--light-lavender-blush-700: #959096;
--light-lavender-blush-800: #5c585d;
--light-lavender-blush-900: #2d2b2d;
--light-lavender-blush-950: #090809;
}
$low-contrast-workspace-yellow: #FFF3CD; $low-contrast-workspace-yellow-50: #fffffd; $low-contrast-workspace-yellow-100: #fffffb; $low-contrast-workspace-yellow-200: #fffef8; $low-contrast-workspace-yellow-300: #fffdf3; $low-contrast-workspace-yellow-400: #fffcee; $low-contrast-workspace-yellow-500: #FFF3CD; $low-contrast-workspace-yellow-600: #d8d3c2; $low-contrast-workspace-yellow-700: #999587; $low-contrast-workspace-yellow-800: #5e5b51; $low-contrast-workspace-yellow-900: #2f2d26; $low-contrast-workspace-yellow-950: #090906; $pale-sage-green: #D4EDDA; $pale-sage-green-50: #fefffe; $pale-sage-green-100: #fcfffd; $pale-sage-green-200: #fafefb; $pale-sage-green-300: #f6fdf8; $pale-sage-green-400: #f2fbf4; $pale-sage-green-500: #D4EDDA; $pale-sage-green-600: #c6d1c8; $pale-sage-green-700: #8b948d; $pale-sage-green-800: #545b56; $pale-sage-green-900: #282c29; $pale-sage-green-950: #070907; $light-lavender-blush: #F3E5F5; $light-lavender-blush-50: #fffeff; $light-lavender-blush-100: #fffeff; $light-lavender-blush-200: #fefcff; $light-lavender-blush-300: #fefafe; $light-lavender-blush-400: #fdf7fd; $light-lavender-blush-500: #F3E5F5; $light-lavender-blush-600: #d3cdd4; $light-lavender-blush-700: #959096; $light-lavender-blush-800: #5c585d; $light-lavender-blush-900: #2d2b2d; $light-lavender-blush-950: #090809;
colors: {
'low-contrast-workspace-yellow': {
50: '#fffffd',
100: '#fffffb',
200: '#fffef8',
300: '#fffdf3',
400: '#fffcee',
500: '#FFF3CD',
600: '#d8d3c2',
700: '#999587',
800: '#5e5b51',
900: '#2f2d26',
950: '#090906',
DEFAULT: '#FFF3CD',
},
'pale-sage-green': {
50: '#fefffe',
100: '#fcfffd',
200: '#fafefb',
300: '#f6fdf8',
400: '#f2fbf4',
500: '#D4EDDA',
600: '#c6d1c8',
700: '#8b948d',
800: '#545b56',
900: '#282c29',
950: '#070907',
DEFAULT: '#D4EDDA',
},
'light-lavender-blush': {
50: '#fffeff',
100: '#fffeff',
200: '#fefcff',
300: '#fefafe',
400: '#fdf7fd',
500: '#F3E5F5',
600: '#d3cdd4',
700: '#959096',
800: '#5c585d',
900: '#2d2b2d',
950: '#090809',
DEFAULT: '#F3E5F5',
},
},
[
{
"name": "low-contrast-workspace-yellow",
"harmony": "Palette",
"hex": "#FFF3CD",
"rgb": {
"r": 255,
"g": 243,
"b": 205
},
"hsl": {
"h": 46,
"s": 100,
"l": 90
},
"value": "#FFF3CD",
"tonalScale": {
"50": {
"hex": "#fffffd",
"rgb": {
"r": 255,
"g": 255,
"b": 253
}
},
"100": {
"hex": "#fffffb",
"rgb": {
"r": 255,
"g": 255,
"b": 251
}
},
"200": {
"hex": "#fffef8",
"rgb": {
"r": 255,
"g": 254,
"b": 248
}
},
"300": {
"hex": "#fffdf3",
"rgb": {
"r": 255,
"g": 253,
"b": 243
}
},
"400": {
"hex": "#fffcee",
"rgb": {
"r": 255,
"g": 252,
"b": 238
}
},
"500": {
"hex": "#FFF3CD",
"rgb": {
"r": 255,
"g": 243,
"b": 205
}
},
"600": {
"hex": "#d8d3c2",
"rgb": {
"r": 216,
"g": 211,
"b": 194
}
},
"700": {
"hex": "#999587",
"rgb": {
"r": 153,
"g": 149,
"b": 135
}
},
"800": {
"hex": "#5e5b51",
"rgb": {
"r": 94,
"g": 91,
"b": 81
}
},
"900": {
"hex": "#2f2d26",
"rgb": {
"r": 47,
"g": 45,
"b": 38
}
},
"950": {
"hex": "#090906",
"rgb": {
"r": 9,
"g": 9,
"b": 6
}
}
}
},
{
"name": "pale-sage-green",
"harmony": "Palette",
"hex": "#D4EDDA",
"rgb": {
"r": 212,
"g": 237,
"b": 218
},
"hsl": {
"h": 134,
"s": 41,
"l": 88
},
"value": "#D4EDDA",
"tonalScale": {
"50": {
"hex": "#fefffe",
"rgb": {
"r": 254,
"g": 255,
"b": 254
}
},
"100": {
"hex": "#fcfffd",
"rgb": {
"r": 252,
"g": 255,
"b": 253
}
},
"200": {
"hex": "#fafefb",
"rgb": {
"r": 250,
"g": 254,
"b": 251
}
},
"300": {
"hex": "#f6fdf8",
"rgb": {
"r": 246,
"g": 253,
"b": 248
}
},
"400": {
"hex": "#f2fbf4",
"rgb": {
"r": 242,
"g": 251,
"b": 244
}
},
"500": {
"hex": "#D4EDDA",
"rgb": {
"r": 212,
"g": 237,
"b": 218
}
},
"600": {
"hex": "#c6d1c8",
"rgb": {
"r": 198,
"g": 209,
"b": 200
}
},
"700": {
"hex": "#8b948d",
"rgb": {
"r": 139,
"g": 148,
"b": 141
}
},
"800": {
"hex": "#545b56",
"rgb": {
"r": 84,
"g": 91,
"b": 86
}
},
"900": {
"hex": "#282c29",
"rgb": {
"r": 40,
"g": 44,
"b": 41
}
},
"950": {
"hex": "#070907",
"rgb": {
"r": 7,
"g": 9,
"b": 7
}
}
}
},
{
"name": "light-lavender-blush",
"harmony": "Palette",
"hex": "#F3E5F5",
"rgb": {
"r": 243,
"g": 229,
"b": 245
},
"hsl": {
"h": 292,
"s": 44,
"l": 93
},
"value": "#F3E5F5",
"tonalScale": {
"50": {
"hex": "#fffeff",
"rgb": {
"r": 255,
"g": 254,
"b": 255
}
},
"100": {
"hex": "#fffeff",
"rgb": {
"r": 255,
"g": 254,
"b": 255
}
},
"200": {
"hex": "#fefcff",
"rgb": {
"r": 254,
"g": 252,
"b": 255
}
},
"300": {
"hex": "#fefafe",
"rgb": {
"r": 254,
"g": 250,
"b": 254
}
},
"400": {
"hex": "#fdf7fd",
"rgb": {
"r": 253,
"g": 247,
"b": 253
}
},
"500": {
"hex": "#F3E5F5",
"rgb": {
"r": 243,
"g": 229,
"b": 245
}
},
"600": {
"hex": "#d3cdd4",
"rgb": {
"r": 211,
"g": 205,
"b": 212
}
},
"700": {
"hex": "#959096",
"rgb": {
"r": 149,
"g": 144,
"b": 150
}
},
"800": {
"hex": "#5c585d",
"rgb": {
"r": 92,
"g": 88,
"b": 93
}
},
"900": {
"hex": "#2d2b2d",
"rgb": {
"r": 45,
"g": 43,
"b": 45
}
},
"950": {
"hex": "#090809",
"rgb": {
"r": 9,
"g": 8,
"b": 9
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 low-contrast-workspace-yellow,Palette,#FFF3CD,"rgb(255, 243, 205)","hsl(46, 100%, 90%)",#FFF3CD,#fffffd,#fffffb,#fffef8,#fffdf3,#fffcee,#FFF3CD,#d8d3c2,#999587,#5e5b51,#2f2d26,#090906 pale-sage-green,Palette,#D4EDDA,"rgb(212, 237, 218)","hsl(134, 41%, 88%)",#D4EDDA,#fefffe,#fcfffd,#fafefb,#f6fdf8,#f2fbf4,#D4EDDA,#c6d1c8,#8b948d,#545b56,#282c29,#070907 light-lavender-blush,Palette,#F3E5F5,"rgb(243, 229, 245)","hsl(292, 44%, 93%)",#F3E5F5,#fffeff,#fffeff,#fefcff,#fefafe,#fdf7fd,#F3E5F5,#d3cdd4,#959096,#5c585d,#2d2b2d,#090809
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 255 243 205 low-contrast-workspace-yellow 255 255 253 low-contrast-workspace-yellow-50 255 255 251 low-contrast-workspace-yellow-100 255 254 248 low-contrast-workspace-yellow-200 255 253 243 low-contrast-workspace-yellow-300 255 252 238 low-contrast-workspace-yellow-400 255 243 205 low-contrast-workspace-yellow-500 216 211 194 low-contrast-workspace-yellow-600 153 149 135 low-contrast-workspace-yellow-700 94 91 81 low-contrast-workspace-yellow-800 47 45 38 low-contrast-workspace-yellow-900 9 9 6 low-contrast-workspace-yellow-950 212 237 218 pale-sage-green 254 255 254 pale-sage-green-50 252 255 253 pale-sage-green-100 250 254 251 pale-sage-green-200 246 253 248 pale-sage-green-300 242 251 244 pale-sage-green-400 212 237 218 pale-sage-green-500 198 209 200 pale-sage-green-600 139 148 141 pale-sage-green-700 84 91 86 pale-sage-green-800 40 44 41 pale-sage-green-900 7 9 7 pale-sage-green-950 243 229 245 light-lavender-blush 255 254 255 light-lavender-blush-50 255 254 255 light-lavender-blush-100 254 252 255 light-lavender-blush-200 254 250 254 light-lavender-blush-300 253 247 253 light-lavender-blush-400 243 229 245 light-lavender-blush-500 211 205 212 light-lavender-blush-600 149 144 150 light-lavender-blush-700 92 88 93 light-lavender-blush-800 45 43 45 light-lavender-blush-900 9 8 9 light-lavender-blush-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.