Pick a Colour from an Image

HEX, RGB and HSL describe the same colour three ways

Every pixel you sample is one colour, reported in three notations because each is useful for a different job. HEX (#4F46E5) is the compact form CSS and design tools paste cleanest — six digits, two each for red, green and blue. RGB (rgb(79, 70, 229)) is the same three channels as plain 0-255 numbers, which is handy when a tool wants them split out or when you're nudging one channel. HSL (hsl(243, 76%, 59%)) re-expresses that colour as hue, saturation and lightness — and that's the one to reach for when you want to think like a designer rather than a display, because adjusting 'a bit lighter' or 'less saturated' is one intuitive number instead of three coupled ones.

Because they're the same colour, conversions are exact and lossless in both directions — no information is added or lost moving between HEX, RGB and HSL. If you want to round-trip a value, dial in a precise channel, or convert toward print CMYK, the dedicated colour converter shows every notation side by side with live sliders.

Why pixel-precise sampling beats the OS eyedropper

Modern browsers ship an EyeDropper API, and it's great for grabbing a colour off your screen — but it samples whatever is rendered, which on a high-DPI display or a scaled image is often a blended, anti-aliased, or colour-managed approximation rather than the source pixel's true value. Picking on the decoded image itself, with hover-zoom, lets you land on the exact pixel and read its actual stored colour. That matters on dense images — a one-pixel logo edge, a thin gradient stripe, text antialiasing — where being off by a single pixel means sampling a halfway blend, not the colour you meant.

It's also why a pick on a semi-transparent pixel needs care: the value you see is the foreground colour, with alpha reported separately, because the 'colour' of a half-transparent pixel depends entirely on what's behind it. Sample over a known background if you need the composited result.

Building a usable palette, not just a pile of swatches

• Sample with intent: pull the dominant background, one or two mid-tones, an accent, and a text colour — a handful of related colours beats twenty random picks you'll never reuse.
• For matching a UI to a hero image or pulling a brand colour from a logo screenshot, pick the few anchor colours by hand here; to discover what dominates a busy photo automatically, switch to the palette extractor, which quantises the whole image for you.
• Save as you go — each pick lands in a swatch list you can copy from, and export the set as a PNG strip so the palette travels into a design spec or hand-off doc.
• Keep the HSL values around: a coherent palette usually shares hue or lightness relationships, and HSL is where you'll notice (and fix) a swatch that clashes.

A picked colour isn't an accessible colour

Sampling tells you what a colour is; it can't tell you whether it's usable for text. Accessibility is about the contrast ratio between a foreground and a background, and WCAG 2.1 sets the bar: 4.5:1 for normal body text at AA, 3:1 for large text, rising to 7:1 for AAA. A colour you love off a hero image can read beautifully and still fail badly as caption text on a light background. The fix is to check the pairing, not the colour in isolation — pick both your text and background colours, then run the pair through the colour converter before you commit. Pick for taste; verify for legibility.