Welcome to Hexly

Hexly is a Chrome extension that reads any webpage's design system (colors, typography, per-element styles, and downloadable assets) and puts it in one panel you can copy from. Color extraction, a pixel color picker, font detection, a full element inspector, asset grabbing, and a copy history, all in a single popover.

What Hexly does

Open Hexly on any site and it scans the live DOM with getComputedStyle to surface everything at once:

• Colors: every color actually used on the page, deduplicated and sorted by visual importance.
• Typography: each font family with its dominant size, weight, line-height, and a live preview.
• Inspect: click any element to read its box model, layout, type, and style, with a copy button per section.
• Assets: every image and SVG on the page, ready to copy or download.
• History: the values you've copied, kept so you can grab them again without re-scanning.

Who it's for

Designers rebuilding a reference, developers matching a spec, and anyone who has ever opened DevTools just to find one hex value. If you've used the eyedropper in a design tool and wished it worked on the whole web, Hexly is that, plus fonts, full styles, and assets.

Opening Hexly

Click the Hexly icon in the Chrome toolbar to open the panel on the current tab. Pin it from the puzzle-piece menu to keep it one click away. Click the × in the panel header to close it, or press Esc to leave inspect mode.

Supported pages

Hexly works by injecting a small script into the page you're viewing, so it runs almost everywhere, but a handful of pages are off-limits by Chrome's design, not Hexly's.

Where it works

Hexly runs on most public websites: anything served over http:// or https://. If you can load it in a normal tab, Hexly can almost always read it.

Where it doesn't

Hexly cannot run on:

• chrome:// pages (settings, history, the new-tab page)
• chrome-extension:// pages, including other extensions' UIs
• The Chrome Web Store itself
• Local file:// pages, unless you enable file access for Hexly in the extension's settings
• Pages with a strict Content-Security-Policy that blocks script injection

These restrictions are enforced by the browser. There's no workaround from inside the extension.

Iframes & errors

On pages with cross-origin iframes, the inspect overlay may appear offset from the element you're hovering; the browser sandboxes those frames separately.

Keyboard shortcuts

Hexly is mostly point-and-click, but a couple of keys speed things up. More shortcuts are planned.

Color extractor

The Colors tab is what you see when Hexly opens. It collects every color the page actually renders and presents them as a clean, copyable list.

How extraction works

Hexly walks every element in the DOM and reads its computed styles via getComputedStyle, pulling color, background-color, and border-color from each. Because it reads computed values, it captures the real rendered color, including ones set by CSS variables, inherited rules, or JavaScript.

Hexly understands the full CSS Color Level 4 syntax, so colors written as lab(), lch(), oklch(), or oklab() are parsed correctly alongside hex, rgb(), and hsl().

Sorting & deduplication

A raw page can yield hundreds of near-identical colors, so Hexly cleans the list before showing it:

• Deduplication: colors that are visually indistinguishable are merged using a delta-E (perceptual) distance, not a naive string match. #FEFEFE and #FFFFFF collapse into one.
• Sorting by importance: saturated, characterful colors rise to the top; near-blacks sink toward the bottom; near-whites land last. The brand colors you're usually after appear first.

The Copy All dropdown

The Copy All button in the panel header copies the whole palette at once. Its dropdown lets you pick the output format:

• Plain Text: a comma-separated list of hex values.
• CSS Variables: a --color-n custom property per color.
• Tailwind: a colors object ready to drop into your Tailwind config.

See Copy formats for exactly what each one produces.

Copying a single swatch

Color picker

Need a color that isn't in the extracted list (a value inside an image, a gradient, or a hover state)? Use the built-in eyedropper.

Using the eyedropper

Click the eyedropper icon next to Copy All to activate the picker, then click any pixel on the page. Hexly reads that pixel's exact color and copies its hex value straight to your clipboard.

One mode at a time

• The picker auto-deactivates after a single pick. Click the icon again for the next color.
• Only one mode is active at a time: turning on the picker exits inspect mode, and entering inspect mode turns off the picker.

Font extractor

The Typography tab scans every element on the page, groups what it finds by font family, and shows the most common size / weight / line-height combination for each: the way that font is actually used, not just that it's loaded.

What each card shows

Every font family gets a card with:

• Font name and a license badge (see below)
• A live preview: AaBbCcDdEe rendered in the actual font, when it's available on the page
• Specs: size, weight, line-height, and letter-spacing
• Where to get it: a link to the source (for example, Google Fonts for free families)
• Text color for that family, with its own copy button

