The instant HEX color picker.

A hex colour code is three bytes written in base 16. #3da5ff is red 3d (61), green a5 (165), blue ff (255). Each pair runs from 00 (none of that channel) to ff (all of it), giving 256 levels per channel and 16.7 million combinations total.

That's it. Hex is RGB wearing a compact skin. There is no extra information in a hex code that isn't in the equivalent rgb() value — it's the same three numbers, written more briefly and with less punctuation.

The shorthand form exists too: #f0c expands to #ff00cc by doubling each digit. It only works when both digits of each pair match, so most real colours can't use it. And the 8-digit form adds alpha: #3da5ff80 is the same blue at roughly 50% opacity. Supported everywhere modern, but genuinely hard to read — 80 meaning "half" is obvious to nobody.

Hex has been the web's default colour notation since the first HTML specs in the early nineties, and its staying power is entirely about ergonomics: it's short, it survives copy-paste, it never has ambiguous syntax, and every tool on earth accepts it.

The failure mode with hex sampling isn't getting a wildly wrong colour — it's getting one that's nearly right. A value two digits off looks fine in isolation and subtly wrong next to the real thing, and nobody can articulate why.

Sample from the middle of a large flat area. Every accuracy problem is a variation of breaking this rule. Zoom in first if the region is small — a 40px logo has almost no truly flat pixels, but the same logo at 400px has an obvious safe zone.

Never sample text. Text is drawn with subpixel antialiasing, which lights individual red, green and blue subpixels to fake horizontal resolution. Sample a letterform edge and you get a value tinged orange or cyan that appears nowhere in the actual design.

Watch for JPEG artefacts. Compression introduces colour ringing near sharp edges. The test: sample the same region twice, a few pixels apart. If the two values differ, you're in an artefact zone — move toward the centre until they agree.

Check for transparency. A semi-transparent pixel composites against whatever is behind it. If the sampled value changes when you put the asset on a different background, that region isn't opaque and your reading is a blend, not the colour.

Hex is a transport format, not a thinking format. You cannot look at #3da5ff and #5ab0ff and say which is lighter without base-16 arithmetic. You cannot make a colour 10% darker by editing the string. You cannot tell whether two hex codes are the same brightness at different hues.

That matters the moment you stop grabbing one colour and start building a system. Generating a 50–900 shade ramp, computing hover states, checking contrast, inverting for dark mode — none of those operations are expressible in hex.

This is why modern design systems have moved to OKLCH, where lightness is perceptually uniform and stepping it produces evenly-spaced-looking shades. Tailwind v4 uses it as the native colour space. Hex also physically cannot express colours outside sRGB, which rules out the wider Display P3 gamut that most modern laptops and phones can show.

The practical split: use hex when handing a colour to a human or another tool, and use OKLCH when generating anything. This picker gives you both from the same sample, so you never have to choose at pick time.