Split Complementary Color Generator

It returns three colors as six digit lowercase hex codes. Color 1 is your base, Color 2 is the hue rotated by 150 degrees and Color 3 is the hue rotated by 210 degrees.

Instead of the single color opposite your base, it uses the two colors next to that opposite, 30 degrees on either side of it. You keep most of the contrast of a complementary pair, but the palette is easier to balance.

The tool converts the hex code to HSL, adds 150 and 210 degrees to the hue and wraps around 360 degrees. Saturation and lightness stay as they are, and each result is converted back to a hex code.

For #ff0000 the tool returns #ff0000, #00ff80 and #0080ff, a spring green and an azure on either side of cyan. The tool uses the screen based HSL wheel, so the result differs from a painter's red, yellow and blue wheel.

Enter a single 3 or 6 digit hex code, with or without the #, such as #3366cc or 36c. RGB and HSL strings and color names are not accepted, so convert them to hex first.

Hue, saturation and lightness are rounded to whole numbers, so converting your color to HSL and back can change one channel by a step. For instance, #ff5733 comes back as #ff5833 with #33ffbe and #3374ff beside it.

Use the base color as the main color and the two split complements as accents for secondary actions, highlights or chart series. Because the accents are not exact opposites, they clash less with the base than a direct complement.

Neutral colors have zero saturation, so every hue rotation gives the same gray back. Choose a base with some saturation to get three distinct colors.

No, it only calculates the colors. All three share the lightness of the base, so check any text and background combination with a contrast checker before you publish it.

Yes. This tool performs exactly the calculation of the Split Complementary option in the Color Palette Generator, so both return the same hex codes for the same base color.