Triadic / Complementary / Analogous Palette

Color theory in CSS: pick a base color, see every classic harmony palette derived from it — complementary (opposite), triadic (3 evenly spaced), analogous (adjacent), tetradic (4 corners), split-complementary. Each palette is balanced for design use.

How to use the Triadic / Complementary / Analogous Palette

Pick a base color. The tool generates 5 classic color harmonies. Click any swatch to copy.

Classic color harmonies from a base

Color harmony is the part of color theory that explains why some combinations feel balanced. The relationships are defined by angles on the color wheel: complementary colors sit opposite, triadic colors are three evenly spaced points, analogous colors are neighbours, and tetradic and split-complementary schemes form other regular shapes. Picking these by eye is hard; computing them from a hue is exact.

Pick a base color and this derives all five harmonies at once — complementary, triadic, analogous, tetradic, and split-complementary — each swatch click-to-copy. To turn any one of these colors into a full light-to-dark scale, use the monochromatic palette; to check a pair for legible text, the contrast checker.

Common use cases

  • Brand palettes — build a balanced set of colors from one brand hue.
  • UI accents — pick a complementary accent against a primary color.
  • Data visualisation — use triadic or tetradic sets for distinct categories.
  • Illustration — start from an analogous scheme for a cohesive look.
  • Exploration — compare several harmonies before committing.

Frequently asked questions

Which harmonies does it generate?
Complementary, triadic, analogous, tetradic, and split-complementary, all from your chosen base color.

What is the difference between triadic and tetradic?
Triadic uses three colors evenly spaced on the wheel; tetradic uses four, forming a rectangle, so it offers more variety but is harder to balance.

How do I expand one color into a scale?
Take any swatch into the monochromatic palette to get a 50–900 light-to-dark ramp.

How do I check a pair is readable?
Test foreground and background in the contrast checker for the WCAG ratio.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: