← Back to Tools
Triadic Palette Architect
Build vibrant triadic color schemes with three evenly spaced colors at 120° intervals.
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: #ff0000;
--triadic-1-50: #fff3ee;
--triadic-1-100: #ffe7df;
--triadic-1-200: #ffcec1;
--triadic-1-300: #ffab9a;
--triadic-1-400: #ff7a66;
--triadic-1-500: #ff0000;
--triadic-1-600: #de0000;
--triadic-1-700: #a70000;
--triadic-1-800: #6f0000;
--triadic-1-900: #3b0000;
--triadic-1-950: #0f0000;
--triadic-2: #00ff00;
--triadic-2-50: #f0ffee;
--triadic-2-100: #e5ffe1;
--triadic-2-200: #cdffc8;
--triadic-2-300: #abffa4;
--triadic-2-400: #7aff72;
--triadic-2-500: #00ff00;
--triadic-2-600: #00da00;
--triadic-2-700: #009d00;
--triadic-2-800: #006300;
--triadic-2-900: #003200;
--triadic-2-950: #000b00;
--triadic-3: #0000ff;
--triadic-3-50: #ebf8ff;
--triadic-3-100: #d8edff;
--triadic-3-200: #b3d7ff;
--triadic-3-300: #82b7ff;
--triadic-3-400: #4487ff;
--triadic-3-500: #0000ff;
--triadic-3-600: #0500e3;
--triadic-3-700: #0d00b3;
--triadic-3-800: #0d007d;
--triadic-3-900: #060047;
--triadic-3-950: #010015;
}
$triadic-1: #ff0000; $triadic-1-50: #fff3ee; $triadic-1-100: #ffe7df; $triadic-1-200: #ffcec1; $triadic-1-300: #ffab9a; $triadic-1-400: #ff7a66; $triadic-1-500: #ff0000; $triadic-1-600: #de0000; $triadic-1-700: #a70000; $triadic-1-800: #6f0000; $triadic-1-900: #3b0000; $triadic-1-950: #0f0000; $triadic-2: #00ff00; $triadic-2-50: #f0ffee; $triadic-2-100: #e5ffe1; $triadic-2-200: #cdffc8; $triadic-2-300: #abffa4; $triadic-2-400: #7aff72; $triadic-2-500: #00ff00; $triadic-2-600: #00da00; $triadic-2-700: #009d00; $triadic-2-800: #006300; $triadic-2-900: #003200; $triadic-2-950: #000b00; $triadic-3: #0000ff; $triadic-3-50: #ebf8ff; $triadic-3-100: #d8edff; $triadic-3-200: #b3d7ff; $triadic-3-300: #82b7ff; $triadic-3-400: #4487ff; $triadic-3-500: #0000ff; $triadic-3-600: #0500e3; $triadic-3-700: #0d00b3; $triadic-3-800: #0d007d; $triadic-3-900: #060047; $triadic-3-950: #010015;
colors: {
'triadic-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',
},
'triadic-2': {
50: '#f0ffee',
100: '#e5ffe1',
200: '#cdffc8',
300: '#abffa4',
400: '#7aff72',
500: '#00ff00',
600: '#00da00',
700: '#009d00',
800: '#006300',
900: '#003200',
950: '#000b00',
DEFAULT: '#00ff00',
},
'triadic-3': {
50: '#ebf8ff',
100: '#d8edff',
200: '#b3d7ff',
300: '#82b7ff',
400: '#4487ff',
500: '#0000ff',
600: '#0500e3',
700: '#0d00b3',
800: '#0d007d',
900: '#060047',
950: '#010015',
DEFAULT: '#0000ff',
},
},
[
{
"name": "triadic-1",
"harmony": "Triadic",
"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": "triadic-2",
"harmony": "Triadic",
"hex": "#00ff00",
"rgb": {
"r": 0,
"g": 255,
"b": 0
},
"hsl": {
"h": 120,
"s": 100,
"l": 50
},
"value": "#00ff00",
"tonalScale": {
"50": {
"hex": "#f0ffee",
"rgb": {
"r": 240,
"g": 255,
"b": 238
}
},
"100": {
"hex": "#e5ffe1",
"rgb": {
"r": 229,
"g": 255,
"b": 225
}
},
"200": {
"hex": "#cdffc8",
"rgb": {
"r": 205,
"g": 255,
"b": 200
}
},
"300": {
"hex": "#abffa4",
"rgb": {
"r": 171,
"g": 255,
"b": 164
}
},
"400": {
"hex": "#7aff72",
"rgb": {
"r": 122,
"g": 255,
"b": 114
}
},
"500": {
"hex": "#00ff00",
"rgb": {
"r": 0,
"g": 255,
"b": 0
}
},
"600": {
"hex": "#00da00",
"rgb": {
"r": 0,
"g": 218,
"b": 0
}
},
"700": {
"hex": "#009d00",
"rgb": {
"r": 0,
"g": 157,
"b": 0
}
},
"800": {
"hex": "#006300",
"rgb": {
"r": 0,
"g": 99,
"b": 0
}
},
"900": {
"hex": "#003200",
"rgb": {
"r": 0,
"g": 50,
"b": 0
}
},
"950": {
"hex": "#000b00",
"rgb": {
"r": 0,
"g": 11,
"b": 0
}
}
}
},
{
"name": "triadic-3",
"harmony": "Triadic",
"hex": "#0000ff",
"rgb": {
"r": 0,
"g": 0,
"b": 255
},
"hsl": {
"h": 240,
"s": 100,
"l": 50
},
"value": "#0000ff",
"tonalScale": {
"50": {
"hex": "#ebf8ff",
"rgb": {
"r": 235,
"g": 248,
"b": 255
}
},
"100": {
"hex": "#d8edff",
"rgb": {
"r": 216,
"g": 237,
"b": 255
}
},
"200": {
"hex": "#b3d7ff",
"rgb": {
"r": 179,
"g": 215,
"b": 255
}
},
"300": {
"hex": "#82b7ff",
"rgb": {
"r": 130,
"g": 183,
"b": 255
}
},
"400": {
"hex": "#4487ff",
"rgb": {
"r": 68,
"g": 135,
"b": 255
}
},
"500": {
"hex": "#0000ff",
"rgb": {
"r": 0,
"g": 0,
"b": 255
}
},
"600": {
"hex": "#0500e3",
"rgb": {
"r": 5,
"g": 0,
"b": 227
}
},
"700": {
"hex": "#0d00b3",
"rgb": {
"r": 13,
"g": 0,
"b": 179
}
},
"800": {
"hex": "#0d007d",
"rgb": {
"r": 13,
"g": 0,
"b": 125
}
},
"900": {
"hex": "#060047",
"rgb": {
"r": 6,
"g": 0,
"b": 71
}
},
"950": {
"hex": "#010015",
"rgb": {
"r": 1,
"g": 0,
"b": 21
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 triadic-1,Triadic,#ff0000,"rgb(255, 0, 0)","hsl(0, 100%, 50%)",#ff0000,#fff3ee,#ffe7df,#ffcec1,#ffab9a,#ff7a66,#ff0000,#de0000,#a70000,#6f0000,#3b0000,#0f0000 triadic-2,Triadic,#00ff00,"rgb(0, 255, 0)","hsl(120, 100%, 50%)",#00ff00,#f0ffee,#e5ffe1,#cdffc8,#abffa4,#7aff72,#00ff00,#00da00,#009d00,#006300,#003200,#000b00 triadic-3,Triadic,#0000ff,"rgb(0, 0, 255)","hsl(240, 100%, 50%)",#0000ff,#ebf8ff,#d8edff,#b3d7ff,#82b7ff,#4487ff,#0000ff,#0500e3,#0d00b3,#0d007d,#060047,#010015
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 255 0 0 triadic-1 255 243 238 triadic-1-50 255 231 223 triadic-1-100 255 206 193 triadic-1-200 255 171 154 triadic-1-300 255 122 102 triadic-1-400 255 0 0 triadic-1-500 222 0 0 triadic-1-600 167 0 0 triadic-1-700 111 0 0 triadic-1-800 59 0 0 triadic-1-900 15 0 0 triadic-1-950 0 255 0 triadic-2 240 255 238 triadic-2-50 229 255 225 triadic-2-100 205 255 200 triadic-2-200 171 255 164 triadic-2-300 122 255 114 triadic-2-400 0 255 0 triadic-2-500 0 218 0 triadic-2-600 0 157 0 triadic-2-700 0 99 0 triadic-2-800 0 50 0 triadic-2-900 0 11 0 triadic-2-950 0 0 255 triadic-3 235 248 255 triadic-3-50 216 237 255 triadic-3-100 179 215 255 triadic-3-200 130 183 255 triadic-3-300 68 135 255 triadic-3-400 0 0 255 triadic-3-500 5 0 227 triadic-3-600 13 0 179 triadic-3-700 13 0 125 triadic-3-800 6 0 71 triadic-3-900 1 0 21 triadic-3-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.