Split-Complementary Generator

Generate safe contrast with a color paired to two tones bordering its complement.

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.

Color Space

:root {
  --split-complementary-1: #ff0000;
  --split-complementary-1-50: #fff3ee;
  --split-complementary-1-100: #ffe7df;
  --split-complementary-1-200: #ffcec1;
  --split-complementary-1-300: #ffab9a;
  --split-complementary-1-400: #ff7a66;
  --split-complementary-1-500: #ff0000;
  --split-complementary-1-600: #de0000;
  --split-complementary-1-700: #a70000;
  --split-complementary-1-800: #6f0000;
  --split-complementary-1-900: #3b0000;
  --split-complementary-1-950: #0f0000;
  --split-complementary-2: #00ff80;
  --split-complementary-2-50: #f1fffa;
  --split-complementary-2-100: #e5fff5;
  --split-complementary-2-200: #cfffec;
  --split-complementary-2-300: #adffe0;
  --split-complementary-2-400: #7cffd1;
  --split-complementary-2-500: #00ff80;
  --split-complementary-2-600: #00d99c;
  --split-complementary-2-700: #009d6a;
  --split-complementary-2-800: #00633d;
  --split-complementary-2-900: #00321a;
  --split-complementary-2-950: #000b03;
  --split-complementary-3: #007fff;
  --split-complementary-3-50: #f0feff;
  --split-complementary-3-100: #e3fbff;
  --split-complementary-3-200: #caf4ff;
  --split-complementary-3-300: #a6eaff;
  --split-complementary-3-400: #74daff;
  --split-complementary-3-500: #007fff;
  --split-complementary-3-600: #009edd;
  --split-complementary-3-700: #006fa4;
  --split-complementary-3-800: #00436c;
  --split-complementary-3-900: #001f39;
  --split-complementary-3-950: #00050e;
}

$split-complementary-1: #ff0000;
$split-complementary-1-50: #fff3ee;
$split-complementary-1-100: #ffe7df;
$split-complementary-1-200: #ffcec1;
$split-complementary-1-300: #ffab9a;
$split-complementary-1-400: #ff7a66;
$split-complementary-1-500: #ff0000;
$split-complementary-1-600: #de0000;
$split-complementary-1-700: #a70000;
$split-complementary-1-800: #6f0000;
$split-complementary-1-900: #3b0000;
$split-complementary-1-950: #0f0000;
$split-complementary-2: #00ff80;
$split-complementary-2-50: #f1fffa;
$split-complementary-2-100: #e5fff5;
$split-complementary-2-200: #cfffec;
$split-complementary-2-300: #adffe0;
$split-complementary-2-400: #7cffd1;
$split-complementary-2-500: #00ff80;
$split-complementary-2-600: #00d99c;
$split-complementary-2-700: #009d6a;
$split-complementary-2-800: #00633d;
$split-complementary-2-900: #00321a;
$split-complementary-2-950: #000b03;
$split-complementary-3: #007fff;
$split-complementary-3-50: #f0feff;
$split-complementary-3-100: #e3fbff;
$split-complementary-3-200: #caf4ff;
$split-complementary-3-300: #a6eaff;
$split-complementary-3-400: #74daff;
$split-complementary-3-500: #007fff;
$split-complementary-3-600: #009edd;
$split-complementary-3-700: #006fa4;
$split-complementary-3-800: #00436c;
$split-complementary-3-900: #001f39;
$split-complementary-3-950: #00050e;

colors: {
    'split-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',
    },
    'split-complementary-2': {
      50: '#f1fffa',
      100: '#e5fff5',
      200: '#cfffec',
      300: '#adffe0',
      400: '#7cffd1',
      500: '#00ff80',
      600: '#00d99c',
      700: '#009d6a',
      800: '#00633d',
      900: '#00321a',
      950: '#000b03',
      DEFAULT: '#00ff80',
    },
    'split-complementary-3': {
      50: '#f0feff',
      100: '#e3fbff',
      200: '#caf4ff',
      300: '#a6eaff',
      400: '#74daff',
      500: '#007fff',
      600: '#009edd',
      700: '#006fa4',
      800: '#00436c',
      900: '#001f39',
      950: '#00050e',
      DEFAULT: '#007fff',
    },
  },

