Pick Colors and Copy HEX, RGB, HSL

HEX, RGB and HSL all describe the same colour, and each is easier for a different job. HEX is compact and is what most CSS and design tools expect. RGB maps to how a screen actually emits light and is what you need when working with canvas or image data. HSL separates hue from saturation and lightness, which makes it the only one of the three you can adjust by hand and predict the result.

This tool shows all three at once for whatever colour you land on, and copies any of them in a click. You can pick visually from the spectrum, type a value in any format to convert it to the others, or load an image and click a pixel to read its exact colour, which is the fastest way to match a brand colour from a logo or screenshot.

The HSL view is what makes building a coherent palette practical. Keep the hue and saturation fixed and vary only the lightness, and you get a set of tints and shades that genuinely belong together, rather than the mismatched approximations you get from nudging HEX values until they look about right. Everything runs in your browser, including image sampling, so images you load are never uploaded.