How the picker reads a color
Every pixel of a digital image is stored as three numbers for red, green and blue, each from 0 to 255. The picker reads those numbers directly from the decoded picture, so the HEX code you copy is the stored value, not a guess from a screenshot of your screen. Photos are noisy, and JPEG compression leaves small blocks of slightly different shades, so a single pixel can be a few points off the color you see. For photos, set "Pixels to average" to 3 × 3 or 5 × 5: the picker then returns the mean of 9 or 25 pixels, which is closer to what the eye perceives. Semi-transparent pixels are weighted by their opacity and fully transparent ones are ignored. Pixels are read in sRGB, the standard color space of the web. A photo saved with a wider profile, such as Display P3 from recent phones or Adobe RGB, is converted to sRGB first, so a design program that works in that wider profile can show slightly different numbers.
HEX, RGB, HSL and CMYK: which one to copy
HEX (#1F7A4D) is the same RGB value written in base 16, and it is what most website builders, design apps and brand guides ask for. RGB (rgb(31, 122, 77)) and HSL (hsl(150, 59%, 30%)) are both valid CSS. HSL describes hue in degrees, then saturation and lightness in percent, which makes it easy to build a lighter or darker shade of the same color by changing only the last number. CMYK is how printers mix cyan, magenta, yellow and black ink. The value shown here uses the simple textbook conversion, with no printer profile, so treat it as a starting point and ask your print shop for the value their press and paper need. Screen colors that are very bright, such as pure RGB green, cannot be printed exactly at all.
The automatic palette: how the dominant colors are found
As soon as the image opens, the tool groups its pixels into the number of colors you choose, from 3 to 12, and lists them from the most common to the least, with the share of the picture each one covers. It uses the k-means method written for this page: pixels are compared in the CIELAB color space, which is built so that equal distances look roughly equally different to the human eye, so two greens that look alike end up in the same group while a small red logo still gets its own. Each palette color is the average of the real pixels in its group, not an invented shade. Transparent areas, such as the background of a PNG logo, are left out so they do not add a fake white or black. The same picture always gives the same palette, and on a normal photo it takes a fraction of a second.
Contrast check with the WCAG 2.2 formula
Pick a text color and a background color, from the palette, from your picks or by typing a HEX code, and the tool calculates their contrast ratio with the formula published by the W3C in WCAG 2.2. Each color is first turned into its relative luminance: the red, green and blue values are converted to linear light, then weighted 0.2126, 0.7152 and 0.0722, because the eye is far more sensitive to green than to blue. The ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, which gives a number from 1:1 (no contrast) to 21:1 (black on white). Level AA asks for at least 4.5:1 for normal text and 3:1 for large text, which WCAG defines as at least 18 point, or 14 point bold. Level AAA asks for 7:1 and 4.5:1. Icons, input borders and chart lines need 3:1 under the non-text contrast rule. The ratio shown is cut, never rounded up, to two decimals, so 4.499 shows as 4.49 and fails, as WCAG intends.
Exports, screen picking, messy files and limits
The palette, or only the colors you kept, can be copied as CSS custom properties (--color-1: #1F7A4D;), saved as a CSS file, saved as JSON with HEX, RGB, HSL, CMYK and share for each color, or saved as a PNG swatch card with the codes printed under each color for a client or a mood board. Chrome and Edge on a computer can also pick a color from anywhere on your screen, outside this page, through the browser's own eyedropper; Safari, Firefox and phone browsers do not offer it, and the button only appears where it works. JPG, PNG, WebP, GIF, BMP, AVIF and iPhone HEIC files open; animated files show their first frame. Empty files, files that are not images and damaged files get a clear message instead of a blank screen. Pictures above 24 megapixels, such as 8000 × 6000 px camera files, are scaled down for picking to keep phones responsive; a flat area of color keeps its exact value, and only details smaller than a pixel of the smaller copy are blended.