---
title: Eyedropper
slug: Tools/Eyedropper
tags:
  - CSS
  - Design
  - Eyedropper
  - colors
translation_of: Tools/Eyedropper
---
<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
<p>O Eyedropper é novidade no Firefox 31.</p>
</div>

<p>A ferramenta Eyedropper permite que você selecione cores na página atual. Funciona como uma lupa através da página, permitindo que você selecione com uma precisão de pixels. Abaixo da lupa é mostrado o valor da cor do pixel atual, baseado na representação selecionada em <a href="/en-US/docs/Tools/Settings#Inspector">Settings &gt; Inspector</a> &gt; Default color unit:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7749/eyedropper.png" style="display: block; height: 204px; margin-left: auto; margin-right: auto; width: 305px;">Você pode usar para as seguintes finalidades:</p>

<ul>
 <li>para selecionar uma cor de uma página e copiá-la para a área de transferência.</li>
 <li>para mudar o valor da cor nas Regras do Inspetor para uma nova cor que tenha sido selecionada na página.</li>
</ul>

<h2 id="Copiando_a_cor_para_a_clipboard">Copiando a cor para a clipboard</h2>

<p>Abra o Eyedropper usando uma das seguintes maneiras:</p>

<ul>
 <li>selecione "Eyedropper" no menu "Web Developer"</li>
 <li>click no botão do eyedropper na <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox toolbar</a> (note que este butão não é mostrado por padrão: você precisa adicioná-lo marcando "Grab a color from the page" <a href="/en-US/docs/Tools_Toolbox#Settings">Configurações do Developer Tools</a>)</li>
</ul>

<p>A medida que você movimenta o mouse através da página, você verá o valor da cor atual sendo alterado no Eyedorpper. Ao clicar, a cor atual será copiada à área de trasnferência.</p>

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

<h2 id="Alterando_o_valor_de_uma_cor_no_visualizador_de_regras.">Alterando o valor de uma cor no visualizador de regras. </h2>

<p>Valores de cores que aparecem nas regras do Inspetor possuem amostras de cores próximas a elas: clicar na amostra habilita uma <a href="/en-US/docs/Tools/Page_Inspector#Color_picker">popup de seleção de cores</a>. Desde o Firefox 31, a popup possui um ícone do eyedropper: clique neste ícone para ativar o Eyedropper.</p>

<p>Assim, quando você clicar no Eyedropper, a cor no visualizador de regras estará atribuída com o valor selecionado.</p>

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

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

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