Revision 789326 of Eyedropper

Revision slug: Tools/Eyedropper
Revision title: Eyedropper
Revision id: 789326
Created: Apr 20, 2015, 7:13:22 PM
Creator: trevorh
Is current revision? No
Comment Remove iframe use

Revision Content

The Eyedropper is new in Firefox 31.

The Eyedropper tool enables you to select colors in the current page. It works like a magnifying glass over the page, enabling you to select with pixel precision. Underneath the magnifying glass it shows the color value for the current pixel using whichever scheme you've selected in the Settings:

You can use it in one of two ways:

to select a color from the page and copy it to the clipboard
to change a color value in the Inspector's Rules view to a color you've selected from the page

Copying a color to the clipboard

Open the Eyedropper in one of these two ways:

select "Eyedropper" under the "Web Developer" menu
click the eyedropper button in the Toolbox toolbar (but note that this button is not present by default: you need to add by checking "Grab a color from the page" in the Developer Tools Settings)

As you move the mouse around the page you'll see the current color value in the Eyedropper change. Clicking copies the current color value to the clipboard.

Changing a color value in the Rules view

Color values appearing in the Inspector's Rules view have color samples next to them: clicking the sample shows a color picker popup. From Firefox 31, the popup contains an eyedropper icon: click this icon to activate the Eyedropper.

Now, when you click the Eyedropper, the color in the Rules view is set to the color you selected.

Keyboard shortcuts

Revision Source

<div class="geckoVersionNote">
<p>The Eyedropper is new in Firefox 31.</p>
</div>

<p>The Eyedropper tool enables you to select colors in the current page. It works like a magnifying glass over the page, enabling you to select with pixel precision. Underneath the magnifying glass it shows the color value for the current pixel using whichever scheme you've selected in the <a href="/en-US/docs/Tools_Toolbox#Inspector">Settings</a>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7749/eyedropper.png" style="width: 305px; height: 204px; display: block; margin-left: auto; margin-right: auto;" />You can use it in one of two ways:</p>

<ul>
 <li>to select a color from the page and copy it to the clipboard</li>
 <li>to change a color value in the Inspector's Rules view to a color you've selected from the page</li>
</ul>

<h2 id="Copying_a_color_to_the_clipboard">Copying a color to the clipboard</h2>

<p>Open the Eyedropper in one of these two ways:</p>

<ul>
 <li>select "Eyedropper" under the "Web Developer" menu</li>
 <li>click the eyedropper button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox toolbar</a> (but note that this button is not present by default: you need to add by checking "Grab a color from the page" in the <a href="/en-US/docs/Tools_Toolbox#Settings">Developer Tools Settings</a>)</li>
</ul>

<p>As you move the mouse around the page you'll see the current color value in the Eyedropper change. Clicking copies the current color value to the clipboard.</p>

<p>{{EmbedYouTube("xf2uk6UyRB8")}}</p>

<h2 id="Changing_a_color_value_in_the_Rules_view">Changing a color value in the Rules view</h2>

<p>Color values appearing in the Inspector's Rules view have color samples next to them: clicking the sample shows a <a href="/en-US/docs/Tools/Page_Inspector#Color_picker">color picker popup</a>. From Firefox 31, the popup contains an eyedropper icon: click this icon to activate the Eyedropper.</p>

<p>Now, when you click the Eyedropper, the color in the Rules view is set to the color you selected.</p>

<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p>

<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>

<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "eyedropper") }}</p>

Revert to this revision