Image Color Picker: Extract color codes from images

Load the image into the Image Color Picker and click the spot whose color you need. The tool instantly shows that pixel's HEX code, RGB value, and HSL value. Use “Copy” to copy the value. Clicking the sun in the example image gives #ffd166. In a HEX code, each pair of digits represents red, green, and blue (ff = 255, d1 = 209, 66 = 102), so #ffd166 is rgb(255, 209, 102) and hsl(42, 100%, 70%).

An eyedropper, also called a color picker, samples a color at a point and returns its color code. This Image Color Picker works online in your browser, including on your phone—no app needed. On your phone, tap a point and drag your finger; the magnifier shows the pixels beneath it. With a keyboard, use the arrow keys to move the selection by 1 pixel (or 10 with Shift), and press Enter to save the color to your history.

No. The image is placed on a canvas in your browser and analyzed there. Nothing is uploaded or stored, and your selected color history stays in this tab. You can check the Network tab in your developer tools: loading and clicking generate no requests.

Take a screenshot (Windows: Windows+Shift+S; Mac: Cmd+Shift+4, with Ctrl to copy to the clipboard) and paste it into the tool with Ctrl+V (Mac: Cmd+V). Then click a spot and copy its color code. This lets you pick colors from a website, app, or game without a browser extension.

There are four common reasons. First, JPG images use lossy compression, so neighboring pixels can differ slightly. Second, the browser may convert embedded color profiles (such as Display P3) to sRGB, while other programs show the raw value. Third, a screenshot shows the color after your display’s color management. Fourth, the tool analyzes images over 36 megapixels at a reduced size. For photos, set averaging to 3 × 3, 5 × 5, or 11 × 11 pixels: the tool then averages 9, 25, or 121 pixels around the pointer instead of sampling an outlier. For solid colors, such as those in a logo, “1 pixel” is the right choice.

Load the image to see the palette directly below it. Choose 2 to 12 colors and see each one's HEX code and share of the image. To do this, the tool samples at least 90,000 evenly distributed pixels (smaller images in full), skips transparent pixels, and groups colors using the median cut method. For photos, the palette is an approximation. “Copy HEX list” gives you a list; “Copy CSS variables” gives you lines such as --color-1: #08203a; for a :root block, which you can use with var(--color-1).

Alongside the color values, the tool shows the matching CSS color name or, if there is no exact match, the closest CSS color name and its HEX value. For #ffd166, that is khaki (#f0e68c), so it is only an approximation. The tool does not provide RAL, Pantone, NCS, or CMYK values. Screen colors also depend on lighting and the camera, so always check wall paint or other paint against a physical color sample. The Color Picker shows HSV and CMYK for a known color.

The tool calculates the color’s WCAG contrast ratio against white and black. Normal text needs at least 4.5:1 (AA); 7:1 (AAA) is excellent, while large text needs 3:1. On #ffd166, black text achieves 14.56:1, but white text only 1.44:1. To check any two colors, use the Contrast Checker.

PNG, JPG, WebP, AVIF, GIF, BMP, and SVG, depending on what your browser can read. For GIFs, the first frame is analyzed. HEIC and HEIF files, as saved by iPhones, can only be opened in Safari; otherwise, export the photo as a JPG first. Files can be up to 40 MB. For semi-transparent pixels, the tool also shows the HEX value with an alpha channel, for example #ff000080. Fully transparent pixels have no color, and the tool will let you know.