[
  {
    "name": "split-complementary-1",
    "harmony": "Split-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": "split-complementary-2",
    "harmony": "Split-Complementary",
    "hex": "#00ff80",
    "rgb": {
      "r": 0,
      "g": 255,
      "b": 128
    },
    "hsl": {
      "h": 150,
      "s": 100,
      "l": 50
    },
    "value": "#00ff80",
    "tonalScale": {
      "50": {
        "hex": "#f1fffa",
        "rgb": {
          "r": 241,
          "g": 255,
          "b": 250
        }
      },
      "100": {
        "hex": "#e5fff5",
        "rgb": {
          "r": 229,
          "g": 255,
          "b": 245
        }
      },
      "200": {
        "hex": "#cfffec",
        "rgb": {
          "r": 207,
          "g": 255,
          "b": 236
        }
      },
      "300": {
        "hex": "#adffe0",
        "rgb": {
          "r": 173,
          "g": 255,
          "b": 224
        }
      },
      "400": {
        "hex": "#7cffd1",
        "rgb": {
          "r": 124,
          "g": 255,
          "b": 209
        }
      },
      "500": {
        "hex": "#00ff80",
        "rgb": {
          "r": 0,
          "g": 255,
          "b": 128
        }
      },
      "600": {
        "hex": "#00d99c",
        "rgb": {
          "r": 0,
          "g": 217,
          "b": 156
        }
      },
      "700": {
        "hex": "#009d6a",
        "rgb": {
          "r": 0,
          "g": 157,
          "b": 106
        }
      },
      "800": {
        "hex": "#00633d",
        "rgb": {
          "r": 0,
          "g": 99,
          "b": 61
        }
      },
      "900": {
        "hex": "#00321a",
        "rgb": {
          "r": 0,
          "g": 50,
          "b": 26
        }
      },
      "950": {
        "hex": "#000b03",
        "rgb": {
          "r": 0,
          "g": 11,
          "b": 3
        }
      }
    }
  },
  {
    "name": "split-complementary-3",
    "harmony": "Split-Complementary",
    "hex": "#007fff",
    "rgb": {
      "r": 0,
      "g": 127,
      "b": 255
    },
    "hsl": {
      "h": 210,
      "s": 100,
      "l": 50
    },
    "value": "#007fff",
    "tonalScale": {
      "50": {
        "hex": "#f0feff",
        "rgb": {
          "r": 240,
          "g": 254,
          "b": 255
        }
      },
      "100": {
        "hex": "#e3fbff",
        "rgb": {
          "r": 227,
          "g": 251,
          "b": 255
        }
      },
      "200": {
        "hex": "#caf4ff",
        "rgb": {
          "r": 202,
          "g": 244,
          "b": 255
        }
      },
      "300": {
        "hex": "#a6eaff",
        "rgb": {
          "r": 166,
          "g": 234,
          "b": 255
        }
      },
      "400": {
        "hex": "#74daff",
        "rgb": {
          "r": 116,
          "g": 218,
          "b": 255
        }
      },
      "500": {
        "hex": "#007fff",
        "rgb": {
          "r": 0,
          "g": 127,
          "b": 255
        }
      },
      "600": {
        "hex": "#009edd",
        "rgb": {
          "r": 0,
          "g": 158,
          "b": 221
        }
      },
      "700": {
        "hex": "#006fa4",
        "rgb": {
          "r": 0,
          "g": 111,
          "b": 164
        }
      },
      "800": {
        "hex": "#00436c",
        "rgb": {
          "r": 0,
          "g": 67,
          "b": 108
        }
      },
      "900": {
        "hex": "#001f39",
        "rgb": {
          "r": 0,
          "g": 31,
          "b": 57
        }
      },
      "950": {
        "hex": "#00050e",
        "rgb": {
          "r": 0,
          "g": 5,
          "b": 14
        }
      }
    }
  }
]

Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950
split-complementary-1,Split-Complementary,#ff0000,"rgb(255, 0, 0)","hsl(0, 100%, 50%)",#ff0000,#fff3ee,#ffe7df,#ffcec1,#ffab9a,#ff7a66,#ff0000,#de0000,#a70000,#6f0000,#3b0000,#0f0000
split-complementary-2,Split-Complementary,#00ff80,"rgb(0, 255, 128)","hsl(150, 100%, 50%)",#00ff80,#f1fffa,#e5fff5,#cfffec,#adffe0,#7cffd1,#00ff80,#00d99c,#009d6a,#00633d,#00321a,#000b03
split-complementary-3,Split-Complementary,#007fff,"rgb(0, 127, 255)","hsl(210, 100%, 50%)",#007fff,#f0feff,#e3fbff,#caf4ff,#a6eaff,#74daff,#007fff,#009edd,#006fa4,#00436c,#001f39,#00050e

GIMP Palette
Name: PocketSwiss analogous
Columns: 4
#
255   0   0   split-complementary-1
255 243 238   split-complementary-1-50
255 231 223   split-complementary-1-100
255 206 193   split-complementary-1-200
255 171 154   split-complementary-1-300
255 122 102   split-complementary-1-400
255   0   0   split-complementary-1-500
222   0   0   split-complementary-1-600
167   0   0   split-complementary-1-700
111   0   0   split-complementary-1-800
 59   0   0   split-complementary-1-900
 15   0   0   split-complementary-1-950
  0 255 128   split-complementary-2
241 255 250   split-complementary-2-50
229 255 245   split-complementary-2-100
207 255 236   split-complementary-2-200
173 255 224   split-complementary-2-300
124 255 209   split-complementary-2-400
  0 255 128   split-complementary-2-500
  0 217 156   split-complementary-2-600
  0 157 106   split-complementary-2-700
  0  99  61   split-complementary-2-800
  0  50  26   split-complementary-2-900
  0  11   3   split-complementary-2-950
  0 127 255   split-complementary-3
240 254 255   split-complementary-3-50
227 251 255   split-complementary-3-100
202 244 255   split-complementary-3-200
166 234 255   split-complementary-3-300
116 218 255   split-complementary-3-400
  0 127 255   split-complementary-3-500
  0 158 221   split-complementary-3-600
  0 111 164   split-complementary-3-700
  0  67 108   split-complementary-3-800
  0  31  57   split-complementary-3-900
  0   5  14   split-complementary-3-950

Binary ASE — use Download to save the file.

Binary ACO — use Download to save the file.

Split-Complementary Generator

Export Palette

What is Split-Complementary Generator?

Why use the Split-Complementary Generator tool?

Split-Complementary Generator

Export Palette

What is Split-Complementary Generator?

Why use the Split-Complementary Generator tool?

Related tools