Aqeeb Studio

Palettes & Harmony

Split Complementary Color Generator

Enter a base color to get the two colors 150° and 210° around the wheel from it. For royal blue #4169E1 they are #E16941 and #B9E141.

Open in the palette generator

Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.

How to use the Split Complementary Generator

  1. Pick a base color with the color square or type a HEX, rgb() or hsl() value.
  2. The tool finds the complement and returns the two colors on either side of it, together with your base color.
  3. Read the HEX codes and names under each swatch and press Copy for the ones you need.
  4. Export the scheme as CSS, JSON or CSS variables, or open it in the palette generator.

Examples

A blue scheme

#4169E1 sits at 225°. The scheme adds #E16941, a red-orange at 15°, and #B9E141, a yellow-green at 75°.

How to use it

Use the base color for large areas, and one of the two split colors for accents. Keep the second split color for small details or charts.

Why designers like it

It keeps most of the contrast of a complementary pair but avoids the head-on clash, so it is easier to balance.

Tips

  • Pick the most muted of the three as the background color and let the others be accents.
  • Check the contrast of any text on any of the colors before you commit to the scheme.

Questions about the Split Complementary Generator

How is split complementary different from complementary?

A complementary scheme uses the color opposite the base. A split-complementary scheme uses the two colors on either side of that opposite, so you get three colors with less tension.

Which angles does this tool use?

It adds 150° and 210° to the base hue. Together with the base that gives a narrow triangle on the wheel.

Do the three colors have the same saturation and lightness?

Yes. Only the hue changes, so the colors feel related. Adjust lightness afterwards if you need more contrast between them.

Can I build a full palette from this?

Yes. Add tints and shades of each color with the tints and shades tool, or add neutrals for backgrounds and text.

Complementary Color Generator

Find the color opposite any color on the color wheel.

Triadic Color Generator

Get three evenly spaced colors from the color wheel.

Color Palette Generator

Generate harmonious palettes and export them as CSS, JSON, SVG or PNG.

Color Picker

Pick any color and copy its HEX, RGB, HSL and CMYK values.