google-chromegoogle-chrome-devtoolscolor-picker
Is there an eyedropper tool in Google Chrome DevTools?
I want to get a color from a website using Google Chrome's DevTools.
I know that you can get the color code if it's set in the CSS, but I want to get a color from for example an image.
Is this possible with google Chrome's DevTools?
Solution
Using EyeDropper API
- Option + ⌘ + J (macOS) or Shift + CTRL + J (Windows/Linux).
await new EyeDropper().open();- Hover over the color you want and tap on it
- The hex value will be Printed into the console.
- How to use Chrome Developer Tools to find elements based on a CSS selector? (e.g., class or id)
- See :hover state in Chrome Developer Tools
- Automatically open Chrome developer tools when new tab/new window is opened
- View a Javascript method's contents in Chrome console
- How to get the FPS in chrome devtools
- AWS Elastic Load Balancing: Seeing extremely long initial connection time
- How do I switch to Chromes dark scrollbar like GitHub does?
- Setting HTML5 audio position
- Extend Google Docs with a chrome extension?
- google chrome inspect element - invalid property name - browser specific?
- How to specify browser language in Puppeteer
- Iframe "(Site Name) Refused to Connect." Error
- How do I get my CSS to function in Chrome?
- Content being read twice on focus of element + lots of "clickable"
- Set Chrome's language using Selenium ChromeDriver
- Using tesseract.js with manifestv3
- Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"
- Show seconds on input type=date-local in Chrome
- Adding sub contextMenus in Google Chrome extension
- Grouped context menu items in a Chrome extension
- Is any better way to terminate chrome.exe on windows
- Disable Chrome pinch zoom for use in kiosk
- Live editing in Google Chrome
- WebDriverException: unknown error: DevToolsActivePort file doesn't exist while trying to initiate Chrome Browser
- SVG rect not showing up in firefox but works on chrome
- How to get 2x favicon in Chrome extension
- XAMPP won't update web source files until they're committed to Git on Chrome
- Freeze screen in chrome debugger / DevTools panel for popover inspection?
- How does setTimeout in a focusIn handler resolve before the click handler runs?
- Uncaught TypeError: Cannot set property 'onchange' of null