🎨Palette Forge
← All posts
2026-04-29 · theory, method

Color theory rules cheat sheet for product designers

Monochrome, analogous, complementary, triadic, split complementary, tetradic — when each one shines and when each one ruins your UI.

Color theory rules are not laws. They are starting points that prevent the worst mistakes when you are picking five colors under deadline.

Monochrome is one hue, varied by saturation and lightness. It works for editorial sites, technical documentation, and minimalist brands. It fails when the product has many UI states (success, warning, error, info) because you have no second hue to differentiate them. Pair monochrome with status colors borrowed from outside the brand palette.

Analogous is three colors within 30 degrees of hue. It feels calm because the colors share a temperature — all warm or all cool. It works for lifestyle and editorial brands. It fails when you need a high-contrast accent because the accent is too close in hue to the primary to stand out.

Complementary is two colors directly opposite on the color wheel. It maximizes contrast and energy. It works for sports, gaming, and food brands. It fails when both colors are at full saturation — they vibrate against each other and induce eye fatigue. Always mute one of the two, or push it toward a neutral.

Triadic is three colors 120 degrees apart. It is the safest scheme for product UI because it gives you exactly three roles — primary, secondary, accent — without forcing arbitrary choices. It fails when designers treat the three as equal; one must dominate, the second must support, the third must punctuate.

Split complementary is a base plus the two colors adjacent to its complement. It is the gentler cousin of complementary. Excellent default for SaaS dashboards and content products because the contrast is softer than pure complementary while still providing a clear accent.

Tetradic is four colors in two complementary pairs. It is the richest basic scheme and the easiest to misuse. Tetradic works in editorial spreads, dashboards with multiple data series, and marketing pages with distinct sections. It fails when used as a single-screen UI palette because there is no obvious primary.

The shortcut: pick the rule by counting roles. One role, monochrome. Two roles, complementary or split complementary. Three roles, triadic. Four-plus roles for charts or sections, tetradic. Then verify with the contrast table.

Try the tool
🎨 Generate a palette →
More reading