License badges

Each card carries a badge describing the font's licensing:

• Free: freely usable (e.g. open-source / Google Fonts)
• Paid: a commercial font that requires a license
• System: a built-in OS font like system-ui or Arial
• Unknown: not found in the bundled font database

Where to get the font

For free families, the card links straight to where you can download or embed it, usually Google Fonts, so you can match a site's type in your own project in seconds.

Font Picker

Alongside the Typography tab, the Font Picker lets you point at any single piece of text on the page and pin a floating card showing that element's exact font details, without scrolling the full type list. It's the fast path when you just want to identify one typeface in place.

Inspect tab

The Inspect tab turns Hexly into a focused element inspector: DevTools' most-used readouts, distilled and copyable.

Entering inspect mode

Click the Inspect tab to enter element-selection mode. Hover any element to see a blue highlight, then click to lock it in. Press Esc at any time to exit. Hexly then breaks the element down into four sections, each with its own Copy CSS button.

Box model

A nested diagram of the selected element's margin → border → padding → content, with the measured pixel value on every side, the fastest way to see why something isn't lining up.

Properties

The layout essentials: display, position, and, when relevant, the element's flex or grid configuration.

Typography & contrast

Font family, size, weight, line-height, letter-spacing, and text color for the selected element, plus the WCAG contrast ratio against its background, tagged AA when it passes and Fail when it doesn't.

Style

The surface details: background, border, border-radius, box-shadow, and opacity, everything you need to recreate the look.

Pseudo-state inspection

Static styles only tell half the story. Inspect also reads how an element is styled in its interactive states, so you can see and copy the styles a page defines for hover, focus, and more, without triggering the state yourself.

What it reads

While an element is inspected, Hexly walks the page's stylesheets and surfaces the rules defined for:

• :hover
• :focus
• :active
• :disabled
• :checked

How it works

Hexly reads these from the page's own CSS via the CSSOM, so it can show a button's hover style or a checkbox's checked style without you needing to hover, click, or hold the element in that state, and without opening DevTools. When a state's styles are found, they're shown alongside the element's base styles and copy the same way, in plain, CSS-variable, or Tailwind format.

Asset extractor

The Assets tab collects the images and SVGs on the page and lays them out as tiles, so you can pull a logo, icon, or illustration in a couple of clicks.

What it finds

Hexly does a single pass over the page and surfaces:

• Images: PNG, JPG/JPEG, and WEBP
• SVGs: inline and referenced vector graphics

Each tile shows the asset and, where available, its file size. Use the filter to show all assets, only images, or only SVGs.

Copying vs downloading

Every tile offers both:

• Copy: SVGs copy as markup straight to your clipboard. Raster images copy as an actual image you can paste into design tools.
• Download: saves the asset directly to your device.

When a site blocks copying

Some sites lock down their assets so they can't be copied. When that happens, the tile tells you so in place and points you to download instead, so you're never stuck. You can retry, or just download the file.

History

History keeps a running record of the things you've copied, so you can grab a value again without re-scanning the page or re-launching the panel.

What gets logged

History logs the text artifacts you copy:

• Colors: from the Colors tab, the color picker, a Typography card's color, or an inline color in Inspect
• Fonts: font specs copied from Typography, and captures from the Font Picker
• CSS: element or per-section CSS copied from Inspect

Each entry shows the value, the site it came from, and when you copied it. Click any entry to copy it again.

What isn't logged

History is for things you can re-copy in-panel at no extra cost. Images and SVGs from the Assets tab are not stored in History, since re-grabbing an asset is a direct download rather than an in-panel copy. Tab switches, extractions, and plain hovers aren't logged either, only deliberate copies.

History needs an account

History is tied to your Hexly account, so it's available on the Free and Pro tiers, not in guest mode. How much History you keep depends on your tier, see Plans & tiers.

Plans & tiers

Hexly has three tiers. The most important thing to know up front: every feature is available on every tier. Tiers never gate features, they only differ in how much you can use Hexly and how much History you keep. You get the full toolset whether you're a guest or a Pro subscriber.

What counts as a run

A run is one Hexly panel session on a page, one open of the panel on one page. Everything you do inside that session, including all the copying you want, is unlimited and does not cost additional runs. Limits are counted in runs, not in copies.

The three tiers

