To pick a color from an image, drop the image into the box above, move your pointer over it and watch the magnifier, then click to lock the color. The Selected Color panel shows its HEX, RGB, HSL, HSV and CMYK values, each with a Copy button. To get several colors at once, select Extract under Extract Palette.
How to use the color picker from image
- Add an image. Drag a JPG, PNG, WebP or other image onto the drop area, or select Select Images. Add several and switch between them with the thumbnails. You can also paste a screenshot with Ctrl+V (Cmd+V on a Mac).
- Inspect. Move your pointer over the preview. The magnifier enlarges the pixels under it, and the Pixel chip shows the exact coordinates.
- Pick. Click to lock a color. Its values appear in the Selected Color panel, and with Auto save clicked colors on, it's added to Saved Colors too.
- Copy or export. Use Copy next to any format, Copy All HEX for your saved colors, or extract a palette and download it as JSON or CSS. Saved colors stay in this browser until you select Clear.
How to get the exact HEX color from an image
For flat graphics such as logos, buttons and screenshots of a website, keep Sample Size on 1 x 1 pixel (exact). Select 100% to view the image at its real size, so each pixel on screen is one pixel in the file, and raise Magnifier Zoom to place the pointer precisely.
Avoid edges. Text and shapes are anti-aliased, which means the pixels along an edge are a blend of the shape color and the background. Pick from the middle of a letter or shape instead.
Photos are different: no two neighboring pixels are quite the same color, and JPG compression adds faint noise. Switch Sample Size to 5 x 5 average or 9 x 9 average to get the color a person actually sees in that area, such as the shade of a wall or a shirt.
HEX, RGB, HSL, HSV and CMYK: which code to copy
All five describe the same color. Which one you need depends on where you'll paste it.
| Format | Example | Use it in |
|---|---|---|
| HEX | #2563EB | HTML and CSS, Canva, most design apps |
| RGB | rgb(37, 99, 235) | CSS, code, Office color dialogs |
| HSL | hsl(221, 83%, 53%) | CSS when you want lighter or darker variants |
| HSV | hsv(221, 84%, 92%) | Color pickers in Photoshop (called HSB) and similar apps |
| CMYK | 84%, 58%, 0%, 8% | A starting point for print work |
The HEX code is what most people mean by an HTML color picker from image: paste it into CSS as color: #2563EB;. HSL is handy for building a set of shades, since you only change the last number. The CMYK value is a direct math conversion from RGB. Printers apply their own color profiles, so check a proof before a large print run. To convert codes you already have, use the RGB to HEX converter.
How to extract a color palette from an image
Set Palette Size between 4 and 16 colors (8 by default) and select Extract. The tool groups similar pixels and returns the dominant colors of the active image as swatches. Copy HEX copies the whole list, Download JSON saves it as data, and Download CSS saves it as CSS variables you can drop into a stylesheet.
Dominant means common, so a small accent color, such as a red logo on a large blue background, may not make the list. Raise the palette size, or click the accent and select Add Current Color to save it by hand. Turn the palette into a background with the CSS gradient generator.
Why a picked color can differ from the original design
- Compression. JPG and WebP files shift colors slightly, especially in smooth gradients. A logo saved as JPG may give
#2462EAinstead of the brand's#2563EB. Use the original PNG or SVG when you can. - Resized images. When an image is scaled down, neighboring colors blend. Pick from the largest version you have.
- Screenshots. A screenshot records what your screen displayed, which can differ a little from the source file on wide-gamut displays.
- Color names. The Name field is a descriptive label for the color. Copy the HEX or RGB value whenever you need an exact match.
Frequently asked questions
How do I get a color from an image?
Drop the image into the color picker at the top of this page and click the spot you want. The HEX, RGB, HSL, HSV and CMYK codes appear on the right, ready to copy.
Is there a free HEX color picker from image?
Yes, this one. It's free with no sign-up. Click any pixel and select Copy next to HEX to copy a code like #2563EB.
Can I use it as an RGB color picker from image?
Yes. Every picked color is shown in RGB format, such as rgb(37, 99, 235), with its own Copy button.
How do I pick a color from a website?
Take a screenshot of the page, then drop or paste the screenshot into the picker and click the color. Use the 1 x 1 sample size for flat interface colors.
What does Sample Size do?
It sets how many pixels are measured. 1 x 1 reads a single exact pixel, while 3 x 3, 5 x 5 and 9 x 9 return the average color of the surrounding area, which is steadier on photos.
Are my images uploaded?
No. The image color picker reads pixels in your browser, so your images never leave your device.