How to use

Enter a base color or use Pick a color. #3366cc, rgb(51, 102, 204) and hsl(220, 60%, 50%) all work.
Choose a harmony and the matching colors appear as cards. The card marked “Base” is the color you started with.
Each card has a Copy button for its HEX code.
At the bottom, export the whole palette as CSS variables, JSON or a HEX list.

Harmonies

Colors are created by rotating the base color’s hue on the HSL color wheel, keeping saturation and lightness the same.

Harmony	Hue angles	Character
Complementary	0°, 180°	strongest contrast — buttons and accents
Analogous	−30°, 0°, +30°	calm and natural
Triadic	0°, 120°, 240°	balanced and lively
Split complementary	0°, 150°, 210°	softer than a straight complement
Tetradic	0°, 90°, 180°, 270°	many hues — let one dominate
Monochrome	30% and 60% white and black mixed in	light-to-dark shades of one color

Starting from #3366cc (a blue at 220°):

Exported as CSS, you get lines like --color-1: #3366cc;, and you can rename the prefix, for example to brand.

This is the HSL wheel used for screens (RGB), not the red-yellow-blue (RYB) wheel taught in art class, so complements differ: the complement of red here is cyan (#00ffff), not green.
A gray with almost no saturation stays the same when its hue is rotated; use Monochrome instead.
Harmony rules are a starting point. Check text and background pairs for contrast in the color converter, or start from something unexpected with the random color generator.

Add 180° to the base color’s HSL hue and keep saturation and lightness. A blue at 220° has an orange-ochre complement at 40°.

Yes. Paste the HEX list into a design tool, drop the CSS variables into :root in your stylesheet, or use the JSON in a design-token file.