Pick colors from an image
Select a pixel to read its color values, or use the suggested palette as a starting point for a design. Copy the HEX, RGB, or HSL format you need.
Point sampling reads the browser-decoded image at full size. The palette is an approximate summary from a thumbnail, so use it to explore colors rather than as an exact count of pixels.
Still JPG, PNG or WebP images, up to 10 MiB and 12 megapixels each. Files stay in your browser.
How do I get color codes from an image?
- Choose a JPG, PNG or WebP image.
- Select a point on the image, or enter X and Y pixel coordinates starting at 0. Focus the image and use the arrow keys to move the selection point.
- Check the HEX, RGB, HSL and opacity values, then copy the format you need.
- You can also select a main color or copy the full palette as a design reference.
To check the picker with a known sample,download this red PNG sample made for this site, pick the colors at X = 64, Y = 64 and X = 192, Y = 64, then compare them with the format examples below.
Pixel samples and the main palette
A point selection reads a pixel from the full-size image decoded by your browser. The main palette is sampled from a thumbnail, where similar colors are grouped and transparent or semi-transparent pixels are skipped. It may contain fewer than 8 colors and does not show exact pixel percentages.
HEX, RGBA and HSL values include opacity for semi-transparent pixels. A fully transparent pixel has no visible color; the browser may return RGB values of zero.
The image color profile, browser and display can affect how colors appear. This tool does not measure print CMYK, physical paint or calibrated color values.
Images and privacy
Each image can be up to 10 MiB and 12 megapixels, with no edge over 12,000 pixels. Animated images, HEIC and PDF are not supported. Images are processed in your browser and are not uploaded or saved automatically. Clear the image or leave the page to remove it.
Copying requires browser clipboard permission. If it does not work, select the color code text and copy it manually.
To adjust an image first, use Image crop and resize. If the file is too large, use Image compressor.
Pick a Color From an Image and Choose the Value You Need
Back to toolUse a point sample for one specific pixel
Choose a still image and select the point whose color you want to inspect. You can also enter X and Y coordinates, which start at 0 from the image's top-left corner. The displayed point sample reads a pixel from the full-size image decoded by your browser.
Use the red sample PNG linked in the instructions: select X = 64, Y = 64 and then X = 192, Y = 64 to compare two source pixels. Coordinates start at 0 and refer to the original image, not the smaller thumbnail used for the palette. A point on an antialiased edge can return a blended pixel, so click inside a solid area when you need a representative color.
Keyboard users can focus the image and move the sample point with the arrow keys. Check the coordinate fields when you need to revisit a particular pixel or compare an exact location with another image of the same dimensions.
Choose HEX, RGB, or HSL for the next step
HEX is a compact notation commonly used in stylesheets and design tools. RGB gives red, green, and blue channel values. HSL expresses hue, saturation, and lightness, which can make it easier to adjust the character of a color. Choose the format accepted by the software or documentation where you will use it.
If the selected pixel is partly transparent, the result includes its opacity: HEX includes an alpha channel, RGB is shown as RGBA, and HSL includes alpha. A fully transparent pixel has no visible color; its RGB channels may be returned as zero by the browser.
Use the copy control for the format you need. Clipboard access depends on browser permission. If copying is unavailable, select the displayed text and copy it manually.
Treat the suggested palette as a starting point
The main palette is generated from a thumbnail whose longest edge is at most 256 pixels. Similar colors are grouped, and transparent or semi-transparent pixels are skipped. The tool returns up to eight representative colors, but it can return fewer when there are not enough distinct groups.
This summary is not an exact list of every color and does not report the percentage of the image occupied by each color. Small details may disappear in the thumbnail, and nearby colors may be combined. Use point sampling when you need the value of a particular pixel.
For a simple design reference, copy the palette and then check each candidate color against the original image or your design system. Do not use the palette as a measurement of brand-color frequency or a color accessibility audit.
Check color appearance before relying on a value
The value describes pixel data decoded by the browser. An embedded color profile, browser color handling, display settings, and viewing conditions can affect how the image looks on screen. The numerical value and the visible appearance are related, but they are not a calibrated physical measurement.
This tool does not provide print CMYK values, measure physical paint, or certify calibrated color. For print production or regulated color matching, use a workflow designed for that purpose and confirm the receiving application's profile settings.
When documenting a sample, keep the image, coordinate, format, and opacity together. This makes it easier for another person to locate the same pixel and understand whether the value includes transparency.
Keep the image private and copy the result
Images are processed in your browser and are not uploaded or saved automatically. Clear the image or leave the page to remove it from the current work session. Download or record the values you want to keep before closing the page.
The tool accepts one still JPG, PNG, or WebP image at a time, up to 10 MiB, 12 megapixels, and 12,000 pixels on either edge. Animated images, HEIC, and PDF are not supported inputs.
If a color code does not copy, first check whether the browser allowed clipboard access. You can still select the text manually. The tool does not create a downloadable palette file or save a history of sampled colors.
Questions about picking image colors
Why does the palette show fewer than eight colors?
The palette groups similar colors from a small thumbnail and skips transparent and semi-transparent pixels. If the image has fewer distinct groups after sampling, the result contains fewer colors.
Why does a sampled color look different on another screen?
The code represents decoded pixel channels, while the displayed appearance can depend on the image profile, browser, and screen settings. The tool does not calibrate monitors or certify a physical color match.
Can I sample a transparent pixel?
Yes. Its result includes opacity, but a fully transparent pixel has no visible color. The browser may return its RGB channels as zero. The suggested palette skips transparent and semi-transparent pixels.
Input limits
Select one still JPG, PNG, or WebP image up to 10 MiB, 12 megapixels, and 12,000 pixels on either edge. Animated images, HEIC, and PDF files are not supported. Point sampling reads the full-size decoded pixel; palette sampling uses a thumbnail with a longest edge of at most 256 pixels.
Updated