二维码生成器

Color harmony is geometry on a wheel

Every "harmony" this tool offers is really a rule for picking angles on the color wheel. The wheel is the hue dimension of the HSL color model, running 0–360 degrees, and the relationships designers have used for centuries are just fixed rotations from your base hue. A complementary pair sits 180° apart for maximum contrast; triadic colors are spaced 120° apart for a balanced, vivid set; analogous colors cluster within about 30–60° for a calm, cohesive look; and monochromatic schemes keep the hue fixed while stepping the lightness up and down. The generator takes the hex color you choose, converts it to HSL, rotates the hue by the right amount for the selected mode, and converts back to hex — so the math is doing exactly what a color wheel does by hand.

What each mode produces

To keep results usable, the tool clamps saturation to the 5–95% range and lightness to 10–90%, so it never hands you a color that is pure black, pure white, or a muddy zero-saturation gray by accident.

A worked example

Start with the default blue #3b82f6. In HSL that is roughly hue 217°, saturation 92%, lightness 60%. Choose complementary and the tool rotates the hue to 217 + 180 = 397, which wraps to 37° — a warm orange-gold — at the same saturation and lightness, giving you a blue/orange pair that designers reach for constantly. Switch to triadic and you get the base blue plus hues at 337° (a pink-red) and 97° (a green), a trio that stays balanced because the three are evenly spaced around the wheel. The "Randomize" button, by the way, doesn't pick a fully random color — it constrains saturation to 50–90% and lightness to 40–60% so the starting point is always pleasant rather than neon or washed out.

Reading the swatches and exporting

Each swatch shows the color in three notations: HEX for CSS and design tools, RGB for code that needs channel values, and HSL so you can see the hue/saturation/lightness logic directly. Click any swatch to copy its HEX to your clipboard. When you're happy, the export panel emits the whole palette as CSS custom properties (--color-1 …), a JSON array, or a Tailwind colors block — ready to paste into a stylesheet or config without retyping a single value. Everything happens in your browser; no colors are uploaded.

Practical tips

• Pick one dominant color, not equal thirds. The classic 60-30-10 rule says a dominant color, a secondary, and an accent. Use your base as the 60%, a harmony color as the accent, and don't spread all swatches evenly.
• Check contrast for text. A harmonious pair isn't automatically readable. The HSL lightness values are your clue — pairing two mid-lightness colors as text-on-background usually fails accessibility contrast, so push one much lighter or darker.
• Use monochromatic for UI depth. The lightness steps make natural hover, active, and disabled states from a single brand color.

Common mistakes

• Treating harmony as accessibility. Complementary colors look striking but can vibrate uncomfortably when placed as small text — harmony rules are about aesthetics, not legibility.
• Forgetting hue wraps around. Offsets past 360° wrap back to the start, which is why a +180 from a high hue can land on a warm color rather than the "opposite" you pictured.
• Using a near-gray base. If your base has very low saturation, rotating its hue barely changes anything — start from a saturated color to see the harmonies clearly.