Image Color Picker
Click any pixel in a photo or screenshot to get its HEX, RGB and HSL code and its color name, or pull out the image's whole color palette.
Drag an image here or click to select
PNG, JPG, WebP or GIF up to 25MB. You can also paste a screenshot.
How to pick a color from an image
- Drop an image in the box above, choose a file, or paste a screenshot
- Move over the image: the magnifier shows the exact pixel under the cursor
- Click to pick the color; on a phone, drag and let go
- Copy the HEX, RGB, HSL, OKLCH or CMYK code you need
What color is this? Get the color name
Every picked color gets three names. The first is a plain description such as "Muted blue" or "Dark red", worked out from how light, how strong and what hue the color is, which answers "is this teal or green?" quickly. The second is the closest match from a list of about 5,000 named colors, with a note on how close it is. The third is the nearest CSS color name, such as tomato or steelblue, for when you are writing CSS and a named color is close enough.
HEX, RGB, HSL, OKLCH and CMYK codes
HEX (#E4572E) is what most design tools and websites expect. RGB gives the same color as red, green and blue from 0 to 255. HSL describes it as hue, saturation and lightness, which makes it easy to make a lighter or darker shade by hand. OKLCH is the modern CSS format where the same lightness value really looks equally light across hues; open it in the OKLCH Color Picker to adjust it. CMYK is a rough print conversion: for exact print colors, ask your printer for a proof. All values are in sRGB, the color space screens and the web use.
Pick the right pixel: magnifier and sample size
The magnifier shows an 11 × 11 grid of the pixels around the cursor, with the sampled area outlined. In logos, screenshots and flat graphics, 1 px picks the exact color. In photos, neighbouring pixels differ because of light, texture and JPEG compression, so 3×3 or 5×5 averages them into the color your eye actually sees. You can also use the arrow keys to move one pixel at a time (Shift moves ten) and Enter to pick.
Get a color palette from an image
The palette under the image lists the main colors of the whole picture, from 3 to 12, and how much of the image each one covers. The colors are grouped by how similar they look, not by their raw numbers, so two shades that look the same end up as one color. Click a swatch to see its codes and name, or copy the whole palette as HEX codes, CSS variables or a Tailwind color list. To get the colors a website uses instead, try the Website Color Extractor.
Check contrast before you use a color
Each picked color shows its contrast ratio against white and against black. A ratio of 4.5:1 or more passes WCAG AA for normal text, and 3:1 is enough for large text and icons. It is a quick way to see whether a brand color can carry white text or needs dark text.
Private: the image stays on your device
The image is read by your browser and never uploaded. That makes it safe for screenshots of private chats, client work and unreleased designs, and it keeps working on a slow connection once the page has loaded.
More Color and Image Tools
Pull the colors from any website with the Website Color Extractor, fine-tune a color in the OKLCH Color Picker, or flip an image's colors with Invert Image Colors. For animated GIFs, use Resize GIF.
FAQs
How do I find out what color something in a picture is?
Drop the picture above and click on the color. You get its plain name, like "Dark teal", the closest of about 5,000 named colors, and its HEX, RGB, HSL, OKLCH and CMYK codes. On a phone, drag your finger over the picture and let go on the spot you want.
How do I get the HEX code of a color in an image?
Click the color in the image. The HEX code is shown at the top of the result, with a copy button next to it and next to every other format. Every color you pick is kept in the Picked colors list, and Copy all copies their HEX codes at once.
Why is the color I picked slightly different from what I expected?
Photos are made of many slightly different pixels, especially in JPEGs and in shadows. Switch the sample size to 3×3 or 5×5 to average the pixels around the point, which gives the color you see rather than one noisy pixel. The magnifier shows exactly which pixels are used.
Can I get a color palette from an image?
Yes. Below the image, the tool finds the main colors of the whole picture and shows how much of it each one covers. Choose from 3 to 12 colors, then copy them as HEX codes, CSS variables or Tailwind colors.
Can I pick a color from my screen, outside the image?
In Chrome, Edge and Opera on a computer, press Pick from screen and click anywhere on your screen, including other apps. Other browsers do not allow this yet; take a screenshot and paste it here instead.
Does it work with screenshots?
Yes. Take a screenshot, then press Ctrl+V (Cmd+V on a Mac) on this page and it opens straight away. Screenshots are the most accurate source, because they have no camera noise or compression.
Does this color picker work on iPhone and Android?
Yes. Choose a photo from your library, then drag over it: a magnifier appears above your finger so you can see the exact pixel, and the color is picked when you let go.
Is my image uploaded?
No. The image is opened by your browser and every color is read on your own device. Nothing is sent to a server, so it is fine to use with private screenshots and unreleased designs.