Upload an image and click anywhere on it to extract the exact HEX, RGB, and HSL color values. Perfect for designers and developers.
Click to upload or drag and drop
PNG, JPG, GIF, WebP supported
Click anywhere on the image to pick a color
Click on image to pick a color
Open a screenshot, a logo or a photograph, then click anywhere on it to read the exact colour of that pixel. The value appears three ways at once — HEX for CSS and design files, RGB for code, HSL for adjusting by hand — each with its own copy button. The image is read by your browser and never uploaded.
Runs in your browser. This tool runs entirely in your browser using JavaScript. Nothing you enter or open here is uploaded to our servers.
Click the upload area and choose a file, or drag one onto the page. Any format your browser can display works — PNG, JPG, GIF and WebP among them.
Click directly on the preview. The tool reads the single pixel under your cursor, so aim carefully — click the middle of a solid area rather than an edge.
HEX, RGB and HSL all describe the pixel you clicked. The swatch beside them confirms you sampled what you meant to.
Each value has its own copy button. HEX for CSS and design tools, RGB for code, HSL when you want to adjust lightness or saturation from there.
Real input and the output this tool produces for it.
| Example | Input | Result |
|---|---|---|
| Brand blue from a logo | Click the blue area of a PNG logo |
#0ea5e9 · rgb(14, 165, 233) · hsl(199, 89%, 48%) |
| Background from a screenshot | Click an empty area of the page |
#f8fafc · rgb(248, 250, 252) |
| Sky tone from a photo | Click a clear region of sky |
An HSL value you can lighten or darken for a gradient |
| Body text colour | Click the thickest part of a letterform |
The text colour rather than an anti-aliased edge |
All three describe the same colour; they differ in what they make easy.
| Format | Looks like | Best for |
|---|---|---|
| HEX | #0ea5e9 | CSS, design tools, brand documents — the most portable form |
| RGB | rgb(14, 165, 233) | Code that manipulates channels, and anywhere you need to add transparency |
| HSL | hsl(199, 89%, 48%) | Adjusting by hand — change lightness alone and the hue stays put |
The tool reports the literal value of one pixel, which is occasionally not the colour your eye reads. There are a few common reasons.
When you need a brand's colours and have only a logo file, sample each distinct area separately and write the HEX values down as you go — the tool keeps no history, so a value is lost once you pick the next one.
Prefer a PNG or SVG export of the logo over a JPEG. JPEG compression shifts colours slightly, and a brand blue sampled from a compressed screenshot will be a little off from the real one.
Once you have one or two anchor colours, the colour palette generator can build harmonies around that kind of hue, and the gradient generator turns two of them into copy-ready CSS.
Read the exact HEX out of a supplied logo instead of eyeballing it in a design tool.
Sample the background, text and accent colours of an interface you are recreating.
Pick several colours from an image whose mood you want a design to carry.
Confirm whether two areas that look the same really are the same value.
Read HEX values straight out of an exported mockup image.
Sample a background colour so an added element blends into it exactly.
Generate complementary, analogous and triadic harmonies once you have an anchor colour.
Color Palette Generator →Paste your picked HEX values in and copy production-ready CSS.
Gradient Generator →Convert values you already have without re-sampling an image.
HEX to RGB Converter →The reverse trip, for values coming out of code.
RGB to HEX Converter →Crop to the region you care about so each pixel is easier to hit.
Image Cropper →Finish a brand set once the colours are settled.
Favicon Generator →Help others discover this tool by sharing it on social media
Paste this iframe into your own page to give your readers the working tool without sending them away. The embed carries a "Powered by TechBelievers" link and needs no API key.
<iframe src="https://techbelievers.com/tools/color-picker-from-image/embed?theme=light" width="100%" height="600px" title="Color Picker from Image by TechBelievers" style="border:1px solid #e2e8f0;border-radius:0.5rem"></iframe>