How to Use the Triadic & Tetradic (Square/Rect) Palette Generator
-
1
Enter your primary anchor color.
-
2
Select a harmony mode: Triadic (3 colors spaced evenly at 120° apart), Square Tetradic (4 colors at 90° apart), or Rectangular Tetradic (two complementary pairs).
-
3
Inspect the color wheel diagram highlighting the geometric polygon.
-
4
Copy color codes as HEX, RGB, or CSS variables.
Practical Example & Use Case
Common Real-World Scenario
Generating a high-energy triadic palette of Blue (`#3b82f6`), Red (`#f63b82`), and Yellow (`#82f63b`) for an educational children's web app.
Technical Notes & Limitations
Browser Engine Architecture
Calculates exact geometric angle rotations on the HSL cylindrical color coordinate model.
Frequently Asked Questions
How should triadic colors be used in UI design?
Choose one dominant color for backgrounds/branding, and use the other two sparingly for accents, call-to-action buttons, and badges to avoid visual clutter.