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

102

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

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

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

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

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

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

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

google-chrome-devtools

— Скалар Ваг
источник

Это полезно для копирования и представлений более высокого уровня: chrome.google.com/webstore/detail/eyedropper-color-pick/…

— austin_ce

Ответил также в комментариях ниже; вы можете найти его в инструментах разработчика (на вкладке «Элементы», на вкладке «Стили» щелкните любое правило «цвета», во всплывающем окне есть палитра цветов) Я ищу способ без цвета Например, представьте, что вы хотите выбрать цвет только из изображения.

— mdikici

Ответы:

115

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

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

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

— Якен Х'гар
источник

Сейчас я использую версию 68.0.3440.106. Вы больше не можете использовать цветовую палитру для выбора цвета

— caras

Chrome v72 здесь, он работает так же, как описано в ответе.

— Dinei

Я использую v78 и не могу заставить это работать; даже пришел сюда выяснить, не забыл ли я какую-то деталь.

— Герберт Ван-Влит,

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

— Джаредвилли
источник

должен быть более простой способ

— SuperUberDuper

@SuperUberDuper Ну вот и есть. Мой ответ - пару лет. В настоящее время вы можете просто щелкнуть маленькую рамку образца цвета рядом со значениями цвета на боковой панели стилей, а затем навести указатель мыши на страницу, чтобы увидеть инструмент выбора цвета. Теперь все намного проще.

— jaredwilli

но сначала вам нужно иметь правило цвета

— SuperUberDuper

@SuperUberDuper или используйте var ... --c: red, самый простой способ получить свойство цвета в панели инструментов разработчика.

— Brandito

не могли бы вы объяснить больше

— SuperUberDuper

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

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

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

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

— ШерилХохман
источник

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

— Buzard