Image Color Picker — HEX, RGB, HSL & CMYK

The picker decodes your image into a local HTMLCanvasElement and reads pixels via getImageData. That call returns a flat RGBA buffer in row-major order — for any pixel at (x, y) the byte offset is (y × width + x) × 4. Once we have the raw sRGB triplet, three pure conversions run:

1. HEX — each 0–255 channel padded to two hex digits and joined with a leading #. Upper-case for paste-compatibility with every editor.
2. RGB → HSL follows the algorithm in CSS Color Module Level 3, §4.2.4: normalise to [0, 1], take max and min across the channels, derive lightness as the midpoint, derive saturation from the spread, and pick a hue formula based on which channel is the maximum. The same maths is used inside Chromium, Photoshop, and Figma — the differences you sometimes see across tools are pure rounding artefacts, never a real disagreement.
3. RGB → CMYK applies the un-color-managed identity formula: K = 1 − max(R, G, B), then C = (1 − R − K) / (1 − K), and likewise for M and Y. Without an ICC profile this is the best CMYK a browser can offer; print shops always re-separate against their own press profile anyway, so the values here are digital-preview accurate and a useful starting point.

For confidence the tool also runs an HSL → RGB round-trip on every captured colour. The recovered RGB is compared to the original; a per-channel error ≤ 1 out of 255 is the maximum a correct conversion can produce (one unit of integer rounding per direction), and every sample taken with this tool falls inside that bound. If a captured colour ever showed a larger error, the round-trip note at the bottom of the card would flag it — that is the credibility check.

The Average 5×5 sampling mode reads a 25-pixel square centred on the cursor and returns the integer mean per channel. JPEG compression introduces colour noise that can make a single-pixel reading unrepresentative; averaging is the standard remedy and matches the behaviour of Photoshop's eyedropper at the "5 × 5 average" setting.

• W3C — CSS Color Module Level 3, §4.2 HSL color values
• MDN — CanvasRenderingContext2D.getImageData()
• Adobe — Color modes (RGB & CMYK reference)
• WCAG 2.2 — Relative luminance (used for the swatch text colour)

The conversion formulas in this tool were last cross-checked against the W3C and Adobe sources on 2026-05-11. The page is reviewed whenever the W3C CSS Color spec ships a breaking change (none expected in CSS Color 4).