Color Picker from Image

What this color picker reads

A digital photo is a grid of pixels, and each pixel stores one color as three numbers for red, green and blue. When you click a spot, the tool reads that pixel from the image itself, not from a screenshot of the page, so zooming the page or a dark mode does not change the result. The values come out in sRGB, the color space that HEX codes and named colors use in CSS.

The picked color appears in four formats:

• HEX, like #E4572E, the short code that design tools, brand guides and CSS use most.
• RGB, the same three channels as numbers from 0 to 255, handy in code and in apps that ask for separate values.
• HSL, hue, saturation and lightness, which makes it easy to write a lighter or less saturated version by hand.
• OKLCH, lightness, chroma and hue in a space that follows how people see color, popular for modern design systems.

For HSV, CMYK, a Tailwind class or tints and shades of the same color, open it in the color converter with the More formats button.

One pixel or an average?

A single pixel is exact, and it is the right choice for flat graphics such as logos, icons, screenshots of a website or a slide. Photos are different. Even a plain blue sky is made of slightly different pixels because of sensor noise, texture and the way JPG compression stores images in small blocks. Click twice next to each other and you may get #4A8FD6 and #4C8ED9.

That is why the tool offers a 3 × 3 and a 5 × 5 average. It takes the 9 or 25 pixels around the spot you choose and averages each channel, which gives the typical color of that area instead of one random grain. Near the edge of the image, only the pixels that exist are counted. The magnifier shows a frame around the pixels that go into the average, so you can see what you are measuring.

On a phone a fingertip covers many pixels. Touch and hold the image to bring up the magnifier above your finger, slide until the center square sits on the right pixel, then lift your finger to pick it. A quick tap picks the spot right away, and a quick swipe still scrolls the page.

How the main colors are found

Below the picker, the tool lists the 5 to 8 colors that cover most of the image, each with its share in percent. A logo with only three colors gets three swatches, because the tool does not pad the list with shades that look the same. This is handy when you want the color scheme of a photo for a mood board, a matching background or a brand palette built from a product shot.

1. The image is scaled to a manageable size, and every remaining color is counted. Pixels that are more than half transparent are skipped.
2. A median cut splits the colors into small groups. It always halves the group with the largest spread, along the direction it varies most. The work happens in OKLab, where equal distances look like roughly equal differences to the eye.
3. A few rounds of k-means move each color to the group whose center is closest, which sharpens the groups.
4. From the largest group down, a group becomes a main color only when it is clearly different from the ones already chosen. A big red area therefore does not take two places in a palette of six while a white wall is left out.
5. Every pixel is assigned to its closest main color, and the shares are rounded so that they add up to exactly 100%.

There is no random step anywhere, and ties are always broken in the same order. The same image gives the same palette every time, also on another visit. Each swatch shows the color from the image that sits closest to the center of its group. It is a color that really appears in the picture, not an average that might turn muddy, for example halfway along a pink to orange sunset.

Picking from the screen with the eyedropper

Some browsers have a built-in eyedropper that a website can open, called the EyeDropper API. When your browser has it, a Pick from screen button appears next to the drop area. Press it and the pointer turns into an eyedropper that can sample any pixel on your screen, even in another app; press Escape to cancel. According to MDN, the API is experimental and works in Chrome, Edge and Opera on computers, but not in Firefox, Safari or browsers on Android. On those, take a screenshot and open it here instead; the result is the same.

Nearest CSS color name

CSS has a set of named colors, from aliceblue to yellowgreen, defined in CSS Color Module Level 4. The tool measures how far your color is from each of them in OKLab and shows the closest name with its HEX code and the distance, multiplied by 100 to make it readable. A distance of 0 means an exact match. Any other value means the name is only a rough description, useful for talking about a color or naming a variable, but not a replacement for the exact code.

Collect colors and export them

Every color you pick, from the image, the main colors or the screen, is added to Picked colors. Click a swatch to load it again or remove the ones you do not need. The export box turns either the picked colors or the main colors into:

• CSS variables, a :root block with lines like --picked-1: #E4572E; and the nearest name as a comment, ready to paste into a stylesheet.
• JSON, a list with HEX, RGB, HSL, OKLCH and the nearest name for each color, plus the percentage for main colors, for scripts, design tokens or a spreadsheet.

Before you use a picked color for text, test it against its background with the color contrast checker. To grow one color into a full set of harmonies or a 50 to 950 scale, open it in the color palette generator.

How to use the color picker from image

1. 1Drop an image on the box, choose it from your device or paste a screenshot with Ctrl+V or Cmd+V. A sample image is loaded so you can try it first.
2. 2Click or tap the spot you want, or touch and hold on a phone to aim with the magnifier. Choose a 3 × 3 or 5 × 5 average for photos.
3. 3Copy the HEX, RGB, HSL or OKLCH value, check the main colors of the photo, and export your picked colors as CSS variables or JSON.

Built by Tobias Kurth, designer. Updated October 13, 2026.

Frequently asked questions