panel tab · one of 9 4 sections free, no counter
UI
What is this element, and what happens to the page if it changes?
Hover an element to read its box, its type and its colours - then change it on the page and take the change back.
Reach it Press ⌘ + K on any tab and type ui. Ctrl + K on Windows and Linux
Reading an element and changing it are the same job, and a browser splits them across panels that do not share a selection. Inspect holds one: its box, what it computes to, the rules that produced it and the edits made since, each of them undoable in the order they were made. Extract reads the page instead of the element - every colour, typeface and asset, once, on open - which is the version of this question a designer arrives with. Every edit is DOM-only: nothing is written to storage, nothing is sent anywhere, and a reload is the other way to take it all back.
in the panel · free, no counter
What the UI tab is made of
4 sections, in the order the panel draws them- Inspect
- The selected element's box, its live edits, and what it computes to.
- Extract
- Every colour, typeface and asset on the page, read once on open.
- Rules
- The CSS rules behind the selected element, and where each came from.
- Picker
- Samples any pixel on screen and builds harmonies from it.
70 tools beside this tab · no host permissions · three free audits