Tetradic (double complementary)
Four hues built from two opposite pairs on the color wheel, giving a palette more range without making the choices arbitrary.
See it
What it is
A tetradic scheme uses four hues arranged as two complementary pairs on the color wheel. Connect them and you get a rectangle; space all four evenly and you get the square scheme, a special, louder version. It gives you more range than an analogous or triadic palette while keeping a visible piece of color-wheel logic underneath it.
Reach for it when a system needs several distinct families, such as a brand color, a supporting color, and two accents for illustration or data. Pick one hue as the dominant, let a second support it, and ration the remaining pair to small moments. The rectangle supplies candidates, not equal voting rights.
Gotcha: four fully saturated hues at equal area turn into confetti. Separate their jobs, vary their lightness and chroma, and leave enough neutral space for the eye to rest. Also name the wheel or color space used for the angles, because a complement on an artist's RYB wheel is not always the numeric opposite in RGB or OKLCH.
Ask AI for it
Build a tetradic palette from the current brand hue using CSS oklch(). Set the four hue angles to H, H plus 60 degrees, H plus 180 degrees, and H plus 240 degrees so they form two complementary pairs on the same OKLCH wheel. Assign them dominant, supporting, accent, and rare-accent roles with roughly 60%, 25%, 10%, and 5% visual area. Tune lightness and chroma independently so the four roles are distinguishable, define them as CSS custom properties, and provide foreground pairings that clear a 4.5:1 contrast ratio.