How to Pick a Color From an Image and Copy the HEX, RGB or HSL Code
You have a picture with the exact colour you need and no way to name it. Click the spot, copy the code, and use it in your design or CSS. A few details decide whether the value is trustworthy.
Add an image, click any spot and copy its HEX, RGB or HSL value. Everything stays in your browser.
Pick a colour from any image
- Open Image Color Picker and add a JPEG, PNG or WebP file with Select Image.
- Click the spot you want on the preview. The status line confirms the pixel, for example "Picked pixel at (212, 88)".
- Read the swatch and the three values: HEX, RGB and HSL.
- Press Copy beside the format you need. The button shows "Copied!" for a moment.
Which code to copy
| Format | Example | Use it in |
|---|---|---|
| HEX | #2F6FDE | CSS, design tools, brand guides, most colour fields |
| RGB | rgb(47, 111, 222) | CSS, code, and any tool that asks for three channel values |
| HSL | hsl(219, 74%, 52%) | CSS when you want to adjust lightness or saturation by hand |
The HEX code is written in capital letters with a leading hash, as in #2F6FDE, which pastes straight into CSS and most design programs. HSL is helpful if you plan to make a lighter or darker variation: change only the last number and the hue stays the same.
Why the colour may not match what you expected
Three things explain most complaints that "the code is slightly off".
- The picture is not the original pixels. The page shows a preview drawn at no more than 600 pixels wide. A larger image is scaled down for display, and scaling blends neighbouring pixels. On a flat area the result is the same, but on an edge or a fine texture the colour is an average. For an exact value, click inside a large flat region.
- JPG changes colours. JPEG compression alters pixels a little, particularly near edges and in text, so a logo saved as JPG may show colours a few steps away from the brand value. A PNG of the same artwork is more reliable, as the article on JPG vs PNG vs WebP explains.
- Shadows, gradients and photos contain thousands of shades. Clicking one spot gives one sample. Two clicks a few pixels apart can give two slightly different codes.
The tool reads a single pixel per click. It does not build a palette, so to collect five colours, click five times and copy each as you go.
Transparent pixels
If you click a semi-transparent area of a PNG or WebP, the status line adds the alpha, as in "alpha: 50%", and the RGB and HSL fields switch to rgba() and hsla() forms with an opacity value. The HEX field stays a plain six-digit code that does not include transparency. So for a see-through pixel, copy the RGB or HSL version if you need to keep the opacity.
Getting reliable brand colours
- Start from the best source you have: a PNG or the original design file, not a photo of a logo.
- Click the middle of a large solid area, away from edges and anti-aliased borders.
- Pick the same area twice. If the values agree, the area is flat and the sample is dependable.
- Paste the value into your design tool and compare it against the original on screen.
If the brand has an official colour specification, use that over a sampled value. A colour picked from a screenshot or a web image reflects how that file was exported, and printing from screen values can look different on paper.
A short note on screens and printing
The code you copy describes what is stored in the file, not how it will look. Different monitors, brightness settings and colour profiles show the same code a little differently, and ink on paper is another matter altogether. For screen work, such as websites and slides, the sampled code is usually all you need. For print, ask the printer for their colour requirements and treat a sampled value only as a starting point.
Common uses
- Match a button or heading to a photo. Pick a dominant colour from the picture so the text colour feels related.
- Check contrast. Copy two colours and test them in a contrast checker before you commit to a text and background pair.
- Fill a transparent area. Pick the shade you want and use it as the background colour when converting a PNG to JPG, as in this guide to converting without a white background.
- Document a design. Record the hex codes of a palette in your notes.
If the image will not load or looks wrong
- Only JPEG, PNG and WebP files are accepted. For HEIC photos, use HEIC to JPG first, or AVIF to PNG for AVIF.
- An image that looks sideways can be turned with Rotate Image before picking.
- If you need to know the size of the picture you loaded, Image Size Checker reports it, and the guide on checking image dimensions goes through the details.
The image is read in your browser with the canvas and is not uploaded, so you can sample colours from files you would rather keep private.
Frequently Asked Questions
Which image formats can I pick colours from?
JPEG, PNG and WebP files. Convert HEIC or AVIF images first.
Why is the colour slightly different from the original artwork?
The preview is scaled to at most 600 pixels wide, and JPG compression shifts pixels. Click in a large flat area of a PNG for the most reliable value.
Can it build a colour palette automatically?
No. It samples one pixel per click. Click each area you want and copy the values.
How are transparent pixels handled?
The status line shows the alpha percentage, and RGB and HSL switch to rgba and hsla forms. HEX stays a plain six-digit code without transparency.
Does the picker upload my image?
No. The image is read in your browser using a canvas.
What does the HEX code look like?
A hash followed by six capital letters or digits, such as #2F6FDE.