Colour palette generator
Complementary, analogous, triadic colours and shades from a base colour.
How it works
The hue is rotated on the colour wheel (HSL): complementary + 180°, analogous ± 30°, triadic ± 120°, split 180° ± 30°.
Results are for guidance only and do not replace professional advice.
Worked example
With the default values:
- Base colour#2b50e8
- HarmonyTriadic
you get:
- Base colour#2B50E8 · hsl(228, 80%, 54%)
- CSS variables--c1: #2B50E8; --c2: #E82B50; --c3: #50E82B;
Frequently asked questions
How does the “Colour palette generator” tool work?
The hue is rotated on the colour wheel (HSL): complementary + 180°, analogous ± 30°, triadic ± 120°, split 180° ± 30°.
What do I need to enter?
Just fill in: base colour, harmony. The result updates as you type.
Can you give an example?
Base colour: #2b50e8; Harmony: Triadic → Base colour: #2B50E8 · hsl(228, 80%, 54%); CSS variables: --c1: #2B50E8; --c2: #E82B50; --c3: #50E82B;.
Is this calculator free, and is my data private?
Yes. HOD Calc is completely free with no sign-up. The calculation runs in your browser: nothing you type is sent or stored.