← Back to Tools
Random Palette
Generate random harmonious color palettes with one click.
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 {
--complementary-1: #ff0000;
--complementary-1-50: #fff3ee;
--complementary-1-100: #ffe7df;
--complementary-1-200: #ffcec1;
--complementary-1-300: #ffab9a;
--complementary-1-400: #ff7a66;
--complementary-1-500: #ff0000;
--complementary-1-600: #de0000;
--complementary-1-700: #a70000;
--complementary-1-800: #6f0000;
--complementary-1-900: #3b0000;
--complementary-1-950: #0f0000;
--complementary-2: #00ffff;
--complementary-2-50: #f0ffff;
--complementary-2-100: #e5ffff;
--complementary-2-200: #cfffff;
--complementary-2-300: #adffff;
--complementary-2-400: #7cffff;
--complementary-2-500: #00ffff;
--complementary-2-600: #00d9d9;
--complementary-2-700: #009c9d;
--complementary-2-800: #006263;
--complementary-2-900: #003132;
--complementary-2-950: #000b0b;
}
$complementary-1: #ff0000; $complementary-1-50: #fff3ee; $complementary-1-100: #ffe7df; $complementary-1-200: #ffcec1; $complementary-1-300: #ffab9a; $complementary-1-400: #ff7a66; $complementary-1-500: #ff0000; $complementary-1-600: #de0000; $complementary-1-700: #a70000; $complementary-1-800: #6f0000; $complementary-1-900: #3b0000; $complementary-1-950: #0f0000; $complementary-2: #00ffff; $complementary-2-50: #f0ffff; $complementary-2-100: #e5ffff; $complementary-2-200: #cfffff; $complementary-2-300: #adffff; $complementary-2-400: #7cffff; $complementary-2-500: #00ffff; $complementary-2-600: #00d9d9; $complementary-2-700: #009c9d; $complementary-2-800: #006263; $complementary-2-900: #003132; $complementary-2-950: #000b0b;
colors: {
'complementary-1': {
50: '#fff3ee',
100: '#ffe7df',
200: '#ffcec1',
300: '#ffab9a',
400: '#ff7a66',
500: '#ff0000',
600: '#de0000',
700: '#a70000',
800: '#6f0000',
900: '#3b0000',
950: '#0f0000',
DEFAULT: '#ff0000',
},
'complementary-2': {
50: '#f0ffff',
100: '#e5ffff',
200: '#cfffff',
300: '#adffff',
400: '#7cffff',
500: '#00ffff',
600: '#00d9d9',
700: '#009c9d',
800: '#006263',
900: '#003132',
950: '#000b0b',
DEFAULT: '#00ffff',
},
},
[
{
"name": "complementary-1",
"harmony": "Complementary",
"hex": "#ff0000",
"rgb": {
"r": 255,
"g": 0,
"b": 0
},
"hsl": {
"h": 0,
"s": 100,
"l": 50
},
"value": "#ff0000",
"tonalScale": {
"50": {
"hex": "#fff3ee",
"rgb": {
"r": 255,
"g": 243,
"b": 238
}
},
"100": {
"hex": "#ffe7df",
"rgb": {
"r": 255,
"g": 231,
"b": 223
}
},
"200": {
"hex": "#ffcec1",
"rgb": {
"r": 255,
"g": 206,
"b": 193
}
},
"300": {
"hex": "#ffab9a",
"rgb": {
"r": 255,
"g": 171,
"b": 154
}
},
"400": {
"hex": "#ff7a66",
"rgb": {
"r": 255,
"g": 122,
"b": 102
}
},
"500": {
"hex": "#ff0000",
"rgb": {
"r": 255,
"g": 0,
"b": 0
}
},
"600": {
"hex": "#de0000",
"rgb": {
"r": 222,
"g": 0,
"b": 0
}
},
"700": {
"hex": "#a70000",
"rgb": {
"r": 167,
"g": 0,
"b": 0
}
},
"800": {
"hex": "#6f0000",
"rgb": {
"r": 111,
"g": 0,
"b": 0
}
},
"900": {
"hex": "#3b0000",
"rgb": {
"r": 59,
"g": 0,
"b": 0
}
},
"950": {
"hex": "#0f0000",
"rgb": {
"r": 15,
"g": 0,
"b": 0
}
}
}
},
{
"name": "complementary-2",
"harmony": "Complementary",
"hex": "#00ffff",
"rgb": {
"r": 0,
"g": 255,
"b": 255
},
"hsl": {
"h": 180,
"s": 100,
"l": 50
},
"value": "#00ffff",
"tonalScale": {
"50": {
"hex": "#f0ffff",
"rgb": {
"r": 240,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#e5ffff",
"rgb": {
"r": 229,
"g": 255,
"b": 255
}
},
"200": {
"hex": "#cfffff",
"rgb": {
"r": 207,
"g": 255,
"b": 255
}
},
"300": {
"hex": "#adffff",
"rgb": {
"r": 173,
"g": 255,
"b": 255
}
},
"400": {
"hex": "#7cffff",
"rgb": {
"r": 124,
"g": 255,
"b": 255
}
},
"500": {
"hex": "#00ffff",
"rgb": {
"r": 0,
"g": 255,
"b": 255
}
},
"600": {
"hex": "#00d9d9",
"rgb": {
"r": 0,
"g": 217,
"b": 217
}
},
"700": {
"hex": "#009c9d",
"rgb": {
"r": 0,
"g": 156,
"b": 157
}
},
"800": {
"hex": "#006263",
"rgb": {
"r": 0,
"g": 98,
"b": 99
}
},
"900": {
"hex": "#003132",
"rgb": {
"r": 0,
"g": 49,
"b": 50
}
},
"950": {
"hex": "#000b0b",
"rgb": {
"r": 0,
"g": 11,
"b": 11
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 complementary-1,Complementary,#ff0000,"rgb(255, 0, 0)","hsl(0, 100%, 50%)",#ff0000,#fff3ee,#ffe7df,#ffcec1,#ffab9a,#ff7a66,#ff0000,#de0000,#a70000,#6f0000,#3b0000,#0f0000 complementary-2,Complementary,#00ffff,"rgb(0, 255, 255)","hsl(180, 100%, 50%)",#00ffff,#f0ffff,#e5ffff,#cfffff,#adffff,#7cffff,#00ffff,#00d9d9,#009c9d,#006263,#003132,#000b0b
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 255 0 0 complementary-1 255 243 238 complementary-1-50 255 231 223 complementary-1-100 255 206 193 complementary-1-200 255 171 154 complementary-1-300 255 122 102 complementary-1-400 255 0 0 complementary-1-500 222 0 0 complementary-1-600 167 0 0 complementary-1-700 111 0 0 complementary-1-800 59 0 0 complementary-1-900 15 0 0 complementary-1-950 0 255 255 complementary-2 240 255 255 complementary-2-50 229 255 255 complementary-2-100 207 255 255 complementary-2-200 173 255 255 complementary-2-300 124 255 255 complementary-2-400 0 255 255 complementary-2-500 0 217 217 complementary-2-600 0 156 157 complementary-2-700 0 98 99 complementary-2-800 0 49 50 complementary-2-900 0 11 11 complementary-2-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.