Color palette generator

Harmonies are just angles on the colour wheel

Every "colour harmony" is really a rule about hue angle. Describe a colour in HSL — hue (0–360° around the wheel), saturation and lightness — and the schemes fall out as simple rotations of the hue while saturation and lightness stay put. Complementary takes the hue 180° opposite for maximum contrast; analogous nudges ±30° for neighbours that feel calm and cohesive; triadic spaces three hues 120° apart for vibrant balance; monochromatic holds the hue and varies only lightness for a tonal ramp. Working in HSL is also why you can shift a whole palette warmer or cooler by moving every hue the same few degrees — something that's painful to do by hand in hex.

Pulling a palette out of a photo

Extracting colours from an image is a clustering problem: the tool samples the pixels and groups them into a handful of representative colours, so the swatches reflect what the photo is actually made of rather than the one shade your eye fixes on. It's the fastest way to derive a scheme that already feels coherent — brand colours from a product shot, an interface palette from a mood photo — because the relationships were baked in by the lighting of the original scene. Treat the result as a starting point and adjust saturation or lightness to taste; raw photographic colours are often too muted or too noisy to use unedited.

From swatches to a usable scheme

A palette of five pretty colours isn't yet a design system. The common failure is using them in equal measure; the fix is a dominance hierarchy — the familiar 60-30-10 split of a dominant neutral, a secondary colour and a single accent for calls to action. Pick the accent for contrast against your background, not just for prettiness, and then prove it: a colour that looks fine as a swatch can still be illegible as text. Run the foreground/background pairs you'll actually ship through the contrast checker, and if you want the palette as a backdrop, feed two of the swatches into the gradient generator.