The color you see on screen is a number you can have. Every pixel stores exactly three bytes — red, green, blue — and an eyedropper just reads them out. The craft is in sampling the right pixel, turning one pixel into a whole palette, and knowing whether anyone can actually read text on the color you picked. Here's the full workflow, including the traps that make picked colors come out "almost right".
Digital images are grids of pixels, and each pixel's color is a triple of 8-bit intensities: 0–255 for red, green, and blue. The hex codes designers trade around are just those bytes in base-16 — #2563EB says 25 (37 decimal) red, 63 (99) green, EB (235) blue. When you click an eyedropper on an image, the tool maps your click to image coordinates, reads that one pixel's bytes, and prints them in whichever notation you want. Nothing is estimated; it's a lookup. The image color picker shows the hex, rgb, and hsl side by side for every click, with a hover preview so you can see what you're about to get.
One pixel can't represent a photo, so palette extraction runs the other direction: sample many pixels, group the similar ones, and take each group's center. The picker's palette panel does this with the ColorThief quantizer — the first swatch is the dominant color (the largest cluster), and the next five are the supporting tones, all guaranteed to actually appear in the image. That's what makes image-derived palettes feel coherent where hand-picked ones don't: the relationships come from a real scene's lighting and materials.
| Format | #2563EB as… | Reads as |
|---|---|---|
| HEX | #2563EB | 25 red, 63 green, EB blue (base-16) |
| RGB | rgb(37, 99, 235) | the same bytes in decimal, 0–255 each |
| HSL | hsl(221, 83%, 53%) | hue 221° (blue family), 83% saturated, 53% light |
HSL is the one worth internalizing: keep hue fixed and lower lightness for a shade, lower saturation for a muted variant — that's how you build the 50–900 ramps in design systems, and why tint/shade generation happens in HSL rather than RGB.
Picking the color is half the job; the other half is putting type on it. WCAG 2 defines the standard test: convert the color to relative luminance L (gamma-corrected, channel-weighted), then compute (L1 + 0.05) / (L2 + 0.05) with the lighter of text/background on top. For the running example: #2563EB has luminance 0.1532, so white text gives (1.05)/(0.2032) = 5.17 and black text gives (0.2032)/(0.05) = 4.06. Against the AA thresholds, that's white-on-blue passing normal text, black-on-blue failing it — an actual design decision resolved by arithmetic. Flip to a bright amber like #F59E0B (luminance 0.4389) and the verdicts invert: white text collapses to 2.15, black text soars to 9.78.
The picker prints these verdicts as chips under every color so you don't have to run the formula by hand.
Once the hex is in hand, it converts losslessly everywhere: CSS understands hex, rgb(), hsl(); design tools all take hex; print work needs a CMYK conversion, which is not lossless (different gamut — saturated blues and greens shift). For pairing picked colors with gradients and shadows, the color converter handles the notation round-trips, and the gradient generator builds the transitions between two picked endpoints.
Drop in any image, click any pixel for exact HEX/RGB/HSL, and walk away with a dominant palette. No upload.
Image Color Picker →Sample flat areas of lossless sources for exact matches; build palettes from the whole image, not one pixel; and run the contrast math before shipping text on any picked color. The eyedropper gives you the number — the workflow above makes it the right number.
Open the image in a color picker that samples real pixels, hover to the spot you want, and click. The tool reads that pixel's red, green, and blue bytes and prints them as HEX (#RRGGBB), rgb(), and hsl(). Sample the middle of flat, solid areas — edges are antialiased blends that don't exist in the original design — and if the source is a JPEG, cross-check two or three pixels, which should agree within 1-2 per channel.
Run the image through a palette extractor: it samples the pixels, clusters similar colors together, and returns the cluster centers ordered by size — the first is the dominant color, the rest form a palette that genuinely appears in the image. That's how designers pull a brand scheme from a product photo or a mood board: dominant tone for backgrounds, smaller clusters for accents.
Usually one of three things: you sampled an edge, where antialiasing has blended two colors; the file went through JPEG compression, which perturbs pixel values slightly; or the image uses a wider color profile (Display P3) than your target (sRGB HEX codes). Sample large flat areas, prefer PNG sources for brand matching, and expect tiny JPEG-era deviations.
Compute the WCAG contrast ratio: convert the color to relative luminance, then (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the text and background. White text on #2563EB gives 5.17 — passing AA's 4.5 bar for normal text but not AAA's 7.0. Thresholds: 3.0 for large text and UI elements, 4.5 for normal text, 7.0 for AAA. The image color picker shows these chips for every color you pick.