A bookmarklet that reveals the colours, fonts and logos a website actually uses — not the ones its stylesheet claims.
Before you reposition a brand, you need to know what it already runs on. That means digging through a stylesheet, or asking a developer, or eyedropping screenshots. brand-scan does it in one click: open any site, click the bookmark, get a panel with the palette weighted by how much of the page each colour covers, the typefaces with their real share of the text, and the logo files.
Scraping a site's CSS gives you the wrong answer, and here is why. A stylesheet routinely declares one font while the page renders another — a webfont pulled in at runtime through a font service that the source never spells out. A source scan reports the declaration; a live scan reports what actually rendered.
That is why this is a bookmarklet and not a URL box. It runs inside the page, reads computed styles, and sees exactly what a visitor sees. No proxy server, no CORS workarounds, nothing sent anywhere.
| Palette | Every colour weighted by the area it covers, so a 1px border never outranks a hero background. Brand colours listed first, greys and backgrounds second. |
| Typefaces | The families the browser actually rendered, with their share of the text, the sizes and the weights in use. |
| Logos | Header images, inline SVGs, favicon and the social share image. |
| Export | One click copies the palette as CSS custom properties. Another copies the full scan as JSON for the client folder. |
Two ways to run it. Same scanner underneath.
Browser extension (easiest). Load extension/ once, then a toolbar button scans whatever page you're on:
- Open
chrome://extensions - Turn on Developer mode (top right)
- Load unpacked → pick the
extension/folder
It asks for activeTab only, which means it can read a page at the moment you click the button and never in the background.
Bookmarklet (no install). Show your bookmarks bar (⌘⇧B / Ctrl⇧B), open the hosted page, and drag the Scanner la marque button into the bar. Useful on browsers where you'd rather not install anything.
Locally:
npm install
npm test # 20 tests on the analysis core
npm run build # bundles the scanner and the landing page into dist/Then serve the folder and open web/index.html.
src/core/analyze.ts holds everything with real logic — colour normalisation, area-weighted aggregation, neutral detection, font grouping — and is pure, DOM-free and fully tested. src/scanner/ is the thin browser half: it walks the page, and renders the panel inside a shadow root so a hostile host stylesheet can't wreck it.
Two details worth knowing, because both were bugs first:
- Invisible paint is discarded.
rgba(0,0,0,0)is everywhere in computed styles. Counted naively, transparent black becomes the "dominant brand colour" of almost every site. - Neutrals are judged by RGB spread, not HSL saturation. A cream like
#faf6e5scores 0.67 saturation while being visually a background. Using saturation files every off-white as a brand colour.
Heavily locked-down sites (banks, some large platforms) block injected scripts through their Content Security Policy, and the bookmarklet won't start there. That's a browser restriction, not a bug. Content inside a shadow DOM or a cross-origin iframe isn't visible to the scan either.
A free, open-source tool by Studio Almae, a strategic branding studio for lifestyle brands. Built for our own repositioning work, where every project starts with reading what a brand already has.
MIT © 2026 Studio Almae