On this page
The anatomy you already know
Nearly every color picker — in design tools, browser DevTools, and the native control that opens from the swatches on this site's tools — is the same three-part machine: a hue slider running through the rainbow, a large square you drag within, and often an alpha slider for transparency. It's so ubiquitous that it feels inevitable, but it's a specific, clever projection of a 3D color space onto controls a hand can operate.
The square is an HSV slice
The picker is a direct visualization of the HSV model. The slider picks the hue — the angle on the color wheel, 0–360°. The square is then one slice of the space at that hue: saturation runs left to right, value (brightness) runs bottom to top. Four corners, four landmarks: bottom edge is black regardless of the other axis, top-left is pure white, and the top-right corner is the hue at maximum intensity.
That top-right corner is the reason pickers use HSV rather than its sibling HSL. In HSV the most vivid version of a hue sits at a corner — a natural target to drag toward. In HSL, the vivid color hides at 50% lightness in the vertical middle, with white above it; a picker built on HSL feels wrong precisely because "most colorful" isn't at an edge. The two models slice the same colors differently — the full comparison is in our HSL vs HSV guide — and picker design is the one place HSV wins outright.
Watch the numbers while dragging and the geometry becomes concrete: drag straight down and only value falls; straight left and the color grays toward the neutral axis; the converter shows all the coordinate systems tracking each other live.
What the eyedropper really samples
The eyedropper answers a different question: not "what color do I want?" but "what color is that?" Technically it reads the final rendered pixel — after every overlay, filter, shadow, and antialiasing pass. That has a consequence worth knowing: sampling the edge of text or a curved shape often returns a blend, because edge pixels are literally mixtures created by antialiasing. Sample from the middle of flat areas for the true value.
In browsers, the modern EyeDropper API lets pages offer screen sampling (with explicit user action, for obvious privacy reasons), though support varies. For image work, our image color picker implements the same idea with a zoomed loupe so you can see exactly which pixel you're reading — the honest answer to the antialiasing problem.
Why there's no perfect picker
The square-and-slider is a compromise, and it's useful to know what it trades away. HSV is geometrically tidy but not perceptually uniform: equal drags don't produce equal-looking changes, and two colors at the same "brightness" coordinate can differ wildly in how bright they look (yellow vs. blue being the notorious pair). Perceptually uniform spaces like OKLCH fix the math, and picker designs built on them are appearing in modern tools — the trade-off is a less familiar shape whose slices change size with hue, because the space honestly reflects that some hues support more visible saturation than others.
For everyday work, the classic picker plus a verification step is hard to beat: pick by eye in the square, then let numbers confirm what eyes can't — contrast for text duty, a palette check for how it ladders, and a glance at the picked value's full analysis page for everything else. The picker is where color decisions start; it shouldn't be where they end.