Match brand from screenshot
Drop a logo, a moodboard, or any brand screenshot into the editor and Claude returns a 3–5 colour palette plus an optional font-family and weight suggestion. Each suggestion is a click-to-apply chip wired to the same intents the Inspector controls dispatch — Text colour, Background colour, Font family, Font weight.
When this is useful
When you're running a variation that aims to feel on-brand and you don't want to eyeball hex codes off the customer's marketing site. Paste a screenshot, get the palette, apply the right tone to the right element.
The feature is element-scoped — colours apply to whichever element you had selected when you opened the modal. Open Match brand for the hero CTA and the chip will recolour that CTA, not the page.
How to use it
- Click the element you want to recolour. The floating popover appears above it.
- Click the ⋯ overflow button on the popover, then Match brand from screenshot.
- In the modal, choose either Upload image or Paste URL:
- Upload — drag or click to pick a PNG, JPEG, WEBP, or GIF up to 4 MB.
- URL — paste an HTTPS URL pointing at a brand image (logo, hero screenshot, moodboard). HTTP is rejected; cloud-metadata and private-network hostnames are blocked server-side.
- Click Analyse. Claude returns the palette and optional font suggestions in 2–4 seconds.
- Click any chip to apply: Text sets text colour, BG sets background colour. If a font family or weight is suggested, an Apply font / Apply weight button lives below the chips.
Limits
- Rate limit — 5 requests per minute per user.If you hit the limit, the modal surfaces “Too many requests. Try again in a minute.”
- Image size — 4 MB hard cap. Enforced client-side for fast feedback and re-enforced server-side as the security boundary.
- MIME allowlist — PNG, JPEG, WEBP, GIF only. Other types are rejected with “Only PNG, JPEG, WEBP, and GIF images are accepted.”
- HTTPS only. URL inputs must start with
https://. HTTP redirects are rejected mid-fetch.
What the AI sees
Claude sees the image bytes (forwarded server-side from the dashboard, never directly from the extension) plus the currently selected element's text colour, background colour, and font-family — used as soft context so the suggested palette doesn't recommend white-on-white. The element's actual text and the page's URL are not sent.
Cancelling a slow request
While the spinner is showing, a Cancel button sits next to it. Clicking it aborts the in-flight request on the service worker and returns the modal to the input stage. Useful if the image was wrong or the request is taking longer than expected.
- “Couldn't fetch that URL” — the URL failed the server-side fetch (DNS, connection, redirect cap, or non-HTTPS).
- “Image is larger than 4 MB” — pick a smaller file or use the URL path with a different host.
- “Couldn't analyse that image”— the AI couldn't produce a confident palette. Try a different image with clearer brand colours.