The color count only applies to the analogous and monochromatic schemes; complementary always yields 2 colors, triadic 3, tetradic 4.
Result
All calculations run locally in your browser: parsing, chart, export. Disconnect the network and the page keeps working.
Facts and limits of this method
| Complementary | The base color and a color with hue rotated 180° |
|---|---|
| Triadic | Three colors with hue rotated 0°, 120° and 240° |
| Tetradic | Four colors with hue rotated 0°, 90°, 180° and 270° |
| Analogous | Several colors spaced 30° apart in hue around the base |
| Monochromatic | The same hue and saturation, lightness from 12% to 90% |
When it misleads you
- The palette is built from mathematical color-wheel rules (the HSL model), not human perception — colors that are "harmonious" by formula sometimes need manual contrast tweaking in practice.
- The generator doesn't check color-pair contrast for accessibility (WCAG) — for text over a background, check that separately with a dedicated tool.
- The monochromatic and analogous schemes use fixed steps (even lightness spread, 30° hue steps); for finer control, adjust the palette manually after generating.
- The result is a starting point for UI, illustration and branding work, not the only correct answer.
How it is calculated
The base HEX color is converted to the HSL model (hue, saturation, lightness) — a convenient system for building harmonious combinations.
Depending on the chosen palette type, the base hue is rotated by fixed angles (180° for complementary, 120°/240° for triadic, 90°/180°/270° for tetradic) or shifted in small steps (for analogous), keeping saturation and lightness unchanged.
For the monochromatic palette, hue and saturation stay constant while lightness is spread evenly from a dark to a light shade.
Each resulting HSL color is converted back to a HEX code and shown as a swatch with its code labeled.
Questions and answers
How do the palette types differ?
They're based on different geometric shapes on the color wheel: complementary takes the opposite color, triadic and tetradic take evenly spaced points, analogous takes neighboring hues, monochromatic varies lightness of a single hue.
Why doesn't the color count apply to the complementary scheme?
The complementary, triadic and tetradic schemes have a color count fixed by the construction rule itself (2, 3 and 4 respectively) — the count setting only applies to analogous and monochromatic schemes.
Is this palette suitable for web design?
Yes, as a starting point — before using it in an interface, check text-on-background contrast separately against WCAG with a dedicated tool.
Is my data sent anywhere?
No, the whole calculation runs in your browser.