Code Specimen

Code Specimen is a free browser extension for Chrome and Firefox that shows you what any web page is made of. Hover over a heading, a button or an image and it outlines itself with its tag and size. Click to lock it, and a side panel beside the page shows its font, colours, spacing and CSS, each value with its own copy button.

The panel has four tabs. Element explains one element in full, including its box model, with a px and rem switch. Type lists every text style on the page, from H1 down to the smallest caption. Colours shows the real palette grouped into text, background and border, each with its contrast ratio, and exports it as CSS variables, a Tailwind config or JSON. Assets gathers every image, SVG and CSS background into one grid, and you can download a selection as a zip.

Deeper tools are free too: copy a whole component as HTML and CSS with its hover and focus styles and media queries, edit values live and undo them, see hover and focus states, highlight every place a colour is used, move between elements with the arrow keys, and pick colours from photos with an eyedropper. Teams using Tailwind can convert a component into Tailwind classes with their own Anthropic, OpenAI or Google Gemini key.

There is no account, no daily limit, no analytics and no ads. It runs only when you open it, never reloads the page, and asks for four permissions at most. Open it with Alt+Shift+S, or Cmd+Shift+S on a Mac.