Browser Hub Demo
EyeDropper API
It turns the browser into a practical design and QA tool for brand extraction, theme audits, and visual comparison workflows.
Native utilities
What this unlocks
Sample any on-screen color with the system picker and pipe it back into the web app. Currently available in Chromium-based browsers. Unsupported browsers should expose a normal color input instead.
EyeDropper API
Sample any on-screen color with the system picker and pipe it back into the web app.
In supporting browsers the picker can sample any on-screen pixel, not just content inside this tab.
#4f46e5
Pick any color from your screen.
Use cases
Real product scenarios
These are the kinds of workflows where the API earns its complexity.
Design token extraction from screenshots.
EyeDropper API helps when the browser needs to move beyond plain navigation and forms.
Brand color capture from live pages.
EyeDropper API helps when the browser needs to move beyond plain navigation and forms.
Visual QA when matching marketing and product surfaces.
EyeDropper API helps when the browser needs to move beyond plain navigation and forms.
Shipping notes
Progressive enhancement rules
Browser capability work is product design work. Support levels, permissions, secure context requirements, and fallback behavior matter as much as the demo itself.
The picker must be triggered by user interaction.
Currently available in Chromium-based browsers. Unsupported browsers should expose a normal color input instead.
Support is still limited, so include a manual color fallback.
Currently available in Chromium-based browsers. Unsupported browsers should expose a normal color input instead.
More demos
Related browser capabilities
Continue through the hub to see how other modern APIs can reshape UX, device integration, and workflow design.
Native utilities
Web Share API
Hand off links, text, and sometimes files to the device’s native share sheet.
Open Web Share API