Hover over any element to instantly reveal its font or colour. Built for designers and developers.
- Font Inspector — hover over any text to see its font family, size, weight, line height, and text colour
- Colour Picker — hold
Altwhile hovering to reveal the HEX, HSL, and RGB values of any background colour - One-click copy — click any element to copy the font name or hex code straight to your clipboard
- Zero setup — no accounts, no tracking, no permissions beyond the active tab
If I ever get to this, will update link here.
- Download or clone this repo
- Go to
chrome://extensionsin your browser - Enable Developer Mode using the toggle in the top right
- Click Load unpacked and select the
font-detectivefolder - The Design Detective icon will appear in your toolbar — click it to activate
| Action | Result |
|---|---|
| Enable the toggle in the popup | Activates the inspector on the current tab |
| Hover over text | Shows font family, size, weight, line height & colour |
Hold Alt + hover |
Switches to colour picker — shows HEX, HSL, RGB |
| Click any element | Copies the font name or hex code to your clipboard |
- Vanilla JavaScript (no frameworks)
- Chrome Extensions Manifest V3
- CSS injected via content script
Design Detective reads computed styles from the page you're browsing. It does not collect, store, or transmit any data. No analytics. No telemetry. Nothing leaves your browser.
Found a bug or want a feature? Open an issue or submit a PR — contributions are welcome.
Keerthana Vegesna 2026