← Back to Tools
Complementary Color Matcher
Generate high-contrast complementary color pairs using exact 180° hue rotation.
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.