Color Palette Generator

Drop in a hex colour and get the seven harmonies painters and interface designers actually reach for: complementary (the hue opposite, 180° away), split-complementary (150° and 210°, softer than a straight opposite), triadic (120° apart), tetradic and square (four-colour schemes at 60/180/240° and 90/180/270°), analogous (30° either side, the calm neighbours), and monochromatic, which holds the hue still and steps the lightness instead. The tool also shows your base colour's HSL breakdown, so you can see what it is working from.

Rotating the hue in HSL is what makes these schemes so easy to compute, and it is also their one real weakness: HSL lightness is a geometric coordinate, not a perceptual one. Two colours at the same L can differ enormously in how bright they actually look. Pure yellow and pure blue both sit at L = 50%, yet their relative luminance is 0.928 and 0.072 — a factor of about thirteen. Against a white background the yellow gives a contrast ratio of 1.07:1 and the blue 8.59:1, which is the difference between invisible and comfortably readable.

That gap shows up in ordinary palettes too, not just in extreme cases. Take the default #3b82f6 — HSL 217°, 91%, 60% — and its complement #f6af3b sits at exactly the same saturation and lightness, yet on white one scores 3.68:1 and the other 1.89:1. So a harmony that looks balanced in the swatch strip can quietly fail accessibility the moment it becomes text. Use these palettes to choose hues that belong together, then run any pair you intend to put text on through a contrast checker and adjust the lightness until it passes.

Colour harmony is also a convention rather than a law. The wheel these rules divide is the RGB hue circle, which is not the pigment wheel those same rules were named on — red's opposite is cyan here and green in a paint box. And roughly one man in twelve has a red-green colour vision deficiency, for whom a red/green complementary pair carries no contrast at all. If a distinction matters, carry it with lightness, shape or a label as well as with hue.