← Back to Tools
Formulate relaxing lo-fi pastel aesthetics for gaming spaces, blending twilight purple (#4A3B52), soft ambient pink (#FFB7B2), and a dim neon cyan glow (#5EEAD4).
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--twilight-purple: #4A3B52;
--twilight-purple-50: #fbf9fc;
--twilight-purple-100: #f5f1f6;
--twilight-purple-200: #e8e2ea;
--twilight-purple-300: #d6ceda;
--twilight-purple-400: #beb2c4;
--twilight-purple-500: #4A3B52;
--twilight-purple-600: #7b6e82;
--twilight-purple-700: #564b5c;
--twilight-purple-800: #342b38;
--twilight-purple-900: #171119;
--twilight-purple-950: #030203;
--soft-ambient-pink: #FFB7B2;
--soft-ambient-pink-50: #fffdfd;
--soft-ambient-pink-100: #fffbfa;
--soft-ambient-pink-200: #fff6f5;
--soft-ambient-pink-300: #fff0ef;
--soft-ambient-pink-400: #ffe8e6;
--soft-ambient-pink-500: #FFB7B2;
--soft-ambient-pink-600: #d9b9b7;
--soft-ambient-pink-700: #9c817f;
--soft-ambient-pink-800: #624e4c;
--soft-ambient-pink-900: #312524;
--soft-ambient-pink-950: #0b0606;
--dim-neon-cyan-glow: #5EEAD4;
--dim-neon-cyan-glow-50: #f7ffff;
--dim-neon-cyan-glow-100: #f1fffe;
--dim-neon-cyan-glow-200: #e5fffc;
--dim-neon-cyan-glow-300: #d4fff9;
--dim-neon-cyan-glow-400: #bffdf4;
--dim-neon-cyan-glow-500: #5EEAD4;
--dim-neon-cyan-glow-600: #84d0c7;
--dim-neon-cyan-glow-700: #53958d;
--dim-neon-cyan-glow-800: #285d57;
--dim-neon-cyan-glow-900: #0a2e2a;
--dim-neon-cyan-glow-950: #010908;
}
$twilight-purple: #4A3B52; $twilight-purple-50: #fbf9fc; $twilight-purple-100: #f5f1f6; $twilight-purple-200: #e8e2ea; $twilight-purple-300: #d6ceda; $twilight-purple-400: #beb2c4; $twilight-purple-500: #4A3B52; $twilight-purple-600: #7b6e82; $twilight-purple-700: #564b5c; $twilight-purple-800: #342b38; $twilight-purple-900: #171119; $twilight-purple-950: #030203; $soft-ambient-pink: #FFB7B2; $soft-ambient-pink-50: #fffdfd; $soft-ambient-pink-100: #fffbfa; $soft-ambient-pink-200: #fff6f5; $soft-ambient-pink-300: #fff0ef; $soft-ambient-pink-400: #ffe8e6; $soft-ambient-pink-500: #FFB7B2; $soft-ambient-pink-600: #d9b9b7; $soft-ambient-pink-700: #9c817f; $soft-ambient-pink-800: #624e4c; $soft-ambient-pink-900: #312524; $soft-ambient-pink-950: #0b0606; $dim-neon-cyan-glow: #5EEAD4; $dim-neon-cyan-glow-50: #f7ffff; $dim-neon-cyan-glow-100: #f1fffe; $dim-neon-cyan-glow-200: #e5fffc; $dim-neon-cyan-glow-300: #d4fff9; $dim-neon-cyan-glow-400: #bffdf4; $dim-neon-cyan-glow-500: #5EEAD4; $dim-neon-cyan-glow-600: #84d0c7; $dim-neon-cyan-glow-700: #53958d; $dim-neon-cyan-glow-800: #285d57; $dim-neon-cyan-glow-900: #0a2e2a; $dim-neon-cyan-glow-950: #010908;
colors: {
'twilight-purple': {
50: '#fbf9fc',
100: '#f5f1f6',
200: '#e8e2ea',
300: '#d6ceda',
400: '#beb2c4',
500: '#4A3B52',
600: '#7b6e82',
700: '#564b5c',
800: '#342b38',
900: '#171119',
950: '#030203',
DEFAULT: '#4A3B52',
},
'soft-ambient-pink': {
50: '#fffdfd',
100: '#fffbfa',
200: '#fff6f5',
300: '#fff0ef',
400: '#ffe8e6',
500: '#FFB7B2',
600: '#d9b9b7',
700: '#9c817f',
800: '#624e4c',
900: '#312524',
950: '#0b0606',
DEFAULT: '#FFB7B2',
},
'dim-neon-cyan-glow': {
50: '#f7ffff',
100: '#f1fffe',
200: '#e5fffc',
300: '#d4fff9',
400: '#bffdf4',
500: '#5EEAD4',
600: '#84d0c7',
700: '#53958d',
800: '#285d57',
900: '#0a2e2a',
950: '#010908',
DEFAULT: '#5EEAD4',
},
},
[
{
"name": "twilight-purple",
"harmony": "Palette",
"hex": "#4A3B52",
"rgb": {
"r": 74,
"g": 59,
"b": 82
},
"hsl": {
"h": 279,
"s": 16,
"l": 28
},
"value": "#4A3B52",
"tonalScale": {
"50": {
"hex": "#fbf9fc",
"rgb": {
"r": 251,
"g": 249,
"b": 252
}
},
"100": {
"hex": "#f5f1f6",
"rgb": {
"r": 245,
"g": 241,
"b": 246
}
},
"200": {
"hex": "#e8e2ea",
"rgb": {
"r": 232,
"g": 226,
"b": 234
}
},
"300": {
"hex": "#d6ceda",
"rgb": {
"r": 214,
"g": 206,
"b": 218
}
},
"400": {
"hex": "#beb2c4",
"rgb": {
"r": 190,
"g": 178,
"b": 196
}
},
"500": {
"hex": "#4A3B52",
"rgb": {
"r": 74,
"g": 59,
"b": 82
}
},
"600": {
"hex": "#7b6e82",
"rgb": {
"r": 123,
"g": 110,
"b": 130
}
},
"700": {
"hex": "#564b5c",
"rgb": {
"r": 86,
"g": 75,
"b": 92
}
},
"800": {
"hex": "#342b38",
"rgb": {
"r": 52,
"g": 43,
"b": 56
}
},
"900": {
"hex": "#171119",
"rgb": {
"r": 23,
"g": 17,
"b": 25
}
},
"950": {
"hex": "#030203",
"rgb": {
"r": 3,
"g": 2,
"b": 3
}
}
}
},
{
"name": "soft-ambient-pink",
"harmony": "Palette",
"hex": "#FFB7B2",
"rgb": {
"r": 255,
"g": 183,
"b": 178
},
"hsl": {
"h": 4,
"s": 100,
"l": 85
},
"value": "#FFB7B2",
"tonalScale": {
"50": {
"hex": "#fffdfd",
"rgb": {
"r": 255,
"g": 253,
"b": 253
}
},
"100": {
"hex": "#fffbfa",
"rgb": {
"r": 255,
"g": 251,
"b": 250
}
},
"200": {
"hex": "#fff6f5",
"rgb": {
"r": 255,
"g": 246,
"b": 245
}
},
"300": {
"hex": "#fff0ef",
"rgb": {
"r": 255,
"g": 240,
"b": 239
}
},
"400": {
"hex": "#ffe8e6",
"rgb": {
"r": 255,
"g": 232,
"b": 230
}
},
"500": {
"hex": "#FFB7B2",
"rgb": {
"r": 255,
"g": 183,
"b": 178
}
},
"600": {
"hex": "#d9b9b7",
"rgb": {
"r": 217,
"g": 185,
"b": 183
}
},
"700": {
"hex": "#9c817f",
"rgb": {
"r": 156,
"g": 129,
"b": 127
}
},
"800": {
"hex": "#624e4c",
"rgb": {
"r": 98,
"g": 78,
"b": 76
}
},
"900": {
"hex": "#312524",
"rgb": {
"r": 49,
"g": 37,
"b": 36
}
},
"950": {
"hex": "#0b0606",
"rgb": {
"r": 11,
"g": 6,
"b": 6
}
}
}
},
{
"name": "dim-neon-cyan-glow",
"harmony": "Palette",
"hex": "#5EEAD4",
"rgb": {
"r": 94,
"g": 234,
"b": 212
},
"hsl": {
"h": 171,
"s": 77,
"l": 64
},
"value": "#5EEAD4",
"tonalScale": {
"50": {
"hex": "#f7ffff",
"rgb": {
"r": 247,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#f1fffe",
"rgb": {
"r": 241,
"g": 255,
"b": 254
}
},
"200": {
"hex": "#e5fffc",
"rgb": {
"r": 229,
"g": 255,
"b": 252
}
},
"300": {
"hex": "#d4fff9",
"rgb": {
"r": 212,
"g": 255,
"b": 249
}
},
"400": {
"hex": "#bffdf4",
"rgb": {
"r": 191,
"g": 253,
"b": 244
}
},
"500": {
"hex": "#5EEAD4",
"rgb": {
"r": 94,
"g": 234,
"b": 212
}
},
"600": {
"hex": "#84d0c7",
"rgb": {
"r": 132,
"g": 208,
"b": 199
}
},
"700": {
"hex": "#53958d",
"rgb": {
"r": 83,
"g": 149,
"b": 141
}
},
"800": {
"hex": "#285d57",
"rgb": {
"r": 40,
"g": 93,
"b": 87
}
},
"900": {
"hex": "#0a2e2a",
"rgb": {
"r": 10,
"g": 46,
"b": 42
}
},
"950": {
"hex": "#010908",
"rgb": {
"r": 1,
"g": 9,
"b": 8
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 twilight-purple,Palette,#4A3B52,"rgb(74, 59, 82)","hsl(279, 16%, 28%)",#4A3B52,#fbf9fc,#f5f1f6,#e8e2ea,#d6ceda,#beb2c4,#4A3B52,#7b6e82,#564b5c,#342b38,#171119,#030203 soft-ambient-pink,Palette,#FFB7B2,"rgb(255, 183, 178)","hsl(4, 100%, 85%)",#FFB7B2,#fffdfd,#fffbfa,#fff6f5,#fff0ef,#ffe8e6,#FFB7B2,#d9b9b7,#9c817f,#624e4c,#312524,#0b0606 dim-neon-cyan-glow,Palette,#5EEAD4,"rgb(94, 234, 212)","hsl(171, 77%, 64%)",#5EEAD4,#f7ffff,#f1fffe,#e5fffc,#d4fff9,#bffdf4,#5EEAD4,#84d0c7,#53958d,#285d57,#0a2e2a,#010908
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 74 59 82 twilight-purple 251 249 252 twilight-purple-50 245 241 246 twilight-purple-100 232 226 234 twilight-purple-200 214 206 218 twilight-purple-300 190 178 196 twilight-purple-400 74 59 82 twilight-purple-500 123 110 130 twilight-purple-600 86 75 92 twilight-purple-700 52 43 56 twilight-purple-800 23 17 25 twilight-purple-900 3 2 3 twilight-purple-950 255 183 178 soft-ambient-pink 255 253 253 soft-ambient-pink-50 255 251 250 soft-ambient-pink-100 255 246 245 soft-ambient-pink-200 255 240 239 soft-ambient-pink-300 255 232 230 soft-ambient-pink-400 255 183 178 soft-ambient-pink-500 217 185 183 soft-ambient-pink-600 156 129 127 soft-ambient-pink-700 98 78 76 soft-ambient-pink-800 49 37 36 soft-ambient-pink-900 11 6 6 soft-ambient-pink-950 94 234 212 dim-neon-cyan-glow 247 255 255 dim-neon-cyan-glow-50 241 255 254 dim-neon-cyan-glow-100 229 255 252 dim-neon-cyan-glow-200 212 255 249 dim-neon-cyan-glow-300 191 253 244 dim-neon-cyan-glow-400 94 234 212 dim-neon-cyan-glow-500 132 208 199 dim-neon-cyan-glow-600 83 149 141 dim-neon-cyan-glow-700 40 93 87 dim-neon-cyan-glow-800 10 46 42 dim-neon-cyan-glow-900 1 9 8 dim-neon-cyan-glow-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.