About this tool
Constructing clean, complementary user interfaces requires balanced color arrays to satisfy contrast ratios, accessibility guidelines, and branding rules.
Algorithmic Harmony Transformations
Our generator uses mathematical angle offsets on the standard HSL color wheel to compile harmonious palettes automatically:
- Complementary: Seed hue (H) contrasted against its polar opposite:Complementary Hue = (H + 180°) mod 360°
- Triadic: Divides the color coordinate spectrum into three equidistant parameters separated by 120°:Triadic Hues = { (H + 120°) mod 360°, (H + 240°) mod 360° }
This local mathematical matrix creates palettes instantly inside your browser without any external network round-trips.
Frequently asked questions
Everything you need to know about Color Palette Generator.
How does the tool calculate complementary and analogous colours?
Colours are calculated in HSL space. A complementary colour is exactly 180° opposite on the colour wheel. Analogous colours are ±30° adjacent. Triadic palettes use three colours evenly spaced at 120° intervals. This approach produces perceptually harmonious results.
What colour harmony rules does the palette generator support?
The generator supports Complementary (2 colours, 180° apart), Analogous (3 colours, ±30°), Triadic (3 colours, 120° apart), Split-Complementary (3 colours), Tetradic/Square (4 colours, 90° apart), and Monochromatic (variations in lightness of one hue).
Can I start with a specific base colour?
Yes. Enter any HEX, RGB, or HSL value in the base colour input. The palette generator calculates all harmonious companions from your base hue, letting you build a palette around an existing brand colour.
Can I export the palette as CSS custom properties?
Yes. The export options include CSS variables (:root { --color-1: #...; }), Tailwind config format, JSON, and a plain HEX list. This makes it easy to drop generated palettes directly into your design system.
What is the difference between a triadic and split-complementary palette?
Triadic uses three colours evenly spaced at 120° — bold and vibrant but harder to balance. Split-complementary uses a base colour plus the two colours adjacent to its complement (150° and 210°) — it has similar contrast to complementary but is softer and easier to work with for beginners.