Sample colors from the page

Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.

Categories:

Supported by:

Being able to sample colors from the page is super useful. Firefox, Edge and Chrome all allow you to do this in 2 different ways:

In Firefox it's really simple and doesn't even require opening DevTools:
- Go to the main Firefox menu
- Go to the "More Tools" submenu
- Click on the Eyedropper menu item

Animation of the eyedropper tool being started from the Firefox main menu.

There is a second way to do this in Firefox from DevTools:
- Open the Inspector panel
- Click on the eye dropper button in the typ-right corner of the panel

The eyedropper button in Firefox's inspector panel.

In Polypane you also do not need devtools
- Click the eye dropper icon in the address bar.
- Or use the keyboard shortcut Shift Alt P.
After selecting a color, an overview of previously selected colors, previews and contrast ratios is shown.

Animation of starting the eyedropper tool from Polypane's address bar.

In Chrome and Edge:
- Open the Elements panel and select an element that has some CSS color set to it
- Find the color in the Styles pane and click on the color swatch icon next to it
- Just start moving the mouse over the page

Animation of starting the eyedropper tool from chrome and edge's color pickers.