Color Harmony Generator

Your base color is parsed to RGB, converted to HSL, and its hue is rotated by fixed angles for each scheme. Complementary rotates 180 degrees, triadic 120 and 240, tetradic 90, 180 and 270, split complementary 150 and 210, and analogous plus or minus 30. Each rotated color is converted back to hex.

Complementary, analogous, triadic, tetradic, split complementary, and monochromatic. All six are generated at once from the single base color, so there is no mode to switch between; you see every palette on the page together.

It keeps the base hue and saturation fixed and steps the lightness by minus 30, minus 15, 0, plus 15, and plus 30 percentage points, clamped to the 0 to 100 range. That gives two darker shades, the base, and two lighter tints of the same color.

Every output is an uppercase six digit hex like #CC9933, even if you typed a three digit shorthand. Values are rounded to the nearest 8 bit channel during the HSL to RGB conversion, so a round trip can shift a color slightly.

It is the hue directly opposite on the wheel, found by rotating 180 degrees. For the blue #3366CC that gives the warm #CC9933. Complementary pairs sit at maximum hue contrast and work well for accents against a dominant color.

Triadic returns three colors spaced 120 degrees apart, including your base. Tetradic returns four colors at 90 degree steps, forming two complementary pairs. Tetradic offers more range but is harder to balance, so many designers let one color dominate.

No. The internal math uses HSL, but the tool only shows hex codes under each swatch. If you need HSL or RGB strings, run the resulting hex through a dedicated color converter.

Those schemes are meant to be used as a set alongside the color you started from, so the base is included in the swatch row. Complementary is the single opposite hue and is shown on its own.

No. All parsing, hue rotation, and hex conversion run locally in your browser, and nothing about your color choices is uploaded or stored. It keeps working offline once loaded.