Color Harmonics
Generate complementary, triadic, and other color palettes from any base color.
关于此工具
Color Harmonics takes a single base color and derives six scientifically-grounded color palettes using standard color theory relationships. Pick any color with the hex picker and instantly see Complementary (180° opposite), Split-Complementary (150°/210°), Triadic (120° intervals), Tetradic (90° intervals), Analogous (±30°), and Monochromatic (same hue, varied lightness) palettes. Each palette displays labeled swatches with hex codes. Click any swatch to copy its hex code, or export the full palette set as CSS custom properties or a JSON object for use in your design system.
使用方法
- 1 Click the color picker or type a hex code to set your base color.
- 2 Browse the six generated palettes displayed as labeled swatches.
- 3 Click any swatch to copy its hex code to the clipboard.
- 4 Click Export CSS Variables to copy all colors as CSS custom properties.
- 5 Click Export JSON to copy all palettes as a structured JSON object.
- 6 Try different base colors to explore the full color wheel.
How colour harmony is actually calculated
Colour harmony is not a matter of taste alone — it is geometry on a wheel. Arrange the spectrum into a circle so that 0° is red, 120° is green, and 240° is blue, and the classic palette types become simple rotations: a complementary colour sits 180° opposite, a triad splits the circle into thirds at 120°, and analogous colours cluster within ±30° of each other. This tool takes one base colour, converts it into the HSL (hue, saturation, lightness) model, and rotates the hue by these fixed angles to derive six palettes. Working in HSL is what makes the maths clean: changing only the hue while holding saturation and lightness keeps every derived colour at the same vividness and brightness as your original. Everything is computed locally in your browser.
The six palettes and their angles
| Palette | Hue offsets from base | Character |
|---|---|---|
| Complementary | +180° | Maximum contrast; one colour pops against the other |
| Split-Complementary | +150°, +210° | High contrast but softer and less jarring than a straight complement |
| Triadic | +120°, +240° | Vibrant and balanced; popular in illustration and branding |
| Tetradic | +90°, +180°, +270° | Two complementary pairs; rich but needs one dominant colour |
| Analogous | −30°, −15°, +15°, +30° | Calm, cohesive, found constantly in nature |
| Monochromatic | 0° (hue fixed; lightness varied) | Subtle, unified, foolproof |
Within each palette the tool also generates lighter and darker variants by nudging the lightness value up or down, so a single relationship gives you five usable swatches rather than just the bare two or three angle points. The monochromatic palette is the exception: it keeps the hue fixed and only sweeps lightness across five steps, from about 40% darker to 40% lighter than your base.
A worked example
Start with the default indigo, #6366f1. Converted to HSL that is roughly hue 239°, 84% saturation, 67% lightness. To build the complementary colour, the tool adds 180° to the hue: 239 + 180 = 419, which wraps around to 59°, landing in the yellow-green region. So indigo's high-contrast partner is a warm gold — exactly the pairing you see in many tech logos. For the triadic palette it adds 120° (→ 359°, a red) and 240° (→ 119°, a green), giving the indigo-red-green trio. Because all three share indigo's saturation and lightness, they feel like members of one family rather than three unrelated colours, which is the whole point of deriving them mathematically instead of picking by eye.
Choosing the right palette for the job
- Complementary when you need one element to grab attention — a call-to-action button against its background, or a highlight against body text.
- Split-complementary when a straight complement feels too harsh; it keeps the contrast but reduces the visual tension, making it more forgiving for larger areas.
- Triadic for playful, energetic designs where you want variety but still want balance — children's products, illustrations, infographics.
- Analogous for moods and atmospheres: sunsets, oceans, and forests are analogous in nature, so these palettes feel instinctively harmonious and calm.
- Monochromatic when you cannot go wrong — varying only lightness guarantees the colours work together, ideal for minimal interfaces and data visualisations that need order.
Exporting into your workflow
Click any swatch to copy its hex code, or use the two export buttons. Export CSS Variables produces a :root { } block with named custom properties such as --complementary-1 and --triadic-2, ready to paste at the top of a stylesheet so the whole palette is available throughout your project. Export JSON emits the same data as a structured object keyed by palette name, which drops cleanly into a design-token pipeline, a Tailwind config, or any script that ingests colour data. Both formats carry the exact hex values shown, so what you preview is what you ship.
Common mistakes
- Using every colour at equal strength. Harmony rules give you a set of related colours, not a recipe for how much of each to use. The proven approach is a 60-30-10 split: one dominant colour, one secondary, and one accent. A triadic palette with all three at full force looks chaotic.
- Ignoring contrast for text. Two colours can be perfectly harmonious and still fail accessibility when one is text on the other. Hue harmony does not guarantee a readable contrast ratio — always check light-on-dark and dark-on-light combinations separately for body copy.
- Starting from a near-grey base. If your base colour has very low saturation, rotating its hue barely changes it, and every palette will look muted and similar. Pick a base with real chroma to see the relationships clearly.
- Treating the generated lighter/darker variants as exact tints. They are convenient HSL lightness shifts, not perceptually uniform steps, so a jump that looks subtle in one hue may look bigger in another. Adjust by eye for final polish.