Image color picker that reads the exact pixel

An image color picker is a tool that reads the actual pixel values out of a picture and hands you the color codes for them. You point at a spot in a photo, a screenshot or a logo, and it tells you that pixel is #F5A17D, or rgb(245, 161, 125), or whatever notation you need. It is not a filter and not an editor, and nothing about your image changes. It is a way of getting a color out of an image and into a stylesheet, a design file or a paint order.

Your browser decodes the image into a grid of pixels, and every pixel holds a red, a green and a blue value between 0 and 255. This tool draws that decoded image onto an HTML canvas at its full original size, then reads back the pixel under your cursor. Those three numbers become every other notation: hex is the same numbers written in base 16, while HSL and OKLCH describe the same color by angle and lightness instead. Zooming changes only what you see. The canvas that gets read is never scaled, so a reading at 10× is the same reading as at fit.

Use it whenever the color you need already exists in an image: measuring is faster than guessing, and people notice when a color is nearly right. If you are rebuilding a layout from a screenshot, matching a brand color out of a PDF somebody emailed you, or pulling a palette from a photograph, the color is already sitting there. You only need it in a form you can paste. A picker also works out the slow parts for you: the color's shades, its contrast against white and black, and whether people with color blindness can still tell it apart from nearby colors.

Drop your image onto the picker, hover over the area you want and click. The loupe shows the 13 × 13 pixels under your cursor with the grid drawn in, so you can see which pixel you will get. Clicking drops a numbered pin and fills the panel with nine codes for that pixel; click any code to copy it. For an exact pixel, zoom in and use the arrow keys, which move one pixel at a time.

Anything your browser can decode, which in practice covers JPEG, PNG, WebP, AVIF, GIF and BMP, plus SVG files that carry an intrinsic width and height. The limit is 40 MB per file; there is no limit on dimensions. You can drag a file in, browse for one, paste a screenshot with Ctrl + V, or paste the URL of an image on the web. Photos taken on a phone arrive the right way up, because EXIF orientation is applied while the image is decoded rather than ignored.

Yes, in two ways. Every click drops a pin, with no limit on how many, so you can collect colors across an image, rename and reorder them, and export the set in one go. The palette tab describes the whole image: it shrinks the image to 160 pixels on its longest edge, splits it with median cut, then refines the groups with k-means clustering in CIE LAB, a color space built to match human vision. Each of the eight swatches shows the share of the image it covers.

Yes. Tap to pick, drag with one finger to pan, and pinch with two to zoom. Browsing for a file usually offers the camera as a source, so you can photograph something and pick from it immediately. A touch screen has no hover: there is no cursor traveling ahead of you, so a tap picks straight away. On small details, pinch in first and then tap, which is the same advice as reaching for the arrow keys on a desktop.

Yes, in Chrome, Edge and other Chromium browsers. The Pick from screen button uses the browser's native EyeDropper API, which can sample any pixel anywhere on your display, including another window, a video frame or a PDF. Firefox and Safari have not shipped that API, so the button does not appear there. On those browsers, take a screenshot and paste it in with Ctrl + V. Picking from a PNG screenshot usually returns the same value you would get from the screen.

Nine, live, for every color you pick: HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH and the closest CSS color name. The name is matched with CIEDE2000 rather than straight RGB distance, so it lands on the name that looks nearest. You will paste HEX and RGB most often. HSL and HSV are easier when you want the same color a little lighter. OKLCH is perceptually uniform, so the shade ramps and harmonies here are built in OKLCH. The companion color picker breaks a single color into 34 codes, adding HWB, CIELUV, OKLab, CIE XYZ and linear sRGB.

The read itself is exact: the tool returns the byte values in the decoded image, with no interpolation and no rounding. The accuracy is lost in the image. In a JPEG saved at quality 95, a pixel in a flat area is 0.37 delta-E from the original (delta-E measures visible color difference; under 1 is invisible). A pixel on an edge is already 6.91 off, and the color is only accurate again about 3 pixels away from a hard edge. Anti-aliasing does similar damage without compression: the rim of one test circle produced 77 colors that appear in neither the shape nor the background. Measured on August 25, 2026 in Chromium 151.0.7922.34.

Yes. Any single value copies with one click. The Export tab exports a whole set at once: your pins, the image palette, the harmonies or a 50 to 950 shade ramp. It offers six formats: CSS custom properties, a Tailwind v4 @theme block, SCSS variables with a map, JSON, a plain list of hex codes, and an SVG swatch sheet with labels. You can copy each one or download it as a file. There is no PNG or Adobe swatch export; the SVG sheet is the closest option.

No. There is no upload endpoint on this site: your browser opens the file and the tool reads pixels from a canvas in the same tab. There is no account and no analytics. To check, open your browser's Network panel and pick some colors; no request appears. The project's end-to-end check does the same and fails if a request ever leaves the page. The only exception is pasting an image URL, which makes your browser fetch that address from its host.

Yes. It is free, with no sign-up, no watermark, no daily cap and no paid tier. Every feature, including the palette and all six export formats, is open to everyone. It can stay free because the work happens on your device, so an image costs nothing to process on a server. It works in any modern browser on a desktop, tablet or phone, with nothing to install, and the link in your address bar keeps the last color you picked.

Check four things: whether it reads your file in your browser or uploads it, whether it gives you more than a hex code (a palette, contrast checks, shade ramps), whether you can widen the sample area for noisy photos, and whether it exports in formats your tools accept. This one does all four. Its limits: the screen eyedropper only works in Chromium browsers, and there is no Adobe swatch or PNG export.

Take the screenshot, come back to this page and press Ctrl + V (Cmd + V on a Mac). The image loads at once. Click the pixel you need and copy its HEX code. Screenshots are usually saved as PNG without compression, so the code normally matches what was on your screen.

Load the image and open the Image palette tab. The tool groups the picture into its eight main colors and shows how much of the image each one covers. Copy any swatch, or export the whole palette as CSS variables, a Tailwind theme, SCSS, JSON, a HEX list or an SVG swatch sheet.

Yes. Every color you pick shows the nearest CSS color name, such as “slateblue” or “tomato”, matched by how alike the colors look rather than by raw RGB numbers, plus a plain description like “light muted azure”. The name is the closest match; the HEX code is the exact value.

Not directly. Google's own color picker, shown for searches like “color picker”, lets you choose a color from a spectrum, but it cannot read a pixel from your image. To get the exact code from a photo or screenshot, open it in an image color picker and click the pixel.

No. This picker runs in any modern browser on desktop or phone, with nothing to install. To pick a color from anywhere on your screen, use the Pick from screen button, which works in Chrome and Edge. In other browsers, take a screenshot and paste it here.