Як користуватися засобом підбору кольорів (крапелька для очей)?

Є дуже корисний інструмент, вбудований у інструмент хромованого розробника, який я щойно виявив. Я навіть не знаю його назви, і я не в змозі знайти його в google. Я б сказав, що це піксельний інструмент інспектора.

Я знаходжу такий спосіб, як ним користуватися:

1а. Перевірте html-елемент із кольором тла.

1б. Визначте колір фону елемента.

Клацніть на підбірці кольору.
Наведіть курсор миші на будь-який елемент сторінки (не на інструмент розробки)

Дивіться: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

Мої запитання: Як називається цей інструмент? Як ним легко користуватися? Більшість часу мене не цікавить колір, але я хочу оглянути пікселі піктограми. Чи є гаряча клавіша цього інструменту?

google-chrome-devtools

— Скалар Ваг
джерело

Це корисне для копіювання та перегляду вищого рівня: chrome.google.com/webstore/detail/eyedropper-color-pick/…

— austin_ce

Відповідь також у коментарях нижче; ви можете знайти його в інструментах розробки (на вкладці «Елементи», під цим на вкладці «Стилі» натисніть на будь-яке правило «колір»; на спливаючому вікні є колір вибору). Що я шукаю, це спосіб без необхідності кольору як правило, як уявіть, що ви хочете вибрати колір просто із зображення.

— mdikici

Відповіді:

104

Щоб відкрити окуляри, просто:

Відкрийте DevTools F12
Перейдіть на вкладку «Елементи»
Під бічною панеллю Стилів натисніть будь-яке поле попереднього перегляду кольорів

Його основна функціональність полягає в тому, щоб перевіряти значення піксельних кольорів, натискаючи їх, хоча за допомогою нових функцій ви також можете бачити наявну палітру кольорів сторінки або палітру дизайну матеріалів, натиснувши на значок двох стрілок внизу. Це може стати дуже зручним при розробці вашої сторінки.

— Джакен Х'гар
джерело

Зараз я використовую версію 68.0.3440.106. Ви більше не можете використовувати палітру кольорів для вибору кольору

— caras

Chrome v72 тут працює, як описано у відповіді.

— Діней

Я на v78 і не можу змусити це працювати; навіть прийшов сюди, щоб зрозуміти, чи я забув якусь деталь.

— Герберт Ван-

Його просто називають інструментом «Піпетка». Я не знаю жодної клавіші швидкого доступу. Єдиний спосіб, яким ви зараз можете скористатися, це натиснути на вікно вибору кольору в бічній панелі стилів, а потім натиснути на сторінку, як ви вже робили.

— jaredwilli
джерело

там повинен бути простіший спосіб

— SuperUberDuper

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

— jaredwilli

але спочатку потрібно мати правило кольору

— SuperUberDuper

@SuperUberDuper або використовуйте різноманітний ... --c: redнайпростіший спосіб отримати властивість кольору на панелі розробників.

— Брандіто

Ви можете пояснити більше

— SuperUberDuper

Наразі інструмент «Піпетка» не працює в моїй версії Chrome (як описано вище), хоча він працював для мене раніше. Я чую, що він оновлюється в останній версії Chrome.

Однак я можу легко захопити кольори у Firefox.

Відкрити сторінку в Firefox
Меню Hamburger -> Веб-розробник -> Піпетка
Перетягніть інструмент «Піпетка» на зображення ... Клацніть .
Колір копіюється у буфер обміну, а інструмент «Піпетка» відходить.
Вставити кольоровий код

Якщо ви не можете отримати інструмент «Піпетка» для роботи в Chrome, це хороша робота.
Мені також легше отримати доступ :-)

— Шерил Хохман
джерело

Я хоч і не працював для мене, але, мабуть, існує обмеження, так що воно працює лише тоді, коли devtools стикується у вікні браузера.

— жучка