Quick summary

If you ever pretended your eye could pick exact colors while sweating over a mockup you are not alone. Chrome has a built in color picker inside Developer Tools that lets you sample a pixel from any image in a tab and grab the hex value. No special uploads no mystery extensions and no more arguing with a teammate about whether teal is teal enough.

What you will do

Open the image in Chrome. Open DevTools. Trigger the color picker. Use the eyedropper to sample a pixel. Copy the hex value and paste it into your stylesheet or design tool. It is simple and wonderfully unromantic.

Step by step

1. Load the image in a Chrome tab. Drag the file into Chrome if you need to. No login required.
2. Open Developer Tools with Ctrl Shift I on Windows or Cmd Option I on Mac. Yes that is a lot of keys. It is worth it.
3. In the Styles panel find any CSS rule that shows a color swatch. Click that swatch to open the color picker.
4. Click the eyedropper icon labeled Pick color from page. Your cursor will turn into a crosshair. Move it over the pixel you want and click to lock the sample.
5. The hex value will appear in the color input box. Click the hex to select and copy it or press Ctrl C or Cmd C to copy to the clipboard.
6. Paste the hex into your stylesheet variable a design mock or a palette manager and pretend you did not enjoy that bit of power.

Why this works and what to watch for

The picker reads the exact pixel rendered in the tab so you get the computed color not a guessed approximation. That means what you copy will match what the browser is showing right now. If the image was scaled compressed or contains anti aliasing you might pick adjacent pixels by accident. Zooming the page before sampling reduces that risk.

Tips for cleaner samples

• Zoom the page when dealing with tiny or compressed images. Bigger pixels make for less accidental color theft.
• If overlays tooltips or other elements are in the way temporarily hide them in DevTools or move the element out of the way.
• If you need multiple colors build a small palette in your design tool or a CSS variable list so you do not keep switching back to the picker.
• Remember that transparent pixels will sample the composited color from layers underneath so check the context if something looks off.

Troubleshooting and oddballs

Sometimes the eyedropper seems stubborn. Make sure the image is actually visible in the tab and not blocked by cross origin restrictions if it is being drawn by a canvas that your page cannot access. If the hex appears slightly different than your design file double check color profiles in your design app or consider sampling a higher fidelity source image.

Final thoughts

This trick saves time and preserves color accuracy when translating from image to code. It stops the whole guessing game where everyone nods and someone whispers Maybe make it greener. Use the eyedropper and let the pixels do the talking.

Example hex to play with #34A853