Spent way too long squinting at a website, trying to match that perfect shade of blue? You need not guess hex codes, snap blurry screenshots or wade through endless HTML/CSS source code. Find out here how to identify website colors with the eyedropper built into Firefox ⤓ and get the exact hues you need down to the pixel — no guesswork.
On This Page
How to Identify Website Colors with the Firefox Eyedropper
Time needed: 2 minutes
To find out which color (qua hex code) any pixel on a website is with Firefox:
- Open the page where you want to identify a color value in Firefox.
- Click the Open application menu hamburger menu button.
- Select More tools | Eyedropper from the menu that has appeared.
- Position the cursor over a pixel to have its hex color value appear.
- Click to copy the color code.
Firefox keyboard shortcut: You can also press Enter to copy the hex code and hide the eyedropper.
Color me picked:
Tips help fuel these email and tech how-tos.
How to Identify Website Colors with the Firefox Eyedropper: FAQ
Can I copy the color code and keep the eyedropper visible?
No.
Firefox does not include a keyboard shortcut for copying the hex color code without also closing the eyedropper magnifying glass.
Can I move the eyedropper using the keyboard?
Yes.
To move the eyedropper with precision:
- Use the arrow keys (⬅ ⬆ ⬇ ⮕) to move 1 pixel.
- Hold Shift while pressing the arrow buttons to move by 10 pixels.
Can I examine Firefox interface elements with the built-in eyedropper?
No.
To identify colors in the Firefox user interface, you can use a system-wide color picking utility:
- How to Pick a Pixel’s Color on the Screen with Linux
- How to Identify Any Pixel’s Screen Color with the Mac Color Picker
How can I hide the Firefox eyedropper again?
To get rid of the eyedropper in Mozilla Firefox, you can
- click on the page or press Enter to copy the hex color code or
- press Esc to hide it without copying the color code.
(Tested with Firefox 140–146; first published July 2025, last updated May 2026)