How do I get the hex code of a color in an image?

Drop, paste or choose the image above, then click the spot you want. The hex code of that pixel appears next to the image with its RGB, HSL and CMYK values, and a click on any of them copies it. For photos, switch the sample size to a 3 × 3 or 5 × 5 average so a single dark or bright speck does not throw the value off.

Can I see the name of the color I pick?

Yes. Every color you pick gets the nearest name from a list of 4,362 English color names, matched with CIEDE2000, the formula for how different two colors look to the eye. The tool also shows how close the match is (ΔE under 1 means it looks the same) and the two next closest names.

How do I find a color's name from its hex code?

Type or paste the hex code into the field under The color, no image needed. You can also paste a code like #1F5F6B anywhere on the page. The nearest named color appears with its distance and two alternatives, along with the RGB, HSL and CMYK values.

Can I pick a color from my screen instead of an image?

In Chrome and Edge on a computer, yes: the Pick from screen button opens the browser's eyedropper, and you can click any pixel on your screen, even outside the browser. Firefox and Safari do not offer this to websites, so there the button is hidden: take a screenshot and paste it with Ctrl+V or Cmd+V instead.

Why is the color I picked darker or grayer than the object looks?

Because the picker reads the pixels, and the pixels hold the light that reached the camera. Shade, reflections and white balance shift the color of every surface in a photo, and your brain corrects for them when you look. Pick from the part of the surface in even light, use an average sample, and if you need the true color of a product or a wall, photograph it next to a white card or use the maker's published code.

Can I get the Pantone match of a hex color?

Not an official one. Pantone libraries are licensed, and a color on a screen never matches ink on paper exactly. Give your printer the hex code and ask for the closest swatch from their physical Pantone guide, or for a printed proof.

Does the color picker work on iPhone?

Yes. It runs in Safari and Chrome on iPhone and Android: choose a photo from your library or take one with the camera, then drag your finger over the image. A loupe above your finger shows the pixels you are on, and the color is saved when you lift your finger.

Is my image uploaded to a server?

No. The image is read by your browser and drawn on a canvas on your device, and nothing is sent anywhere. You can load the page, turn off your connection and keep picking colors.

Color Picker from Image: Hex Code and Color Name Finder

How to pick a color from an image

Load the image. Drop a file on the box, click it to choose one, or paste a screenshot with Ctrl+V (Cmd+V on a Mac). On a phone you can also take a photo with the camera. JPG, PNG, WebP, GIF, SVG and AVIF all work in current browsers.
Aim with the loupe. As you move over the image, a magnifier shows the pixels around the pointer, with the sampled area outlined, so you can hit a thin line or a single letter. On a touch screen, drag your finger and the loupe sits above it, where your finger does not cover it.
Click to save the color. The hex code, RGB, HSL and CMYK values and the nearest color name appear next to the image, and the color is added to your list with a numbered marker on the image. Click any code to copy it.
Build a set. Pick up to ten colors, then copy all their codes at once or open them in the color palette generator to lock, adjust and export them.

The picker reads the pixels of your file, not your screen. That makes it exact: the value you get is the one stored in the image, whatever your monitor's brightness or night mode.

One pixel or an average

For a logo, an icon or a flat illustration, sample a single pixel: every pixel of a flat area holds the same value, and one is enough. For a photo, switch to a 3 × 3 or 5 × 5 average. Light, grain and JPEG compression make neighboring pixels of the same surface differ by a few points, so one pixel can land on a dark speck or a highlight. The average of 9 or 25 pixels is closer to the color you actually see. Avoid edges: a pixel on the border between two colors is a blend of both, especially in resized images.

Hex, RGB, HSL or CMYK: which code to use

All four describe the same color in different ways. Which one you need depends on where the color is going.

Code	Example	What it is	Use it in
HEX	`#C5A958`	Red, green and blue as three pairs of hexadecimal digits, from 00 to FF	CSS, HTML, Figma, Canva, WordPress, brand guidelines
RGB	`rgb(197, 169, 88)`	The same three channels as numbers from 0 to 255	CSS, Photoshop, code that needs numbers, screens in general
HSL	`hsl(45, 48%, 56%)`	Hue on a 360 degree wheel, saturation and lightness in percent	CSS, when you want lighter or darker shades of one color
CMYK	`0, 14, 55, 23`	Cyan, magenta, yellow and black ink, in percent	A first conversation with a printer, never as final print values

HEX and RGB are exact translations of each other: #C5A958 is 197, 169, 88 written in base 16. HSL is a rearrangement of the same values that is easier to adjust by hand. CMYK is different: there is no single correct CMYK value for a screen color, because the result depends on the paper, the inks and the press. The CMYK shown here is the plain textbook conversion, which ignores all of that, so treat it as a starting point and ask your printer for a proof.

How the color name is found

Most colors on a screen have no official name. There are 16.7 million hex codes, and even large naming lists cover a few thousand of them. So the picker looks for the closest named color, not an exact one, and tells you how close it is.

The names come from a list of 4,362 English color names from the open color-names project by David Aerne. To find the nearest one, both colors are converted to CIE Lab, a color space designed around human vision, and compared with CIEDE2000, the formula the CIE recommends for how different two colors look. A plain distance between hex values would pair colors that look nothing alike, because the eye is much more sensitive to some changes than others.

