Pick a colour and get hex, RGB, HSL and a palette

Drag in the picker and the colour is shown as hex, rgb() and hsl(), each with a copy button, along with the nearest CSS colour name. Beneath it a row of shades gives two lighter and two darker steps of the same hue, and four harmony sets, complementary, analogous, triadic and tetradic, are computed from the colour wheel. Clicking any swatch makes it the current colour and copies its hex.

To pull a colour from a photo, a logo or a screenshot, drop the image onto the canvas and click the pixel you want. The sampled value is read directly from the image data, so it is exact rather than approximate. Arrow keys move the sampling point for fine adjustment, Shift makes the steps larger, and Enter picks.

Shades are produced by lightening and darkening in HSL, which keeps the hue fixed; anyone building a full tonal scale may want to adjust saturation by hand at the extremes, since pure HSL steps can look washed out near white. A second tab opens the CSS gradient generator. The image is decoded on the page and never uploaded.