Code Specimen: CSS, Font & Color Inspector 作者: Code Specimen: CSS, Font & Color Inspector

🔍 Code Specimen is a free CSS inspector, font finder and color picker for Firefox. Point at any heading, button or card on a website and see its fonts, colors, spacing and CSS in Firefox's sidebar, each with its own copy button. No account, no tracking, and it now speaks 20 languages.

⚡ How it works

Click the Code Specimen icon in your toolbar (or press Alt+Shift+S) and choose Start inspecting. Hover over anything to see its size and style, then click to lock it. The details open in the sidebar beside the page, which stays with you as you switch tabs, so you never have to open the developer tools.

✨ What you can do

• 🧩 Inspect any element: font family, weight, size and line height, its text and background with contrast ratings, the box model with margin and padding, and layout values.
• 📋 Copy CSS without cleanup: one value, one section or every style on the element, in px or rem.
• 🧱 Copy a whole component as clean HTML and CSS, with only the rules that apply, including hover, focus and media queries.
• 🔤 Identify fonts on any website: the Type tab lists every typeface and weight on the page and builds the type scale from H1 to caption, ready for your stylesheet.
• 🎨 Extract a site's color palette: every text, background and border swatch, grouped and counted, in HEX, RGB, HSL or OKLCH.
• ✅ Check contrast: a built-in WCAG contrast checker flags every text and background pair that fails AA.
• 📦 Export the palette as CSS variables, a Tailwind config or JSON, ready to use as design tokens.
• 🖼 Download images: every image, SVG and background image on the page, one at a time or all together as a .zip file.
• ⌨ Keyboard navigation: the arrow keys step to the parent, first child and sibling elements, and Space pins your selection.
• ✏ Edit live: change an element's styles on the page, including hover and focus states, then copy your edits as a stylesheet. Closing the sidebar puts the page back exactly as it was.
• 🤖 Optional AI: convert a component to Tailwind classes with your own Anthropic, OpenAI or Google Gemini API key. Nothing is sent until you press Generate, Firefox asks your permission the first time, and you see exactly what will be sent first.
• 🌍 Speaks your language: English, Spanish, Portuguese, French, German, Italian, Dutch, Polish, Russian, Ukrainian, Turkish, Arabic, Hindi, Indonesian, Vietnamese, Thai, Japanese, Korean and Chinese (Simplified and Traditional).

🔒 Private by design

Code Specimen reads a page only after you open it there, 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. No analytics, no ads, no account, and your settings stay on your computer.

👥 Who it's for

Web designers checking how a live site was built, front-end developers matching a design, UI designers collecting a site's type and colors, and anyone who has looked at a website and wondered "what font is this?" or "what color is that button?"