The difference is shown as ΔE (delta E):

ΔE	What it means
Under 1	The two colors look the same to most people, side by side
1 to 2	A trained eye can see the difference when the two are next to each other
2 to 5	Clearly close, the same color family and shade
Over 5	The name is the nearest available, but the color is visibly different

The names are descriptive labels for talking about a color or naming a design token. They are not paint, Pantone or RAL references, and you cannot order ink by them.

Why the picked color looks different from the photo

People often expect the color of an object and get the color of the pixels. A white wall in the shade is stored as gray or light blue. A red car in the sun has pink highlights and near-black shadows. The camera records the light that reached it, and the brain corrects for the lighting when you look at the scene. The picker reports the pixels as they are, which is what you want for matching a design, and not always what you want for naming a paint.

A few other things change the values:

Compression. JPEG and WebP save space by smoothing color, especially around edges and in small images. Screenshots of a screenshot lose more each time. Use the original file or a PNG when you can.
Resizing. Shrinking an image blends neighboring pixels, so a thin line or small text takes on the color of its background.
Wide color. Photos from recent phones are often saved in Display P3, a wider range than standard sRGB. Browsers convert them to sRGB to read the pixels, so the most saturated reds and greens come back slightly less vivid. Every hex code on the web is sRGB, so the converted value is the one you can use.
Transparency. In a PNG with transparent areas, the picker reports the color of the visible part and shows the opacity. A fully transparent pixel has no visible color at all.

Pick a color from your screen, not just an image

In Chrome, Edge and other Chromium browsers on a computer, the Pick from screen button opens the browser's own eyedropper: click anywhere on your screen, in any window, and the color comes back here with its name. Firefox and Safari do not offer this to web pages yet, so the button is hidden there. The fallback works everywhere: take a screenshot (Windows + Shift + S on Windows, Cmd + Shift + 4 on a Mac, side and volume up on an iPhone) and paste it with Ctrl+V or Cmd+V.

On an iPhone or Android phone, choose a photo from your library or take one with the camera, then drag your finger over it. Recent iPhones save photos as HEIC. Safari opens them, and most other browsers receive a JPG copy when you pick from the photo library, but if a HEIC file will not open, export it as JPG first.

From a picked color to a brand palette

A color lifted from a photo or a competitor's site is a good start, not a finished brand color. Before you use it across a website, three checks are worth the few minutes they take:

Contrast. The result shows how black and white text read on the color, against WCAG 2.2. A color that fails with both is fine for backgrounds and shapes but not as a text background. For any other pair, open the color contrast checker.
Family. One color is rarely enough. Save the main color and two or three supporting ones from the same image, then open them in the palette generator to add neutrals and check the set together.
Print. If the color will be printed, give your printer the hex code and ask for a proof or the closest Pantone swatch from their physical guide. No screen conversion can promise an ink match.

Write the final values down where everyone can find them, with the hex, RGB and CMYK side by side. The brand guidelines template lays that out as a PDF.

Methodology and limits

Reading the pixels: The image is decoded by your browser and drawn on a canvas on your device, at full size. Images larger than 16 million pixels are scaled down to fit that limit first, the most a canvas can safely hold on phones, and the page says so. Nothing is uploaded. The browser converts images with an embedded color profile, such as Display P3, to sRGB, and the values read are sRGB.
Sample size: One pixel, or the average of the 3 × 3 or 5 × 5 square centered on it, clipped at the image edges. Each channel is averaged with the pixel's opacity as its weight, so transparent pixels do not pull the color toward black. The opacity shown is the plain average of the square.
Conversions: HEX and RGB are the 8-bit sRGB values. HSL uses the CSS Color 4 definition, rounded to whole degrees and percent. CMYK uses the uncalibrated formula K = 1 minus the largest channel, then C, M and Y relative to 1 minus K, rounded to whole percent, with no ICC profile, ink limit or paper.
Color names: The nearest of 4,362 names from the open color-names list (MIT license). Colors are converted from sRGB to CIE Lab with the D65 white point, and compared with CIEDE2000 (Sharma, Wu and Dalal), with all weighting factors at 1. The two next closest names are shown too. The same list and formula name colors in the color palette generator.
Contrast: White and black text on the color, measured with the WCAG 2.2 contrast ratio and truncated to two decimals, never rounded up. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1.
Screen picking: Pick from screen uses the EyeDropper API, which only Chromium browsers on desktop provide. The browser returns one sRGB value, so averaging does not apply.
Limits: No Pantone, RAL or paint matching: those libraries are licensed and screen colors never match ink or paint exactly. HEIC files open only where the browser can decode them. Animated GIFs are read on their first frame.

Sources

CSS Color Module Level 4, W3C, including the sRGB, hex and HSL definitions
The CIEDE2000 Color-Difference Formula, Gaurav Sharma, Wencheng Wu and Edul N. Dalal, University of Rochester, with the implementation notes and test data used to verify this tool
color-names, David Aerne, the open list of English color names (MIT license)
EyeDropper API, MDN Web Docs, with browser support
Web Content Accessibility Guidelines (WCAG) 2.2, W3C, for relative luminance and the contrast ratio

Color picker from image

Picking a color by eye is where brand consistency breaks.

Color Picker from Image: the complete guide