The short answer
Every color on a screen is a mix of red, green and blue light, and a color code is just a way of writing that mix down. To read it from a picture you need an eyedropper: a tool that looks at one pixel and reports its values. Add your image to the picker below, move over it until the magnifier shows the pixel you want in its center square, and click. The color is saved with its HEX, RGB and HSL code, and one click on a code copies it.
If you want the overall colors of a photo rather than one pixel, use the palette section of the same tool: it groups similar pixels and lists the 5, 8 or 12 most common colors with their codes.
Try it here: Image Color Picker
Open the full tool pageHEX, RGB and HSL: what the codes mean
RGB gives the amount of red, green and blue as three numbers from 0 to 255. HEX writes the same three numbers in base 16, two characters each, after a hash sign: FF is 255, 80 is 128, 00 is 0. So #FF8000 and rgb(255, 128, 0) are exactly the same orange. HSL describes the color the way people talk about it: hue as an angle on the color wheel (0 to 360), saturation and lightness as percentages. HSL is handy when you want a lighter or darker version of a color, because you only change the last number.
Design tools such as Figma, Canva and Photoshop accept HEX directly, CSS accepts all three, and office programs like Word and PowerPoint usually ask for RGB or HEX in their custom color dialog.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Pure red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Medium gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Bright blue | #1A73E8 | rgb(26, 115, 232) | hsl(214, 82%, 51%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
Other ways to pick a color on your device
Sometimes the color is not in a file but somewhere on your screen: a website, an app, a video frame. These options cover most situations without installing anything heavy.
- In this tool, Pick from screen (Chrome and Edge on a computer) turns the pointer into an eyedropper that works anywhere on the screen, not only inside the image.
- Windows: Microsoft PowerToys includes a Color Picker; once it is installed, Win+Shift+C opens it and copies the code of the pixel under the pointer.
- Mac: the built in Digital Color Meter app (in Applications, Utilities) shows the values under the pointer. Set it to display sRGB values if you need codes for the web.
- Browser developer tools: in Chrome and Edge, the color square next to any CSS color opens a picker with an eyedropper for the current page.
- Phones: take a screenshot, then add it to the picker on this page and tap the color. On a touch screen there is no magnifier, so zoom the page in first if the area is small.
Why the code you get may look slightly off
Two neighboring pixels in a photo are almost never identical. JPG compression, camera noise, light and shadow all change the values, so clicking on a red car can give #B3121B on one pixel and #A90F18 on the next. That is normal. For a photo, pick a few points in an evenly lit area and choose the one that looks right, or let the palette average the area for you.
Edges are the most common trap. Text and logos are smoothed (anti aliased), so the pixels at the border of a letter are a blend of the letter and the background. Always pick from the middle of a shape, which is exactly what the magnifier is for. Also avoid screenshots that were scaled, sent through a chat app or saved as low quality JPG: each step blends or shifts colors a little.
Screens and color profiles add another layer. Many phones and Macs display a wider range of colors than standard sRGB, and the same file can look a bit different on two screens. The picker reads the values the browser draws, which are sRGB, the space used by websites and most design tools. Transparent pixels are read as if they were on a white background.
How to build a palette from a photo
A photo you like already contains colors that work together, which makes it a good starting point for a website, a presentation or social media graphics. In the palette section choose 5, 8 or 12 colors. The tool splits all pixels into groups of similar colors (the median cut method) and shows the average of each group, the largest group first. Copy all puts every HEX code on a separate line, ready for a CSS file or a design tool.
Five colors give a simple scheme: usually one or two dominant background tones, a main color and an accent. Twelve colors keep subtler shades, useful for illustration or when you want to see what the image is really made of. If the palette is dominated by a large sky or wall, crop the photo to the part you care about first and add it again.
- Use the largest, calm colors for backgrounds and the smaller, saturated ones for buttons and highlights.
- Check text contrast: for normal body text the WCAG guideline asks for at least 4.5:1 between text and background, 3:1 for large text.
- Keep the codes in one place (a style guide or a list in your design file) so everyone uses the same values.
Tips for matching brand colors
If you need the exact color of a company or product, the most reliable source is its brand guidelines or an SVG version of the logo, because those contain the original values. A logo taken from a website screenshot or a photo of a printed sign will only get you close.
When you have to pick from an image, use the largest flat area of the logo, not text or thin lines, and prefer a PNG or SVG over a JPG. Pick three or four points; if they differ by only one or two units in each channel you have the right color. Remember that printed colors (CMYK, Pantone) and screen colors are defined differently: a HEX code taken from a photo of print is an approximation of how it looks on screen, not the official print value.