Colour harmony is geometry on a wheel. Two hues opposite each other look like a deliberate contrast, three spaced evenly look balanced, and neighbours look calm. The Color Palette Generator converts your base colour to HSL, moves the hue by a fixed number of degrees for the scheme you picked, and converts back, returning 5 swatches every time.
The reason it works in HSL rather than RGB is that hue rotation is a single addition there and a mess of channel arithmetic otherwise. Saturation and lightness are carried across untouched for the hue-based schemes, so the palette holds together in weight instead of drifting light and dark unpredictably.
Every swatch is a button that copies its own hex on click, with a tick replacing the copy icon for 1.8 seconds. The Randombutton picks a hue at random and pins saturation to 65% and lightness to 50%, which is a deliberately safe starting point rather than a genuinely random colour. All the arithmetic happens in the page.
What Each Scheme Produces
- Complementary gives Base, a darker and lighter version of it, then the hue 180 degrees away plus a dark variant. From
#7C3AED the complement is #ACED3B, a yellow-green. - Triadic gives Base plus the hues at 120 and 240 degrees, then a dark and light Base variant. The same violet yields
#ED7C3B and #3BED7C. - Analogous walks 30 and 15 degrees either side of Base, producing 5 neighbouring hues at identical saturation and lightness. This is the scheme for backgrounds and gradients.
- Monochromatic keeps the hue fixed and steps lightness by 15 and 30 points in each direction, which is exactly how a tint scale for a design system is built.
- Only Complementary and Triadic include both a light and a dark derivative, so those two are the schemes that give you a usable text colour alongside the accents.
The HSL Method Behind Each Scheme
- Lightness is clamped to a range of 10 to 90. Ask for a dark variant of an already-dark base and the two swatches come back identical rather than black.
- Hue arithmetic wraps at 360, so a base at 340 degrees plus 30 lands at 10 rather than running off the end of the wheel.
- Equal lightness in HSL is not equal perceived brightness. A yellow at 50% lightness reads far brighter than a blue at 50%, so check any pair meant to carry text against the Color Contrast Checker before shipping it.
- A pure grey has no meaningful hue, so every hue-based scheme returns 5 near-identical greys. Give the base some saturation before expecting a palette.
- Shorthand hex is accepted and expanded, though the failure message still reads
Invalid HEX color. Enter a valid 6-digit hex code. Anything that is not 3 or 6 hex digits clears the swatches entirely.