• Guest: Use Hexly immediately, no account, no sign-in. The complete feature set, capped at a fixed lifetime number of runs. Guest usage is local to your browser, with no server-side record. History is not available in guest mode.
• Free: Sign in with Google to create a free account. Free replaces the lifetime cap with a daily run allowance that resets each day, so you get a fresh set of runs daily. Free keeps your 3 most recent History items.
• Pro: A paid subscription that removes the daily run limit entirely, unlimited runs, and expands History to your 50 most recent items. Pro is billed monthly or annually.

In short

Signing in

Hexly accounts use Google Sign-In. You can sign in from within the extension panel or on the Hexly website, it's the same account either way, so signing in on one carries to the other.

Signing in moves you from Guest to the Free tier, unlocks History, and lets you upgrade to Pro with your subscription tied to your account. You can upgrade to Pro from the website or the extension, and manage or cancel your subscription at any time through Paddle, our payment provider.

Copy formats

When you use Copy All in the Colors tab, the dropdown decides how the palette lands on your clipboard. Here's the same three-color palette in each of the three formats.

#D73546, #FFFFFF, #BCE531

--color-1: #D73546;
--color-2: #FFFFFF;
--color-3: #BCE531;

colors: {
  'color-1': '#D73546',
  'color-2': '#FFFFFF',
  'color-3': '#BCE531',
}

Individual swatches always copy as plain hex; only Copy All honors the selected format. The same three formats, plain, CSS variables, and Tailwind, are available across Typography and Inspect wherever you copy.

Privacy

What runs locally

Design extraction runs locally in your browser. Hexly reads styles with getComputedStyle and reads assets from the page you're on; the colors, fonts, inspected styles, and page content it surfaces are not sent to our servers. The one exception is History: when you copy a text value, that value (with its source page and timestamp) is saved to your account so you can re-copy it later.

Accounts and what we store

Guest mode stores only a local run counter in your browser and creates no server-side record. If you sign in, we store the basic Google profile information from sign-in (email, account identifier, and name/photo where provided), a per-day count of your runs to enforce tier limits, and your History artifacts. Payments are handled by Paddle as Merchant of Record; we never see your full card details.

Analytics

Hexly uses Supabase for accounts and backend storage, and Supabase's built-in analytics for aggregate service usage and performance. We do not use third-party advertising trackers, and we do not collect the content of the pages you inspect.

Permissions

Hexly requests only what its features need:

• storage: saves your settings, session, panel position, and guest run counter on your device.
• identity: enables Google Sign-In.
• downloads: lets you download an extracted image or SVG when you choose to.
• Access to the page you're inspecting: required to read that page's colors, fonts, CSS, and assets, and to place copied assets on your clipboard. Hexly only reads a page when you open the panel on it, and does not track or transmit the pages you visit.

FAQ

Why does the panel show an error on some pages?

Usually because the page loaded before Hexly was active, or the page blocks script injection. Refresh the page and reopen Hexly. If it still fails, the page is likely a restricted one: a chrome:// page, the Chrome Web Store, or a site with a strict Content-Security-Policy. See Supported pages.

Does Hexly work on Firefox or Safari?

Hexly is a Chrome extension and runs on Chrome and Chromium-based browsers (Edge, Brave, Arc, Opera). It is not currently available for Firefox or Safari.

Why are some fonts showing as "Unknown"?

License badges come from a bundled font database. When a font family isn't in that database, Hexly shows Unknown instead of guessing its license. The font's specs and preview still work; only the license is unknown.

Does Hexly read the actual source code?

No. Hexly reads the computed styles of the live, rendered page via getComputedStyle, the final values the browser applied. It does not read or parse your CSS or HTML source files.

Do I need an account to use Hexly?

No. Guest mode gives you every feature with no sign-in, capped at a lifetime number of runs and without History. Signing in with Google unlocks a daily run allowance and History (Free), and Pro removes run limits. See Plans & tiers.

Why can't I copy some assets?

Some sites lock down their images so they can't be copied to the clipboard. When that happens, Hexly tells you on the tile and lets you download the asset instead. See Asset extractor.

Is my browsing data sent anywhere?

Design extraction happens on your device, and we don't collect the pages you visit or their content. What we do store is tied to an account if you create one: your Google profile basics, your run count, and the text values you save to History. See Privacy.

Can I use Hexly on password-protected pages?

Yes. Once you're logged in and viewing the page normally, Hexly reads it like any other page; it only sees what's already rendered in your browser.