Code Specimen

Point at anything on a website to see, copy and export its fonts, colours, spacing, CSS and images.

Code Specimen shows you how any website is built. Open it in Chrome's side panel, point at a heading, button or card, and you get its font, size, colors, spacing and CSS, each with its own copy button. It's free, it needs no account, and it doesn't track you. HOW IT WORKS Click the Code Specimen icon (or press Alt+Shift+S, or Command+Shift+S on a Mac) and choose Start inspecting. Hover over anything on the page to see its size and style, then click to lock it. The details appear in the side panel next to the page, so you never lose your place. WHAT YOU CAN DO • Inspect any element: its font family, weight, size and line height, its colors with contrast ratings, the box model with margin and padding, and its layout values. • Copy styles without cleanup: one value, one section or every style on the element at once, in px or rem. • Copy a whole component as HTML plus only the rules that apply to it, including hover, focus and media queries. • Find fonts fast: the Type tab lists every font family and weight on the page and builds the type scale from H1 down to caption, ready to paste into your own stylesheet. • See the whole palette: every text, background and border color, grouped and counted, with a contrast checker that flags text failing WCAG AA. Switch between HEX, RGB, HSL and OKLCH. • Use the eyedropper to sample any pixel on screen, including colors inside photos and gradients. • Export the palette as CSS variables, a Tailwind config or JSON. • Download assets: every image, SVG and background image on the page, one at a time or all together in a .zip file. • Move with the keyboard: the arrow keys step to the parent, first child and sibling elements, and Space pins your selection. • Try changes live: edit an element's styles on the page, including its hover and focus states, then copy your edits as a stylesheet. Closing the panel puts the page back exactly as it was. • Optional AI conversion to Tailwind classes, using your own Anthropic, OpenAI or Google Gemini API key. Nothing is sent until you press Generate, and you see exactly what will be sent before you do. PRIVATE BY DESIGN Code Specimen reads a page only after you open it on that page, by clicking its icon or pressing its shortcut. It never asks for access to all your websites, so installing it shows no warning about reading your data. There are no analytics, no ads and no account, and your settings stay on this computer. WHO IT'S FOR Designers checking how a live site was built, front-end developers matching a design, and anyone who has looked at a website and wondered which font that is or what color that button uses.