The color wheel, briefly
Every harmony mode below works by picking hues at specific angles around a color wheel, where hue is measured in degrees from 0° to 360°. Saturation and lightness stay closer to constant within a mode; it's the hue relationships that define each harmony.
| Mode | How the hues are chosen |
|---|---|
| Complementary | Two colors directly opposite each other, 180° apart |
| Analogous | Neighbors on the wheel, roughly 30° apart |
| Triadic | Three colors evenly spaced, 120° apart |
| Tetrad (Rectangle) | Two complementary pairs, spaced unevenly (not 90° apart) |
| Square | Four colors evenly spaced, 90° apart |
| Split-Complementary | A base color plus the two colors adjacent to its complement |
| Monochrome | One hue across five lightness values, saturation held constant |
| Random | Five independently chosen colors, no harmony rule |
Complementary
Two colors sitting directly opposite each other on the wheel, 180° apart. This is the highest-contrast pairing available and tends to make both colors look more vivid next to each other. Good for: calls to action, sports branding, anywhere you want one element to visually pop against another.
Analogous
Colors sitting next to each other on the wheel, roughly 30° apart. Because the hues are close together, analogous palettes read as calm and cohesive rather than high-contrast. Good for: nature-themed designs, backgrounds, anywhere you want harmony over drama.
Triadic
Three colors evenly spaced around the wheel, 120° apart. This keeps some of complementary's vibrancy while adding a third point of contrast, which tends to feel more playful and balanced than a straight two-color complementary pairing. Good for: creative portfolios, playful brands.
Tetrad (Rectangle)
Two complementary pairs, but spaced unevenly around the wheel (not 90° apart) so the four colors form a rectangle rather than a square. This is the harmony mode with the most color variety, which also makes it the easiest to unbalance. It usually works best with one color as dominant and the other three as accents.
Square
Four colors evenly spaced around the wheel, 90° apart. Compared to tetrad, the even spacing makes square palettes feel more balanced and less likely to have one hue accidentally dominate.
Split-Complementary
A base color plus the two colors adjacent to its direct complement, rather than the complement itself. This keeps much of complementary's contrast while softening it slightly, since neither of the two accent colors is at the harshest possible angle from the base.
Monochrome
A single hue expressed across five different lightness values, from dark to light, with saturation held constant. No hue variation at all: the most cohesive and lowest-contrast of the eight modes, which is exactly what makes it read as elegant and minimal rather than flat.
Random
Five independently chosen colors from across the spectrum, with no harmony rule constraining them. Useful for breaking out of a rut or discovering combinations you wouldn't have picked deliberately. It is not a substitute for the other seven modes when you need a specific, coherent relationship between colors.
Worked example: a base hue of 200°
A hue of 200° is a blue. Each harmony mode adds the offsets below to that base, wrapping around at 360°. These offsets are the ones the generator uses. The dot with the ring on each wheel is the base color, with hue 0° (red) at the top and the angle growing clockwise.
| Mode | Offsets from the base | Hues for a base of 200° |
|---|---|---|
| Complementary | 0°, +180° | 200°, 20° |
| Analogous | -30°, 0°, +30° | 170°, 200°, 230° |
| Triadic | 0°, +120°, +240° | 200°, 320°, 80° |
| Tetrad (rectangle) | 0°, +60°, +180°, +240° | 200°, 260°, 20°, 80° |
| Square | 0°, +90°, +180°, +270° | 200°, 290°, 20°, 110° |
| Split-complementary | 0°, +150°, +210° | 200°, 350°, 50° |
| Monochrome | none | 200° only, with five lightness steps |
Two things to notice. In the triadic row, 200 + 240 = 440, which wraps to 80°, a yellow-green. In the tetrad row the pair of complements is 200° with 20° and 260° with 80°, so the four hues sit at uneven gaps (60°, 120°, 60°, 120°), unlike the square's even 90° gaps. To see the same hues as swatches, set a base color of #1A8CBF or similar in the palette generator and switch modes.
Where to go next
Once you've generated a palette using any of the modes above, check your text/background pairings against the contrast checker, get exact codes in any format from the color converter, or see what your colors tend to communicate on the color meanings page. Not sure how many colors to keep? See how many colors you actually need in a palette, or browse all our articles for more. Building a light and dark theme? Try the light-dark() generator for theme pairs.
Frequently Asked Questions
How many harmony modes does PaletteGen have?
Eight: complementary, analogous, triadic, tetrad, square, split-complementary, monochrome and random. Each one picks hues at a different set of angles on the color wheel, except random, which follows no harmony rule.
What is the difference between tetrad and square?
Both use four colors. Tetrad uses two complementary pairs spaced unevenly, so the four colors form a rectangle, while square spaces them evenly, 90° apart. The even spacing makes square palettes feel more balanced and less likely to have one hue dominate.
Which harmony mode is the most cohesive?
Monochrome. It is a single hue across five lightness values with saturation held constant, so it has no hue variation and is the most cohesive and lowest-contrast of the eight modes.
Sources
- Color wheel fundamentals and harmony rulesGeneral, widely-taught color theory conventions, not attributed to a single publisher.
About this page
The color wheel and harmony rules here are standard, widely taught color theory, not tied to one publisher. Each section is written to match what the same mode does in the generator, and the worked example's offsets are read from the generator's own code.