Colour picker

Building a palette from one colour

Every harmony here is a rotation of the hue with saturation and lightness held, which is why the results look like they belong together rather than like five unrelated colours.

• Complementary — opposite on the wheel, 180°. Maximum contrast between two hues; strong, and easy to overuse.
• Analogous — ±30°. Neighbours, so the result is calm and low-contrast. Needs something else to carry emphasis.
• Triadic — 120° apart. Balanced and vivid; usually best with one dominant colour and the other two as accents.
• Split complementary — the two colours either side of the complement. Most of the tension of a complementary pair with less of the vibration.
• Tetradic — two complementary pairs. The most colours you can hold together and the hardest to balance.

Tints and shades

The ramp holds hue and saturation and moves lightness from 95% down to 5%. That is how a design system generates a colour scale from a single brand colour, and it is a single-number edit in HSL where it would be three in hex.

One caveat: a ramp built this way is even in lightness, not in perceived brightness. Yellows will look like they jump; blues will look like they crawl. For a perceptually even scale you want OKLCH, not HSL.

Picking from the screen

The eyedropper reads any pixel on your screen, including outside the browser. It needs EyeDropper, which is Chromium-only — Chrome, Edge, Opera, Arc, Brave. Elsewhere the button is simply absent, since it is a convenience rather than the tool itself.

Nothing is uploaded

Everything happens in this page, including the eyedropper — the pixel it reads never leaves your machine.