Color Harmony Generator

• Complementary — base hue and base + 180°.
• Split-complementary — base, +150°, and +210°.
• Analogous — −30°, base, and +30°, shown in that order.
• Triadic — base, +120°, and +240°.
• Tetradic — base, +90°, +180°, and +270°.
• Monochromatic — the same hue and saturation at lightness 85%, 65%, your own lightness, and 30%. Your own lightness is limited to the 6–96% range in this row, so a near-white or near-black input still returns a visible step.

You can type the base color as HEX (#5B5BD6, 5B5BD6, or a three-digit short form such as #5BD, which means #55BBDD), rgb(91, 91, 214), or hsl(240, 60%, 60%). Four-digit or eight-digit HEX, alpha values, and color names are not accepted; the input box keeps a red outline and the schemes stay unchanged until the value is valid. An HSL input is converted to whole RGB values before the schemes are built, so hsl(240, 60%, 60%) becomes #5C5CD6 rather than #5B5BD6.

These are the three triadic colors from the example above, measured against white with the WCAG 2.x contrast formula. The same effect is stronger with vivid colors: the complementary partner of gold #FFD700 is #0028FF, and both are HSL 50% lightness, but their OKLCH lightness is about 89% and 47%. Before you use a generated color for text or small icons, test the exact pair in the Contrast Checker. When a companion color feels too loud, expand it with the Shades generator and choose a lighter or darker step instead of using the raw hue rotation.

The schemes are geometric starting points. They do not know your background, brand constraints, or the proportion in which each color will appear, and nothing is saved: the tool rebuilds all six rows each time the base color changes.

• Follow 60-30-10. One dominant color (usually a neutral or your calmest hue) takes ~60% of the surface, a secondary ~30%, and the loudest color earns just ~10% as an accent.
• Complementary pairs are accent machines. Don't split them 50/50 — the clash exhausts the eye. Let one dominate and use its opposite only for the moments that matter: CTAs, alerts, highlights.
• Analogous schemes are the safe default. Neighboring hues can share space at similar strengths without fighting, which is why they dominate calm, editorial designs.
• Triadic and tetradic need muting. Keep one hue vivid and pull the others toward gray or near-neutral versions — then expand each with the Shades generator to get workable light and dark steps.

And if the wheel feels arbitrary: real photos already contain harmonies that survived reality. Extract one with the Palette Extractor and use this tool to understand why it works.

• Photo Palette Extractor — Start from a photo instead of a wheel — extract real-world colors first.
• Shades & Tints Generator — Give every color in your scheme a full light-to-dark scale.
• How to choose a color palette — When to trust the color wheel and when to trust the photo.
• Complementary vs Analogous vs Triadic: Color Harmony Basics — What each of the six schemes actually does and when to use which.
• The 60-30-10 rule — How much of each scheme color to actually use: 60% base, 30% support, 10% accent.
• Data visualization color palettes — Why evenly rotated hues are not enough for chart categories, and how to check lightness and color-vision differences.
• Warm vs. cool colors — Why two technically correct schemes can still feel opposite, and how temperature decides it.