← Back to Tools
Color Shaker
Spit out random colors matching locked saturation or lightness profiles, shuffling through distinct mid-tone accents like soft raspberry (#D1527A), vibrant pistachio (#87C365), and warm topaz amber (#D9A24F).
Export Palette
Copy or download the current harmony as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO. Tabs toggle the preview; switch color space to change the output format.
:root {
--triadic-1: #d1527a;
--triadic-1-50: #fff9fc;
--triadic-1-100: #fff2f8;
--triadic-1-200: #ffe5ef;
--triadic-1-300: #ffd4e4;
--triadic-1-400: #febdd4;
--triadic-1-500: #d1527a;
--triadic-1-600: #c87f9b;
--triadic-1-700: #92546d;
--triadic-1-800: #5d2f42;
--triadic-1-900: #2f121e;
--triadic-1-950: #0a0204;
--triadic-2: #87c365;
--triadic-2-50: #fbfff8;
--triadic-2-100: #f7fef2;
--triadic-2-200: #eefbe6;
--triadic-2-300: #e3f7d7;
--triadic-2-400: #d5f0c3;
--triadic-2-500: #87c365;
--triadic-2-600: #a0c08b;
--triadic-2-700: #6e885b;
--triadic-2-800: #405432;
--triadic-2-900: #1c2913;
--triadic-2-950: #040802;
--triadic-3: #d8a24f;
--triadic-3-50: #fffdf6;
--triadic-3-100: #fffaef;
--triadic-3-200: #fff5e1;
--triadic-3-300: #fdedce;
--triadic-3-400: #f9e3b6;
--triadic-3-500: #d8a24f;
--triadic-3-600: #caaf7a;
--triadic-3-700: #917b4d;
--triadic-3-800: #5b4a26;
--triadic-3-900: #2d230b;
--triadic-3-950: #090501;
}
$triadic-1: #d1527a; $triadic-1-50: #fff9fc; $triadic-1-100: #fff2f8; $triadic-1-200: #ffe5ef; $triadic-1-300: #ffd4e4; $triadic-1-400: #febdd4; $triadic-1-500: #d1527a; $triadic-1-600: #c87f9b; $triadic-1-700: #92546d; $triadic-1-800: #5d2f42; $triadic-1-900: #2f121e; $triadic-1-950: #0a0204; $triadic-2: #87c365; $triadic-2-50: #fbfff8; $triadic-2-100: #f7fef2; $triadic-2-200: #eefbe6; $triadic-2-300: #e3f7d7; $triadic-2-400: #d5f0c3; $triadic-2-500: #87c365; $triadic-2-600: #a0c08b; $triadic-2-700: #6e885b; $triadic-2-800: #405432; $triadic-2-900: #1c2913; $triadic-2-950: #040802; $triadic-3: #d8a24f; $triadic-3-50: #fffdf6; $triadic-3-100: #fffaef; $triadic-3-200: #fff5e1; $triadic-3-300: #fdedce; $triadic-3-400: #f9e3b6; $triadic-3-500: #d8a24f; $triadic-3-600: #caaf7a; $triadic-3-700: #917b4d; $triadic-3-800: #5b4a26; $triadic-3-900: #2d230b; $triadic-3-950: #090501;
colors: {
'triadic-1': {
50: '#fff9fc',
100: '#fff2f8',
200: '#ffe5ef',
300: '#ffd4e4',
400: '#febdd4',
500: '#d1527a',
600: '#c87f9b',
700: '#92546d',
800: '#5d2f42',
900: '#2f121e',
950: '#0a0204',
DEFAULT: '#d1527a',
},
'triadic-2': {
50: '#fbfff8',
100: '#f7fef2',
200: '#eefbe6',
300: '#e3f7d7',
400: '#d5f0c3',
500: '#87c365',
600: '#a0c08b',
700: '#6e885b',
800: '#405432',
900: '#1c2913',
950: '#040802',
DEFAULT: '#87c365',
},
'triadic-3': {
50: '#fffdf6',
100: '#fffaef',
200: '#fff5e1',
300: '#fdedce',
400: '#f9e3b6',
500: '#d8a24f',
600: '#caaf7a',
700: '#917b4d',
800: '#5b4a26',
900: '#2d230b',
950: '#090501',
DEFAULT: '#d8a24f',
},
},
[
{
"name": "triadic-1",
"harmony": "Triadic",
"hex": "#d1527a",
"rgb": {
"r": 209,
"g": 82,
"b": 122
},
"hsl": {
"h": 341,
"s": 58,
"l": 57
},
"value": "#d1527a",
"tonalScale": {
"50": {
"hex": "#fff9fc",
"rgb": {
"r": 255,
"g": 249,
"b": 252
}
},
"100": {
"hex": "#fff2f8",
"rgb": {
"r": 255,
"g": 242,
"b": 248
}
},
"200": {
"hex": "#ffe5ef",
"rgb": {
"r": 255,
"g": 229,
"b": 239
}
},
"300": {
"hex": "#ffd4e4",
"rgb": {
"r": 255,
"g": 212,
"b": 228
}
},
"400": {
"hex": "#febdd4",
"rgb": {
"r": 254,
"g": 189,
"b": 212
}
},
"500": {
"hex": "#d1527a",
"rgb": {
"r": 209,
"g": 82,
"b": 122
}
},
"600": {
"hex": "#c87f9b",
"rgb": {
"r": 200,
"g": 127,
"b": 155
}
},
"700": {
"hex": "#92546d",
"rgb": {
"r": 146,
"g": 84,
"b": 109
}
},
"800": {
"hex": "#5d2f42",
"rgb": {
"r": 93,
"g": 47,
"b": 66
}
},
"900": {
"hex": "#2f121e",
"rgb": {
"r": 47,
"g": 18,
"b": 30
}
},
"950": {
"hex": "#0a0204",
"rgb": {
"r": 10,
"g": 2,
"b": 4
}
}
}
},
{
"name": "triadic-2",
"harmony": "Triadic",
"hex": "#87c365",
"rgb": {
"r": 135,
"g": 195,
"b": 101
},
"hsl": {
"h": 98,
"s": 44,
"l": 58
},
"value": "#87c365",
"tonalScale": {
"50": {
"hex": "#fbfff8",
"rgb": {
"r": 251,
"g": 255,
"b": 248
}
},
"100": {
"hex": "#f7fef2",
"rgb": {
"r": 247,
"g": 254,
"b": 242
}
},
"200": {
"hex": "#eefbe6",
"rgb": {
"r": 238,
"g": 251,
"b": 230
}
},
"300": {
"hex": "#e3f7d7",
"rgb": {
"r": 227,
"g": 247,
"b": 215
}
},
"400": {
"hex": "#d5f0c3",
"rgb": {
"r": 213,
"g": 240,
"b": 195
}
},
"500": {
"hex": "#87c365",
"rgb": {
"r": 135,
"g": 195,
"b": 101
}
},
"600": {
"hex": "#a0c08b",
"rgb": {
"r": 160,
"g": 192,
"b": 139
}
},
"700": {
"hex": "#6e885b",
"rgb": {
"r": 110,
"g": 136,
"b": 91
}
},
"800": {
"hex": "#405432",
"rgb": {
"r": 64,
"g": 84,
"b": 50
}
},
"900": {
"hex": "#1c2913",
"rgb": {
"r": 28,
"g": 41,
"b": 19
}
},
"950": {
"hex": "#040802",
"rgb": {
"r": 4,
"g": 8,
"b": 2
}
}
}
},
{
"name": "triadic-3",
"harmony": "Triadic",
"hex": "#d8a24f",
"rgb": {
"r": 216,
"g": 162,
"b": 79
},
"hsl": {
"h": 36,
"s": 64,
"l": 58
},
"value": "#d8a24f",
"tonalScale": {
"50": {
"hex": "#fffdf6",
"rgb": {
"r": 255,
"g": 253,
"b": 246
}
},
"100": {
"hex": "#fffaef",
"rgb": {
"r": 255,
"g": 250,
"b": 239
}
},
"200": {
"hex": "#fff5e1",
"rgb": {
"r": 255,
"g": 245,
"b": 225
}
},
"300": {
"hex": "#fdedce",
"rgb": {
"r": 253,
"g": 237,
"b": 206
}
},
"400": {
"hex": "#f9e3b6",
"rgb": {
"r": 249,
"g": 227,
"b": 182
}
},
"500": {
"hex": "#d8a24f",
"rgb": {
"r": 216,
"g": 162,
"b": 79
}
},
"600": {
"hex": "#caaf7a",
"rgb": {
"r": 202,
"g": 175,
"b": 122
}
},
"700": {
"hex": "#917b4d",
"rgb": {
"r": 145,
"g": 123,
"b": 77
}
},
"800": {
"hex": "#5b4a26",
"rgb": {
"r": 91,
"g": 74,
"b": 38
}
},
"900": {
"hex": "#2d230b",
"rgb": {
"r": 45,
"g": 35,
"b": 11
}
},
"950": {
"hex": "#090501",
"rgb": {
"r": 9,
"g": 5,
"b": 1
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 triadic-1,Triadic,#d1527a,"rgb(209, 82, 122)","hsl(341, 58%, 57%)",#d1527a,#fff9fc,#fff2f8,#ffe5ef,#ffd4e4,#febdd4,#d1527a,#c87f9b,#92546d,#5d2f42,#2f121e,#0a0204 triadic-2,Triadic,#87c365,"rgb(135, 195, 101)","hsl(98, 44%, 58%)",#87c365,#fbfff8,#f7fef2,#eefbe6,#e3f7d7,#d5f0c3,#87c365,#a0c08b,#6e885b,#405432,#1c2913,#040802 triadic-3,Triadic,#d8a24f,"rgb(216, 162, 79)","hsl(36, 64%, 58%)",#d8a24f,#fffdf6,#fffaef,#fff5e1,#fdedce,#f9e3b6,#d8a24f,#caaf7a,#917b4d,#5b4a26,#2d230b,#090501
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 209 82 122 triadic-1 255 249 252 triadic-1-50 255 242 248 triadic-1-100 255 229 239 triadic-1-200 255 212 228 triadic-1-300 254 189 212 triadic-1-400 209 82 122 triadic-1-500 200 127 155 triadic-1-600 146 84 109 triadic-1-700 93 47 66 triadic-1-800 47 18 30 triadic-1-900 10 2 4 triadic-1-950 135 195 101 triadic-2 251 255 248 triadic-2-50 247 254 242 triadic-2-100 238 251 230 triadic-2-200 227 247 215 triadic-2-300 213 240 195 triadic-2-400 135 195 101 triadic-2-500 160 192 139 triadic-2-600 110 136 91 triadic-2-700 64 84 50 triadic-2-800 28 41 19 triadic-2-900 4 8 2 triadic-2-950 216 162 79 triadic-3 255 253 246 triadic-3-50 255 250 239 triadic-3-100 255 245 225 triadic-3-200 253 237 206 triadic-3-300 249 227 182 triadic-3-400 216 162 79 triadic-3-500 202 175 122 triadic-3-600 145 123 77 triadic-3-700 91 74 38 triadic-3-800 45 35 11 triadic-3-900 9 5 1 triadic-3-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.