← Back to Tools
Square Palette Generator
Generate crisp balanced palettes with fixed 90° intervals for multi-colored assets.
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 {
--square-1: #ff0000;
--square-1-50: #fff3ee;
--square-1-100: #ffe7df;
--square-1-200: #ffcec1;
--square-1-300: #ffab9a;
--square-1-400: #ff7a66;
--square-1-500: #ff0000;
--square-1-600: #de0000;
--square-1-700: #a70000;
--square-1-800: #6f0000;
--square-1-900: #3b0000;
--square-1-950: #0f0000;
--square-2: #80ff00;
--square-2-50: #f9ffee;
--square-2-100: #f4ffe1;
--square-2-200: #ebffc8;
--square-2-300: #deffa4;
--square-2-400: #cfff72;
--square-2-500: #80ff00;
--square-2-600: #9bd900;
--square-2-700: #689b00;
--square-2-800: #3b6100;
--square-2-900: #183000;
--square-2-950: #030a00;
--square-3: #00ffff;
--square-3-50: #f0ffff;
--square-3-100: #e5ffff;
--square-3-200: #cfffff;
--square-3-300: #adffff;
--square-3-400: #7cffff;
--square-3-500: #00ffff;
--square-3-600: #00d9d9;
--square-3-700: #009c9d;
--square-3-800: #006263;
--square-3-900: #003132;
--square-3-950: #000b0b;
--square-4: #7f00ff;
--square-4-50: #fff3ff;
--square-4-100: #ffe7ff;
--square-4-200: #faceff;
--square-4-300: #f2acff;
--square-4-400: #e37bff;
--square-4-500: #7f00ff;
--square-4-600: #a100df;
--square-4-700: #7700ab;
--square-4-800: #4c0074;
--square-4-900: #270040;
--square-4-950: #070011;
}
$square-1: #ff0000; $square-1-50: #fff3ee; $square-1-100: #ffe7df; $square-1-200: #ffcec1; $square-1-300: #ffab9a; $square-1-400: #ff7a66; $square-1-500: #ff0000; $square-1-600: #de0000; $square-1-700: #a70000; $square-1-800: #6f0000; $square-1-900: #3b0000; $square-1-950: #0f0000; $square-2: #80ff00; $square-2-50: #f9ffee; $square-2-100: #f4ffe1; $square-2-200: #ebffc8; $square-2-300: #deffa4; $square-2-400: #cfff72; $square-2-500: #80ff00; $square-2-600: #9bd900; $square-2-700: #689b00; $square-2-800: #3b6100; $square-2-900: #183000; $square-2-950: #030a00; $square-3: #00ffff; $square-3-50: #f0ffff; $square-3-100: #e5ffff; $square-3-200: #cfffff; $square-3-300: #adffff; $square-3-400: #7cffff; $square-3-500: #00ffff; $square-3-600: #00d9d9; $square-3-700: #009c9d; $square-3-800: #006263; $square-3-900: #003132; $square-3-950: #000b0b; $square-4: #7f00ff; $square-4-50: #fff3ff; $square-4-100: #ffe7ff; $square-4-200: #faceff; $square-4-300: #f2acff; $square-4-400: #e37bff; $square-4-500: #7f00ff; $square-4-600: #a100df; $square-4-700: #7700ab; $square-4-800: #4c0074; $square-4-900: #270040; $square-4-950: #070011;
colors: {
'square-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',
},
'square-2': {
50: '#f9ffee',
100: '#f4ffe1',
200: '#ebffc8',
300: '#deffa4',
400: '#cfff72',
500: '#80ff00',
600: '#9bd900',
700: '#689b00',
800: '#3b6100',
900: '#183000',
950: '#030a00',
DEFAULT: '#80ff00',
},
'square-3': {
50: '#f0ffff',
100: '#e5ffff',
200: '#cfffff',
300: '#adffff',
400: '#7cffff',
500: '#00ffff',
600: '#00d9d9',
700: '#009c9d',
800: '#006263',
900: '#003132',
950: '#000b0b',
DEFAULT: '#00ffff',
},
'square-4': {
50: '#fff3ff',
100: '#ffe7ff',
200: '#faceff',
300: '#f2acff',
400: '#e37bff',
500: '#7f00ff',
600: '#a100df',
700: '#7700ab',
800: '#4c0074',
900: '#270040',
950: '#070011',
DEFAULT: '#7f00ff',
},
},
[
{
"name": "square-1",
"harmony": "Square",
"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": "square-2",
"harmony": "Square",
"hex": "#80ff00",
"rgb": {
"r": 128,
"g": 255,
"b": 0
},
"hsl": {
"h": 90,
"s": 100,
"l": 50
},
"value": "#80ff00",
"tonalScale": {
"50": {
"hex": "#f9ffee",
"rgb": {
"r": 249,
"g": 255,
"b": 238
}
},
"100": {
"hex": "#f4ffe1",
"rgb": {
"r": 244,
"g": 255,
"b": 225
}
},
"200": {
"hex": "#ebffc8",
"rgb": {
"r": 235,
"g": 255,
"b": 200
}
},
"300": {
"hex": "#deffa4",
"rgb": {
"r": 222,
"g": 255,
"b": 164
}
},
"400": {
"hex": "#cfff72",
"rgb": {
"r": 207,
"g": 255,
"b": 114
}
},
"500": {
"hex": "#80ff00",
"rgb": {
"r": 128,
"g": 255,
"b": 0
}
},
"600": {
"hex": "#9bd900",
"rgb": {
"r": 155,
"g": 217,
"b": 0
}
},
"700": {
"hex": "#689b00",
"rgb": {
"r": 104,
"g": 155,
"b": 0
}
},
"800": {
"hex": "#3b6100",
"rgb": {
"r": 59,
"g": 97,
"b": 0
}
},
"900": {
"hex": "#183000",
"rgb": {
"r": 24,
"g": 48,
"b": 0
}
},
"950": {
"hex": "#030a00",
"rgb": {
"r": 3,
"g": 10,
"b": 0
}
}
}
},
{
"name": "square-3",
"harmony": "Square",
"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": "square-4",
"harmony": "Square",
"hex": "#7f00ff",
"rgb": {
"r": 127,
"g": 0,
"b": 255
},
"hsl": {
"h": 270,
"s": 100,
"l": 50
},
"value": "#7f00ff",
"tonalScale": {
"50": {
"hex": "#fff3ff",
"rgb": {
"r": 255,
"g": 243,
"b": 255
}
},
"100": {
"hex": "#ffe7ff",
"rgb": {
"r": 255,
"g": 231,
"b": 255
}
},
"200": {
"hex": "#faceff",
"rgb": {
"r": 250,
"g": 206,
"b": 255
}
},
"300": {
"hex": "#f2acff",
"rgb": {
"r": 242,
"g": 172,
"b": 255
}
},
"400": {
"hex": "#e37bff",
"rgb": {
"r": 227,
"g": 123,
"b": 255
}
},
"500": {
"hex": "#7f00ff",
"rgb": {
"r": 127,
"g": 0,
"b": 255
}
},
"600": {
"hex": "#a100df",
"rgb": {
"r": 161,
"g": 0,
"b": 223
}
},
"700": {
"hex": "#7700ab",
"rgb": {
"r": 119,
"g": 0,
"b": 171
}
},
"800": {
"hex": "#4c0074",
"rgb": {
"r": 76,
"g": 0,
"b": 116
}
},
"900": {
"hex": "#270040",
"rgb": {
"r": 39,
"g": 0,
"b": 64
}
},
"950": {
"hex": "#070011",
"rgb": {
"r": 7,
"g": 0,
"b": 17
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 square-1,Square,#ff0000,"rgb(255, 0, 0)","hsl(0, 100%, 50%)",#ff0000,#fff3ee,#ffe7df,#ffcec1,#ffab9a,#ff7a66,#ff0000,#de0000,#a70000,#6f0000,#3b0000,#0f0000 square-2,Square,#80ff00,"rgb(128, 255, 0)","hsl(90, 100%, 50%)",#80ff00,#f9ffee,#f4ffe1,#ebffc8,#deffa4,#cfff72,#80ff00,#9bd900,#689b00,#3b6100,#183000,#030a00 square-3,Square,#00ffff,"rgb(0, 255, 255)","hsl(180, 100%, 50%)",#00ffff,#f0ffff,#e5ffff,#cfffff,#adffff,#7cffff,#00ffff,#00d9d9,#009c9d,#006263,#003132,#000b0b square-4,Square,#7f00ff,"rgb(127, 0, 255)","hsl(270, 100%, 50%)",#7f00ff,#fff3ff,#ffe7ff,#faceff,#f2acff,#e37bff,#7f00ff,#a100df,#7700ab,#4c0074,#270040,#070011
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 255 0 0 square-1 255 243 238 square-1-50 255 231 223 square-1-100 255 206 193 square-1-200 255 171 154 square-1-300 255 122 102 square-1-400 255 0 0 square-1-500 222 0 0 square-1-600 167 0 0 square-1-700 111 0 0 square-1-800 59 0 0 square-1-900 15 0 0 square-1-950 128 255 0 square-2 249 255 238 square-2-50 244 255 225 square-2-100 235 255 200 square-2-200 222 255 164 square-2-300 207 255 114 square-2-400 128 255 0 square-2-500 155 217 0 square-2-600 104 155 0 square-2-700 59 97 0 square-2-800 24 48 0 square-2-900 3 10 0 square-2-950 0 255 255 square-3 240 255 255 square-3-50 229 255 255 square-3-100 207 255 255 square-3-200 173 255 255 square-3-300 124 255 255 square-3-400 0 255 255 square-3-500 0 217 217 square-3-600 0 156 157 square-3-700 0 98 99 square-3-800 0 49 50 square-3-900 0 11 11 square-3-950 127 0 255 square-4 255 243 255 square-4-50 255 231 255 square-4-100 250 206 255 square-4-200 242 172 255 square-4-300 227 123 255 square-4-400 127 0 255 square-4-500 161 0 223 square-4-600 119 0 171 square-4-700 76 0 116 square-4-800 39 0 64 square-4-900 7 0 17 square-4-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.