Online color picker: find the color of any image

Who this color picker is for

This color picker is built for anyone who needs the exact code of a color that already exists in an image. You point at the pixel and get a value you can paste straight into your work. It is especially handy for:

• Graphic and UI/UX designers matching a reference, a mockup or a client's brand colors.
• Front-end developers who were handed a screenshot or a PNG instead of the design file and need the HEX code for their CSS.
• Social media managers and content creators keeping posts, thumbnails and stories inside the brand's color palette.
• Design, art and computer science students learning how what you see on screen maps to the numbers in a color code.
• Anyone who wants to identify the color of a logo, a product photo or a screenshot and reuse it somewhere else.

How to use the eyedropper, step by step

1. Load your image. Click the upload area and choose a file, drag and drop the image onto it, or paste from your clipboard with Ctrl+V (Cmd+V on a Mac). Pasting is the fastest route for screenshots: capture your screen and paste it right into the page.
2. Hover over the image. A magnifier loupe follows your cursor and shows the enlarged pixels around it, so you can see exactly what you are about to click.
3. Click the pixel. The color is picked and its codes appear instantly in five formats: HEX, RGB, HSL, HSV and CMYK, each with its own copy button.
4. Check the color name. The tool shows the closest named color, with a link to its page for more details and pairings.
5. Need a color outside the image? Use the “Pick from screen” button. It relies on the EyeDropper API, available in Chrome and Edge, and lets you sample any point visible on your screen, including other windows.

If you want the dominant colors of a whole photo rather than a single spot, the palette extractor does that automatically. Our guide on how to find the color of an image compares both approaches.

Tips for picking the exact color

The color you perceive in an area is not always the same in every pixel of it. A few habits prevent surprises.

Use zoom and the loupe

Zoom goes from 1x to 8x. On thin text, icons and outlines, zoom in before clicking: at 4x or more, each pixel is big enough for you to choose one in the middle of the stroke instead of one on its edge.

Watch out for anti-aliasing and JPEG compression

Edges of letters and shapes are smoothed with anti-aliasing, so the outline pixels blend the element's color with the background. That is why clicking the edge of a logo usually returns an in-between shade. Aim for the center of solid areas.

JPEG files add another problem: compression introduces small variations and noise in 8×8 pixel blocks, so an area that should be flat can contain slightly different pixels. Use a PNG or the original file whenever you can.

Sample a few points

Photos, gradients and textured surfaces have no single “true” color. Click three or four spots in the same region and compare the results in your history. If the values are close, keep the one that best represents the area; if they vary a lot, you are looking at a gradient, and the palette extractor may be a better fit.

What to do with the color once you have it

Getting the code is only the first step. The tool also helps you turn one color into a usable set.

Tints and shades

You get 10 tints (the color mixed with white) and 10 shades (the color mixed with black). They work well for button states such as hover, active and disabled, subtle backgrounds and borders, all within the same color family.

Color harmonies

From the picked color, the tool calculates six harmonies on the color wheel: complementary, analogous, triadic, tetradic, split-complementary and monochromatic. If you are not sure which to use, the color harmony guide explains where each one shines.

Contrast and accessibility

Before using the color for text or a button, make sure it has enough contrast against its background with the contrast checker. A brand color can look great in a banner and be unreadable in body copy.

History and export

Your last 14 picked colors are saved in your browser's history, so you can close the tab and pick up where you left off. When you are done, export the palette as JSON for code or a design system, or as PNG to share with your team or a client.

HEX, RGB, HSL, HSV and CMYK at a glance

Every format describes the same color in a different way. Take #FF5733 as an example:

• HEX (#FF5733): three hexadecimal pairs for red, green and blue. It is the most common format in CSS and design tools.
• RGB (rgb(255, 87, 51)): the same three channels written in decimal, from 0 to 255.
• HSL (hsl(11, 100%, 60%)): hue in degrees, saturation and lightness. It is the easiest one for building variations by hand.
• HSV (hsv(11, 80%, 100%)): similar to HSL but uses “value” instead of lightness; it is the model behind the color pickers in Photoshop and Figma.
• CMYK (cmyk(0%, 66%, 80%, 0%)): an approximation for print in cyan, magenta, yellow and black.

For a deeper look at each format, read the color codes guide. If you need LAB, OKLCH or a ready-made CSS variable, paste the code into the color converter.

Privacy: your image never leaves your device

All processing happens in your browser. The image is drawn onto a local canvas element and its pixels are read right there, with no upload to any server. That means you can use the picker on confidential material, such as unreleased layouts or screenshots of internal systems, without it ever being transmitted. Your color history is also kept only in your browser's local storage, and you can clear it at any time.