Как пользоваться палитрой цветов (пипеткой)?

102

В chrome dev tool есть очень полезный инструмент, который я только что обнаружил. Я даже не знаю его названия и не могу найти в гугле. Я бы сказал, что это инструмент инспектора пикселей.

Я нахожу следующий способ его использования:

1а. Осмотрите элемент HTML с цветом фона.

1b. Определите цвет фона элемента.

  1. Щелкните по палитре цветов.
  2. Наведите указатель мыши на любой элемент на странице (не на инструмент разработчика)

См. Http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

Мои вопросы: Как называется этот инструмент? Как легко им пользоваться? В большинстве случаев меня не волнует цвет, но я хочу проверить пиксели значка. Есть ли горячая клавиша этого инструмента?

google-chrome-devtools Скалар Ваг
источник
Это полезно для копирования и представлений более высокого уровня: chrome.google.com/webstore/detail/eyedropper-color-pick/…
austin_ce
Ответил также в комментариях ниже; вы можете найти его в инструментах разработчика (на вкладке «Элементы», на вкладке «Стили» щелкните любое правило «цвета», во всплывающем окне есть палитра цветов) Я ищу способ без цвета Например, представьте, что вы хотите выбрать цвет только из изображения.
mdikici

Ответы:

115

Чтобы открыть пипетку, просто:

  1. Открыть DevTools F12
  2. Перейти на вкладку "Элементы"
  3. На боковой панели "Стили" щелкните поле предварительного просмотра любого цвета.

введите описание изображения здесь

Его основная функция - проверять значения цвета пикселей, щелкая их, хотя с его новыми функциями вы также можете увидеть существующую цветовую палитру своей страницы или палитру дизайна материалов, щелкнув значок с двумя стрелками внизу. Это может быть очень удобно при разработке вашей страницы.

Якен Х'гар
источник
6
Сейчас я использую версию 68.0.3440.106. Вы больше не можете использовать цветовую палитру для выбора цвета
caras
2
Chrome v72 здесь, он работает так же, как описано в ответе.
Dinei
1
Я использую v78 и не могу заставить это работать; даже пришел сюда выяснить, не забыл ли я какую-то деталь.
Герберт Ван-Влит,
34

Это просто инструмент «пипетка». Насколько мне известно, для него нет сочетания клавиш. Единственный способ использовать его сейчас - это щелкнуть поле выбора цвета на боковой панели стилей, а затем щелкнуть страницу, как вы уже делали.

Джаредвилли
источник
8
должен быть более простой способ
SuperUberDuper
@SuperUberDuper Ну вот и есть. Мой ответ - пару лет. В настоящее время вы можете просто щелкнуть маленькую рамку образца цвета рядом со значениями цвета на боковой панели стилей, а затем навести указатель мыши на страницу, чтобы увидеть инструмент выбора цвета. Теперь все намного проще.
jaredwilli
5
но сначала вам нужно иметь правило цвета
SuperUberDuper
1
@SuperUberDuper или используйте var ... --c: red, самый простой способ получить свойство цвета в панели инструментов разработчика.
Brandito
не могли бы вы объяснить больше
SuperUberDuper
5

В настоящее время инструмент «Пипетка» не работает в моей версии Chrome (как описано выше), хотя раньше он работал у меня. Я слышал, что он обновляется до последней версии Chrome.

Тем не менее, я могу легко получать цвета в Firefox.

  1. Открыть страницу в Firefox
  2. Гамбургерное меню -> Веб-разработчик -> Пипетка
  3. Перетащите инструмент «Пипетка» на изображение ... Щелкните .
    Цвет копируется в буфер обмена, а инструмент «Пипетка» исчезает.
  4. Вставить цветовой код

Если вы не можете заставить инструмент «пипетка» работать в Chrome, это хорошее решение.
Мне также легче получить доступ :-)

ШерилХохман
источник
Я хотя и не работал у меня, но, видимо, есть ограничение, так что он работает только тогда, когда инструменты разработчика закреплены в окне браузера.
Buzard