Docked beside the page
Click the toolbar icon and Hairline opens in Chrome's side panel. Nothing covers the page, and your tools stay put as you switch tabs.
Chrome extension · Side panel · 15 tools
Inspect, edit and capture any website.
Hairline docks beside the page you're working on. Hover to read any element's CSS, change values live, pull every color and font, measure to the pixel and export what you find.
How it works
Docked in the side panel, beside your page
Knows your breakpoint
The panel narrows the page, so it shows the live viewport and breakpoint, like 900 × 800 · MD. Need full width? Switch to floating panels.
One keystroke away
Press Alt Shift K for the command palette, or jump straight to the inspector with Alt Shift I. Esc closes any tool.
CSS Inspector
Hover to read the CSS, click to change it
Hover to see the box model, typography and colors. Click to lock an element and edit any value right in the panel; the page updates as you type, and one click resets everything.
- Margin, border and padding drawn on the page
- Copy CSS or a selector in one click
- Edits stay on your screen and reset on reload
Color Palette & Picker
Pull every color a site uses
Pull the full palette sorted by usage, copy a swatch, or export the lot as CSS variables or a Tailwind config. The picker gives HEX, RGB and HSL with contrast ratings against white and black.
- WCAG AA / AAA ratings for every color
- Picks any pixel on screen, even outside the page
- Color history you can click back into
Page Ruler & Outliner
Measure spacing and layout to the pixel
Drag anywhere to measure. Outline every element to see how a layout is built, with tag names and sizes as you hover.
- Live width × height while you drag
- Color-coded outlines by element type
The toolkit
Everything in the toolkit
15 tools for inspecting, editing and capturing pages. Nine are free, and Pro unlocks the rest along with live CSS editing and full-page screenshots.
Inspect
- CSS InspectorHover any element to see its box model and styles.
- List All FontsEvery font family, weight and size used on the page.
- Color PickerPick any pixel and copy HEX, RGB or HSL.
- Color PaletteProExtract every color a website uses.
- Page RulerDrag to measure anything in pixels.
- Page OutlinerOutline every element to see the HTML structure.
Edit
- Live Text EditorClick and type to edit any text on the page.
- Fonts ChangerProSwap fonts on the whole page or a single element.
- Move ElementProDrag elements to try new layouts.
- Delete ElementClick to remove or hide anything. Undo any time.
- Image ReplacerProSwap any image with a file or URL.
Capture & AI
- Export ElementProCopy any element as standalone HTML + CSS.
- Extract ImagesProFind every image and download them all.
- Take ScreenshotCapture the visible area, an element, or the full page.
- Send to AIHand any element to Claude, ChatGPT or Gemini to recreate it in React, Vue, Svelte, Tailwind and more.
Privacy
Everything happens in your browser
No analytics, no tracking, no account. Page content never leaves your browser unless you paste it into your own AI app with Send to AI. Hairline only goes online to check a Pro licence key, or to load a Google Font when you preview one that isn't installed.
- activeTab
- Only the tab you open it on
- scripting
- Draws highlights on that page
- storage
- Your settings and licence
- downloads
- Saves screenshots and images
- sidePanel
- Docks beside the page
Pricing
Free tools, with a one-time Pro upgrade
| Every tool, side by side. Pro is a single payment, no subscription. | ||
|---|---|---|
| Inspect | ||
| css-inspector | read-only | live editing |
| color-picker | with contrast checks | |
| color-palette | — | CSS + Tailwind export |
| fonts | list every font | list + swap live |
| ruler · outliner | ||
| Edit | ||
| text-editor · delete | ||
| move · image-replacer | — | |
| Capture & AI | ||
| screenshots | visible area + element | + full page |
| extract-images | — | |
| export-element | — | HTML + CSS |
| send-to-ai | ask about an element | recreate, edit, a11y, style guide |
| General | ||
| side panel · floating · palette | ||
| updates | included | |
Prices in USD. Taxes are calculated at checkout. Payments are processed by Creem, our merchant of record. Pro is a one-time purchase for up to 3 browsers, with a 14-day money-back guarantee. See the terms.
FAQ
Common questions
Which browsers does Hairline work in?
Chrome, Microsoft Edge and Brave, version 116 or later. They all support Chrome's side panel and Manifest V3.
Does it work on every website?
It works on any normal web page. Browsers don't let extensions run on their own internal pages, such as settings, the new tab page or the extension store, so Hairline tells you when you're on one of those.
Do my edits change the real website?
No. Edits, deletions and moved elements only change what you see in your own browser, and they reset when you reload the page. Use Copy CSS or Export Element to take your changes with you.
What's the difference between the side panel and floating mode?
The side panel docks beside the page and keeps everything uncovered. Floating mode shows tools over the page instead, which keeps the full page width, handy when you need to check a desktop breakpoint. Switch any time in Settings.
How do I upgrade to Pro?
Click Upgrade in Hairline, or Get Pro on this page, and pay on the secure Creem checkout. Your licence key arrives in the receipt email. Paste it into Hairline → Settings → Activate Pro and every tool unlocks straight away.
How does the Pro licence work?
One payment, no subscription. A licence covers one person in up to 3 browsers at a time, and includes the Pro updates we release. It keeps working offline, and you can move it to another browser by choosing Deactivate in Settings. Full details are in the terms.
Can I get a refund?
Yes. If Pro isn't right for you, email support@bencounsell.com within 14 days of purchase for a full refund, no questions asked. See the refund policy.
Does Hairline collect any data?
No. There's no analytics or tracking, and page content never leaves your browser. The only network requests are licence checks for Pro and Google Fonts when you preview a font. Read the privacy policy.
How does Send to AI work?
Pick an element or the whole page and choose a task, like recreating it in React + Tailwind or reviewing its accessibility. Hairline writes a detailed prompt with the markup, styles and colors, then opens Claude, ChatGPT or Gemini with the prompt ready to send (or on your clipboard). You use your own AI account, and Hairline never sends anything itself.
Try it on the next site you open
Free to install, with nine tools that stay free.