Color Picker from Image
Hover over any pixel. See the HEX, RGB and HSL instantly. Copy it. Done.
Drop your image here
Then click anywhere on the image to pick a color.
How to pick a color from an image
Drop your image
Drag in any JPG, PNG or WebP. It loads in your browser — nothing is uploaded.
Hover over it
Move your cursor over the image. The color under your cursor is shown in real time.
Click to lock
Click any pixel to select that color and copy it to the clipboard.
Copy the code
Pick your format: HEX, RGB or HSL. Copy and paste wherever you need it.
HEX vs RGB vs HSL: which format do you need?
HEX is the format you need for most web work. It is what you paste into CSS, design tools like Figma, and most color input fields. Short, compact, widely supported.
RGB is useful when you need to work with individual channel values — adjusting brightness, mixing colors programmatically, or using colors in canvas or WebGL code. Also the format most design applications use internally.
HSL is the most human-readable format. Hue (the color), Saturation (how vivid), Lightness (how dark or light). If you want to create color variations — lighter shades, darker shades, more muted versions — HSL is the easiest format to adjust by hand.
The colour you pick is not always the colour that was there
Sampling a pixel looks like the most exact operation in image editing. You click, you get a number. In practice several things sit between the original scene and that number, and knowing about them saves a lot of confusion when a picked colour does not match what you expected.
JPEG stores colour at lower resolution than brightness
Most JPEG files use chroma subsampling, which records full detail for brightness but only half or a quarter of the detail for colour. The human eye is far more sensitive to brightness than to hue, so this saves a lot of space with little visible cost. It does mean that the colour of any single pixel near a sharp edge is partly borrowed from its neighbours.
This is why picking a colour right at the boundary between a red logo and a white background can give you a muddy pink that exists nowhere in the design. Sample well inside a flat area instead, and the number will be reliable.
Compression moves colours slightly
A heavily compressed JPEG shifts pixel values across the whole image, not only at edges. Two pixels that were identical in the original can differ by several points after compression. If you need the exact brand colour from a logo, take it from a PNG or SVG, never from a compressed screenshot.
Screenshots are not the original
A screenshot records what your display showed, after any colour management your operating system applied. On a calibrated wide gamut monitor that can differ noticeably from the file itself. For exact values, sample the source file rather than a picture of the screen.
Hex, RGB and HSL describe the same colour
The three notations you will see are interchangeable, and each is convenient for something different.
Hex is simply RGB written in base sixteen. In #f59e0b the f5 is the red value 245, the 9e is green 158 and the 0b is blue 11. Once you notice that, reading a hex code stops feeling like reading a code.
HSL is the one worth learning if you are building a palette. Because hue, saturation and lightness are separate, you can produce a lighter version of a colour by changing one number, which is far more predictable than nudging three RGB channels and hoping.
Sampling one pixel or an area
A single pixel is the right choice for flat colour: a logo, a solid background, a filled shape. It gives the exact value with no interpretation.
For anything textured, a single pixel is misleading. Sampling one point of a brick wall, a sky with cloud, or skin gives you one of thousands of slightly different values. This picker reads single pixels and also lists the dominant colours of the whole image. For the average colour of one textured area, crop to that area and run it through the color palette tool, which is closer to what your eye does when it calls that wall beige.