Sample an even patch
For a product color, start away from reflections and shadow edges. Compare two nearby pixels before choosing which color to use in your layout.
Click or tap an image to sample a pixel. See its HEX, RGB and opacity, refine the position with your keyboard, and copy the color code.
Pick a color
JPG, PNG, WebP · up to 10 MiB · 24 megapixels
Opening image…
Free · Your image stays in your browser.
For a product color, start away from reflections and shadow edges. Compare two nearby pixels before choosing which color to use in your layout.
Use HEX for a CSS color or design field. RGB gives you the red, green and blue components separately for tools with three numeric inputs.
A pixel from a transparent image can look lighter or darker on a different background. Check its opacity beside the coordinates before using the color on its own.
Choose a photo, screenshot or graphic, or use the yellow and blue sample.
Click or tap a color in the image. With the image focused, use the arrow keys to move the selection. You can also enter X and Y coordinates.
Copy HEX or RGB and paste it into your design tool or stylesheet.
The upper-left pixel is X 0, Y 0. X increases to the right and Y increases toward the bottom.
Yes. The display fits the page, and sampling uses the corresponding pixel in the decoded source image.
Focus the picture and use the arrow keys to move one pixel. Hold Shift to move ten pixels.
Lighting, shadows and anti-aliased edges create small color changes. Sample inside a flat area when you want a steadier value.
Opacity shows how much of the pixel is visible. A fully transparent pixel has 0% opacity and may show a zero RGB value after browser decoding.
Select the HEX or RGB value and copy it using your device’s controls.
Use JPG, PNG or WebP files up to 10 MiB and 24 megapixels.
The browser reads the image and samples pixels on your device.