← Back to Tools
Create stunning blush rose gradients for web design and UI projects, interpolating a soft, romantic blush pink (#FFF0F1) into a rich, deep rose quartz (#E8B4B8).
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--romantic-blush-pink: #FFF0F1;
--romantic-blush-pink-50: #ffffff;
--romantic-blush-pink-100: #fffefe;
--romantic-blush-pink-200: #fffdfd;
--romantic-blush-pink-300: #fffcfc;
--romantic-blush-pink-400: #fffbfb;
--romantic-blush-pink-500: #FFF0F1;
--romantic-blush-pink-600: #d8d1d2;
--romantic-blush-pink-700: #999494;
--romantic-blush-pink-800: #5e5a5b;
--romantic-blush-pink-900: #2e2c2c;
--romantic-blush-pink-950: #090808;
--deep-rose-quartz: #E8B4B8;
--deep-rose-quartz-50: #fffdfd;
--deep-rose-quartz-100: #fffbfb;
--deep-rose-quartz-200: #fff6f7;
--deep-rose-quartz-300: #fff0f1;
--deep-rose-quartz-400: #fce8e9;
--deep-rose-quartz-500: #E8B4B8;
--deep-rose-quartz-600: #d0b8ba;
--deep-rose-quartz-700: #948182;
--deep-rose-quartz-800: #5d4e4f;
--deep-rose-quartz-900: #2e2525;
--deep-rose-quartz-950: #090606;
}
$romantic-blush-pink: #FFF0F1; $romantic-blush-pink-50: #ffffff; $romantic-blush-pink-100: #fffefe; $romantic-blush-pink-200: #fffdfd; $romantic-blush-pink-300: #fffcfc; $romantic-blush-pink-400: #fffbfb; $romantic-blush-pink-500: #FFF0F1; $romantic-blush-pink-600: #d8d1d2; $romantic-blush-pink-700: #999494; $romantic-blush-pink-800: #5e5a5b; $romantic-blush-pink-900: #2e2c2c; $romantic-blush-pink-950: #090808; $deep-rose-quartz: #E8B4B8; $deep-rose-quartz-50: #fffdfd; $deep-rose-quartz-100: #fffbfb; $deep-rose-quartz-200: #fff6f7; $deep-rose-quartz-300: #fff0f1; $deep-rose-quartz-400: #fce8e9; $deep-rose-quartz-500: #E8B4B8; $deep-rose-quartz-600: #d0b8ba; $deep-rose-quartz-700: #948182; $deep-rose-quartz-800: #5d4e4f; $deep-rose-quartz-900: #2e2525; $deep-rose-quartz-950: #090606;
colors: {
'romantic-blush-pink': {
50: '#ffffff',
100: '#fffefe',
200: '#fffdfd',
300: '#fffcfc',
400: '#fffbfb',
500: '#FFF0F1',
600: '#d8d1d2',
700: '#999494',
800: '#5e5a5b',
900: '#2e2c2c',
950: '#090808',
DEFAULT: '#FFF0F1',
},
'deep-rose-quartz': {
50: '#fffdfd',
100: '#fffbfb',
200: '#fff6f7',
300: '#fff0f1',
400: '#fce8e9',
500: '#E8B4B8',
600: '#d0b8ba',
700: '#948182',
800: '#5d4e4f',
900: '#2e2525',
950: '#090606',
DEFAULT: '#E8B4B8',
},
},
[
{
"name": "romantic-blush-pink",
"harmony": "Palette",
"hex": "#FFF0F1",
"rgb": {
"r": 255,
"g": 240,
"b": 241
},
"hsl": {
"h": 356,
"s": 100,
"l": 97
},
"value": "#FFF0F1",
"tonalScale": {
"50": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#fffefe",
"rgb": {
"r": 255,
"g": 254,
"b": 254
}
},
"200": {
"hex": "#fffdfd",
"rgb": {
"r": 255,
"g": 253,
"b": 253
}
},
"300": {
"hex": "#fffcfc",
"rgb": {
"r": 255,
"g": 252,
"b": 252
}
},
"400": {
"hex": "#fffbfb",
"rgb": {
"r": 255,
"g": 251,
"b": 251
}
},
"500": {
"hex": "#FFF0F1",
"rgb": {
"r": 255,
"g": 240,
"b": 241
}
},
"600": {
"hex": "#d8d1d2",
"rgb": {
"r": 216,
"g": 209,
"b": 210
}
},
"700": {
"hex": "#999494",
"rgb": {
"r": 153,
"g": 148,
"b": 148
}
},
"800": {
"hex": "#5e5a5b",
"rgb": {
"r": 94,
"g": 90,
"b": 91
}
},
"900": {
"hex": "#2e2c2c",
"rgb": {
"r": 46,
"g": 44,
"b": 44
}
},
"950": {
"hex": "#090808",
"rgb": {
"r": 9,
"g": 8,
"b": 8
}
}
}
},
{
"name": "deep-rose-quartz",
"harmony": "Palette",
"hex": "#E8B4B8",
"rgb": {
"r": 232,
"g": 180,
"b": 184
},
"hsl": {
"h": 355,
"s": 53,
"l": 81
},
"value": "#E8B4B8",
"tonalScale": {
"50": {
"hex": "#fffdfd",
"rgb": {
"r": 255,
"g": 253,
"b": 253
}
},
"100": {
"hex": "#fffbfb",
"rgb": {
"r": 255,
"g": 251,
"b": 251
}
},
"200": {
"hex": "#fff6f7",
"rgb": {
"r": 255,
"g": 246,
"b": 247
}
},
"300": {
"hex": "#fff0f1",
"rgb": {
"r": 255,
"g": 240,
"b": 241
}
},
"400": {
"hex": "#fce8e9",
"rgb": {
"r": 252,
"g": 232,
"b": 233
}
},
"500": {
"hex": "#E8B4B8",
"rgb": {
"r": 232,
"g": 180,
"b": 184
}
},
"600": {
"hex": "#d0b8ba",
"rgb": {
"r": 208,
"g": 184,
"b": 186
}
},
"700": {
"hex": "#948182",
"rgb": {
"r": 148,
"g": 129,
"b": 130
}
},
"800": {
"hex": "#5d4e4f",
"rgb": {
"r": 93,
"g": 78,
"b": 79
}
},
"900": {
"hex": "#2e2525",
"rgb": {
"r": 46,
"g": 37,
"b": 37
}
},
"950": {
"hex": "#090606",
"rgb": {
"r": 9,
"g": 6,
"b": 6
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 romantic-blush-pink,Palette,#FFF0F1,"rgb(255, 240, 241)","hsl(356, 100%, 97%)",#FFF0F1,#ffffff,#fffefe,#fffdfd,#fffcfc,#fffbfb,#FFF0F1,#d8d1d2,#999494,#5e5a5b,#2e2c2c,#090808 deep-rose-quartz,Palette,#E8B4B8,"rgb(232, 180, 184)","hsl(355, 53%, 81%)",#E8B4B8,#fffdfd,#fffbfb,#fff6f7,#fff0f1,#fce8e9,#E8B4B8,#d0b8ba,#948182,#5d4e4f,#2e2525,#090606
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 255 240 241 romantic-blush-pink 255 255 255 romantic-blush-pink-50 255 254 254 romantic-blush-pink-100 255 253 253 romantic-blush-pink-200 255 252 252 romantic-blush-pink-300 255 251 251 romantic-blush-pink-400 255 240 241 romantic-blush-pink-500 216 209 210 romantic-blush-pink-600 153 148 148 romantic-blush-pink-700 94 90 91 romantic-blush-pink-800 46 44 44 romantic-blush-pink-900 9 8 8 romantic-blush-pink-950 232 180 184 deep-rose-quartz 255 253 253 deep-rose-quartz-50 255 251 251 deep-rose-quartz-100 255 246 247 deep-rose-quartz-200 255 240 241 deep-rose-quartz-300 252 232 233 deep-rose-quartz-400 232 180 184 deep-rose-quartz-500 208 184 186 deep-rose-quartz-600 148 129 130 deep-rose-quartz-700 93 78 79 deep-rose-quartz-800 46 37 37 deep-rose-quartz-900 9 6 6 deep-rose-quartz-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.