When a design uses a color you want to reuse, guessing the value by eye is slow and inconsistent. A color picker from an image reads the pixel you choose and returns its HEX, RGB, and HSL values. Open the image color picker, load a photo or screenshot, click the color, and copy the value you need.
What a color picker from an image does
An image color picker samples a selected pixel from a local image and converts that pixel into common color formats:
- HEX is convenient for CSS, web design, and design tokens.
- RGB is useful when a design tool or code workflow expects red, green, and blue channels.
- HSL makes it easier to reason about hue, saturation, and lightness when creating a variation.
The tool keeps one active swatch at a time. Click another point to replace the current sample, then copy the new value. This is useful for matching a background, checking a product photo, or turning a screenshot color into a reusable style value.
How to pick a color from an image online
1. Choose a clear source image
Use the original photo or a high-resolution screenshot when possible. A compressed thumbnail, a blurry preview, or an image with a color filter may not contain the exact color you want to reproduce. Keep the original file unchanged so you can sample it again later.
2. Open the online color picker
Open the color picker from image tool and select a JPG, PNG, or WebP file. The tool processes the image in your browser, so the image does not need to be uploaded to a server for the sampling step.
3. Click the target pixel
Click the part of the image whose color you want to identify. For a flat background, sample away from edges and shadows. For a product or illustration, zoom in mentally by using a larger source image and choose a representative area rather than a highlight, reflection, or anti-aliased border.
4. Copy the color code
Copy the HEX value when you need a CSS color, or use RGB and HSL when the next tool or design system expects those formats. Paste the value into your code, design file, brand notes, or a style variable and review it in the destination where it will actually be used.
How to get a more reliable color sample
The visible color in a photo is affected by lighting, shadows, reflections, compression, and the display used to view it. Sampling a single pixel gives you the value of that pixel; it does not recover an original brand color that may have been changed by photography or color grading.
For a flat graphic, choose a central area with consistent fill. For a photograph, take several samples from the same material and compare them. Avoid edges where two colors blend, text that has been anti-aliased, and glossy surfaces where a highlight may be much lighter than the underlying material.
If the source is too large to inspect comfortably, use the image resizer to make a working copy while keeping the original. If the composition contains distracting borders, use the image cropper first. Do not replace the source until you have finished sampling the colors you need.
HEX, RGB, or HSL: which value should you use?
Choose the format based on the next step rather than treating one format as universally better.
Use HEX for web styles
HEX is compact and common in CSS, design tokens, and documentation. A value such as #2F80ED can be pasted directly into a stylesheet or a color variable.
Use RGB for channels and transparency workflows
RGB exposes the red, green, and blue channel values separately. It can be useful when you are comparing channel values, passing a color into a graphics workflow, or extending it to an rgba() value with a separate alpha setting.
Use HSL for controlled variations
HSL separates hue, saturation, and lightness. It can make it easier to create a lighter background, a muted border, or a darker hover state while keeping the basic hue recognizable.
Common color picking mistakes
Sampling a shadow instead of the base color
A shadow can make a neutral surface look gray or a colored surface look much darker. Sample a well-lit, representative area and compare a few nearby pixels before deciding which value belongs in the design system.
Picking an edge pixel
Edges often contain blended pixels from anti-aliasing or compression. Move the pointer into the center of the object or background so the value describes the actual fill instead of the transition between two regions.
Sampling a screenshot with a display filter
Night mode, HDR, color profiles, and browser extensions can change how an image appears on screen. When the color matters, sample the original image file or an unmodified screenshot and verify the result in the destination app.
Treating one sample as a full palette
The picker identifies the color you click and keeps one active swatch. It does not automatically infer the whole palette or determine the original design token. Sample the key colors one at a time and record their role, such as background, text, border, or accent.
Forgetting the output context
A sampled color can look different beside another background or on another display. Test the copied value in the actual page, component, ad, or design file where it will be used. Contrast and readability matter as much as numerical accuracy.
A simple design handoff workflow
Use this sequence when a color needs to move from an image into a product or campaign:
- Keep the original photo or screenshot as the reference.
- Sample the background, primary subject, text, and accent colors separately.
- Record each HEX value with a meaningful role instead of only a number.
- Use RGB or HSL when the implementation or variation workflow needs them.
- Check contrast, hover states, and the final display size before publishing.
If the image is part of a broader asset workflow, use the image compressor only after sampling so compression does not change the reference you are measuring. Convert the final delivery copy with PNG to WebP when the destination supports it, but keep the source image for future color checks.
FAQ
How do I pick a color from an image?
Open the online image color picker, select a JPG, PNG, or WebP image, click the pixel you want, and copy its HEX, RGB, or HSL value.
How do I find a HEX color code from an image?
Load the image in the HEX color picker from image tool, click a representative pixel, and copy the HEX value shown for that sample.
Can I pick a color from a screenshot?
Yes. A screenshot can be sampled like any other supported image. For the closest result, use an uncompressed screenshot and avoid sampling blended edges, shadows, or display-filtered colors.
Can I pick multiple colors?
Yes, but one swatch is active at a time. Click each target pixel in turn and record or copy the value before selecting the next one.
Is the color picker private?
The color sampling step runs in your browser after the page loads. Your image is not required to be uploaded to a server for the pixel-reading operation.
Continue with the image tools
Use the image color picker when you need a code value from a photo or screenshot. Use the image cropper to remove distracting borders, the image resizer to prepare a working copy, and the image compressor for the final delivery file.