---
title: Eyedropper
slug: Tools/Eyedropper
translation_of: Tools/Eyedropper
---
<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
<p style="padding: 10px 0 9px 8px;">Инструмент пипетка доступен начиная с Firefox 31.</p>
</div>

<p>Инструмент «Пипетка» позволяет получить цвет любого пикселя на странице. Он работает как увеличительное стекло, увеличивая участок страницы и позволяя точно выбрать необходимый пиксель. Под увеливаемой областью находится текстовое поле, в котором отображается выбранный цвет в соответствии с выбранной цветовой моделью, указанной в <a href="/en-US/docs/Tools_Toolbox#Inspector">Настройках</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;">Этот инструмент обычно используется:</p>

<ul>
 <li>для выбора цвета на странице и копирования его в буфер обмена</li>
 <li>для изменения цвета какого-либо элемента в консоли разработчка на выбранный при помощи инструмента.</li>
</ul>

<h2 id="Копирование_цвета_в_буфер_обмена">Копирование цвета в буфер обмена</h2>

<p>Откройте Пипетку:</p>

<ul>
 <li>выберите пункт «Пипетка» под меню «Веб-разработка»</li>
 <li>нажмите на кнопку «Пипетка»  в <a href="/en-US/docs/Tools_Toolbox#Toolbar">панели инструментов</a> (однако эта опция недоступна по  умолчанию: необходимо активировать её, выбрав пункт «Выбрать цвет на странице» в <a href="/en-US/docs/Tools_Toolbox#Settings">Настройках инструментов разработчиков</a>)</li>
</ul>

<p>Двигая курсором по странице, вы увидите, что код текущего цвета изменяется. Клик мышью копирует текущий цвет в буфер обмена.</p>

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

<h2 id="Изменение_цвета_в_правилах_инспектора_страницы">Изменение цвета в правилах инспектора страницы</h2>

<p><span id="result_box" lang="ru"><span class="hps">Напротив каждого цифрового кода цвета</span><span> <span id="result_box" lang="ru"><span class="hps">(например, #B00BCE)</span></span></span> <span class="hps">в </span><span class="hps">Инспекторе </span><span class="hps">есть</span> <span class="hps">образец этого цвета</span><span>:</span> при нажатии <span class="hps">на</span> него <span class="hps">откроется <span id="result_box" lang="ru"><span class="hps">всплывающее окно с <a href="/en-US/docs/Tools/Page_Inspector#Color_picker"><span id="result_box" lang="ru"><span class="hps"><span id="result_box" lang="ru"><span class="hps">палитрой цветов</span></span></span></span></a></span></span></span><span class="hps">.</span> </span></p>

<p style="text-align: center;"><img alt="Палитра цветов" src="https://mdn.mozillademos.org/files/7843/colorbox.png" style="width: 330px; height: 295px;"></p>

<p><span lang="ru"><span class="hps">Начиная с</span> <span class="hps">Firefox</span> <span class="hps">31</span><span>,</span> в этом <span class="hps">всплывающем окне также</span> будет находиться <span class="hps">иконка вызова</span> <span class="hps">пипетки</span></span>.<br>
 <br>
 <span lang="ru"><span class="hps">Теперь</span><span>,</span> <span class="hps">когда инструмент активен</span><span>, цвет выбранного элемента</span> <span class="hps">в Инспекторе</span><span> будет установлен таким же, какой вы выберете пипеткой</span></span><span lang="ru"><span>.</span></span></p>

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

<h2 id="Горячие_клавиши">Горячие клавиши</h2>

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