How to Find the Hex Code of Any Color on a Web Page Instantly

The classic problem

You see a color you like on a website. A button, a background, a heading. You want the hex code. What do you do?

Option one: right-click the element, inspect it, hunt through the computed styles panel, find the color property, click the swatch to see the hex, copy it. That's six steps and it only works if you already know which CSS property the color is applied to.

Option two: take a screenshot, drop it into Photoshop or Figma, use the eyedropper. That works but involves switching apps and relies on screen pixel accuracy rather than the actual CSS value.

There's a faster way.

Using a color picker directly in Chrome

Chrome actually ships with a native eyedropper tool — it was added in 2021. To access it, open DevTools (F12), go to the Elements panel, click any color swatch in the Styles panel, and then click the eyedropper icon in the color picker that appears.

This lets you click anywhere on screen to get the pixel color. It works, but it requires DevTools to already be open and involves a few clicks to get there.

For a faster workflow, a dedicated extension beats the built-in approach.

How Color Palette Extractor handles this

Color Palette Extractor has an element inspector mode. When you enable it and hover over elements on the page, it shows you the exact CSS colors applied to that element in a small tooltip — no DevTools required.

Click the element and those colors are immediately added to your palette and ready to copy.

The difference between this and a pixel eyedropper is important: this reads CSS values, not screen pixels. If a button has an rgba(0, 0, 0, 0.08) shadow, you see that value exactly as it's defined — not whatever the rendered pixel color happens to look like against the background.

This matters when colors are semi-transparent or when you want values you can actually use in CSS, not approximations.

Getting hex codes vs other formats

Color Palette Extractor shows colors in hex by default, but you can switch the display to:

• RGB / RGBA
• HSL
• CSS custom property name (if the color comes from a variable)

For most design work, hex is what you want. For web development, CSS custom properties are more valuable because they tell you the token name, not just the resolved value.

A quick one-minute workflow

1. Open the target website
2. Click the Color Palette Extractor icon
3. Switch to element inspector mode
4. Hover over the element whose color you want
5. Click to copy the hex code

That's it. The whole thing takes under thirty seconds once you're used to it.

When the color isn't where you expect

Sometimes a color looks like it's on an element but it's actually a background on the parent, or an SVG fill, or a gradient. The element inspector shows all colors applied to the hovered element and its nearest ancestors, so you can see the full picture.

If you're trying to capture a color from an SVG icon, hover directly over the icon path rather than the wrapper div.

Conclusion

Getting the exact hex code from any element on a page should take five seconds, not two minutes. Once you have a color picker extension that reads CSS values directly, you'll stop using DevTools for this task entirely.