The color count only applies to the analogous and monochromatic schemes; complementary always yields 2 colors, triadic 3, tetradic 4.
Result
This page has no server side at all. The table you paste is parsed by JavaScript inside your own browser, the chart is drawn on a canvas element on your machine, and the export file is assembled locally. Nothing is uploaded, stored or written to any log. You can disconnect from the network after the page has loaded and everything will still work — which is the simplest way to verify the claim yourself.
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.