Why these four schemes specifically
Complementary, triadic, and analogous are all the same underlying idea — pick colors at specific angles around the hue circle — applied at three different spacings, each suited to a different design goal. Complementary (180° apart) maximizes contrast, useful for a single accent color that needs to stand out against a base, like a call-to-action button. Triadic (three colors, 120° apart) gives vibrant variety while staying balanced, since no single hue dominates. Analogous (colors within about 30° of the base) stays visually harmonious and calm, because neighboring hues on the color wheel read as related rather than contrasting — this is the scheme most often used for a whole interface's palette, where too much contrast between elements would feel chaotic.
The math behind hue rotation
Every scheme on this page works the same way: convert the base color to HSL, add a fixed number of degrees to the hue component (wrapping around at 360°, since hue is circular — 350° + 30° is 20°, not 380°), and convert back to hex, holding saturation and lightness constant. Complementary adds 180°. Triadic adds 120° and 240°. Analogous adds -30° and +30°. Because only the hue changes, every color in a given scheme shares the base color's exact saturation and lightness — same intensity and brightness, different position on the color wheel — which is what keeps a generated palette feeling like a coherent set rather than unrelated colors.
Why monochromatic works differently
A monochromatic palette isn't a hue rotation at all — every swatch shares the exact same hue and saturation as the base, with only the HSL lightness value changing across a fixed set of steps. This is a different operation from the Tint & Shade tool elsewhere on this site, which blends the color toward white or black in RGB space instead — RGB blending tends to desaturate as a side effect, while adjusting HSL lightness directly keeps the color looking more vivid and saturated at every step, especially in the middle of the range.
Why the color wheel uses hue degrees, not hex distance
It might seem intuitive to generate a "different" color by adjusting the hex value directly — adding to the red byte, say — but that doesn't correspond to any meaningful visual relationship, because hex encodes red, green, and blue as three independent channels with no direct connection to how the eye perceives hue, saturation, or brightness. HSL's hue component, by contrast, is specifically designed to match the intuitive "color wheel" most people already think in: red, orange, yellow, green, cyan, blue, magenta, and back to red, arranged around a circle at 0°-360°. Rotating around that circle is what actually produces perceptually related colors — which is exactly why this tool converts to HSL first rather than manipulating hex or RGB bytes directly.
A worked example
Starting from #3B82F6 (a blue, roughly 217° hue, high saturation, medium-high lightness): the complementary color sits at 217° + 180° = 37°, an amber/orange. The two triadic colors sit at 217° + 120° = 337° (pink/magenta) and 217° + 240° = 97° (green). The analogous pair sits at 217° − 30° = 187° (cyan-blue) and 217° + 30° = 247° (violet-blue) — visibly closer to the original blue than the triadic or complementary colors, exactly as the ±30° spacing implies.
Using a generated palette in practice
A full interface rarely uses every color from a scheme at equal weight — a common pattern is picking one dominant color from an analogous or monochromatic set for most of the interface, then reserving a complementary or triadic color specifically for accents, warnings, or calls to action that need to visually stand out from everything else on the page. Clicking any swatch copies its hex code directly, so a generated color can be dropped straight into CSS, a design tool, or any of this site's other color converters for further conversion.