Four hues, with roles already assigned
A tetradic scheme uses two complementary pairs at once. Four colors cover more ground than a triad, but a flat list of four leaves you guessing which one carries text and which one sits behind it. So this page builds the four colors and then assigns primary, secondary, accent and background. Square mode splits the wheel into four 90 degree steps, while rectangle mode takes your own split angle and pulls the two complementary pairs closer together.
How it is computed and how roles are chosen
Only the hue gets the offset added, with saturation and lightness kept from the base color. The roles are not a recommendation, they fall out of a calculation. Relative luminance as defined by W3C WCAG (threshold 0.04045, weights 0.2126, 0.7152 and 0.0722) is computed for all four colors, and they are labeled primary, secondary, accent and background from darkest to lightest. A yellow reads far brighter than a blue at the same HSL lightness, which is why this order matches what you see on screen. The specification reference is current as of October 2026.
Limits
Role assignment uses that single luminance ordering. It does not know your brand rules or cultural meaning. The reference contrast line covers only the darkest and lightest pair, and grading every pair in the palette belongs to a batch contrast tool.
Frequently Asked Questions
Square splits the hue wheel into four equal 90 degree steps, so all four colors sit the same distance apart. Rectangle narrows the split angle so the two complementary pairs cluster, which makes it easier to lead with one family and keep a single opposite as the accent.
WCAG relative luminance is computed for each of the four colors, and they are labeled from darkest to lightest as primary, secondary, accent and background. The luminance column prints the value so you can check the ordering yourself.
This page reports only the darkest against the lightest pair as a reference. For every pair with AA and AAA results, use a batch contrast ratio tool instead.